berrypod/test/berrypod_web/live/admin/theme_test.exs

defmodule BerrypodWeb.Admin.ThemeTest do
  use BerrypodWeb.ConnCase, async: false

  import Phoenix.LiveViewTest
  import Berrypod.AccountsFixtures

  alias Berrypod.Settings

  setup do
    user = user_fixture()
    %{user: user}
  end

  describe "Index (unauthenticated)" do
    test "redirects to login when not authenticated", %{conn: conn} do
      {:error, redirect} = live(conn, ~p"/admin/theme")

      assert {:redirect, %{to: path}} = redirect
      assert path == ~p"/users/log-in"
    end
  end

  describe "Index (authenticated)" do
    setup %{conn: conn, user: user} do
      conn = log_in_user(conn, user)
      %{conn: conn}
    end

    test "renders theme editor page", %{conn: conn} do
      {:ok, _view, html} = live(conn, ~p"/admin/theme")

      assert html =~ "<h1 class=\"theme-title\">Theme</h1>"
      assert html =~ "preset"
    end

    test "displays all 8 presets", %{conn: conn} do
      {:ok, _view, html} = live(conn, ~p"/admin/theme")

      assert html =~ "gallery"
      assert html =~ "studio"
      assert html =~ "boutique"
      assert html =~ "bold"
      assert html =~ "playful"
      assert html =~ "minimal"
      assert html =~ "night"
      assert html =~ "classic"
    end

    test "displays current theme settings", %{conn: conn} do
      {:ok, _settings} = Settings.apply_preset(:gallery)
      {:ok, _view, html} = live(conn, ~p"/admin/theme")

      assert html =~ "warm"
      assert html =~ "editorial"
      assert html =~ "soft"
      assert html =~ "spacious"
    end

    test "displays generated CSS in preview", %{conn: conn} do
      {:ok, _view, html} = live(conn, ~p"/admin/theme")

      # CSS generator outputs accent colors and layout variables for shop pages
      assert html =~ ".themed {"
      assert html =~ "--t-accent-h:"
    end

    test "applies preset and updates preview", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      html =
        view
        |> element("button", "gallery")
        |> render_click()

      theme_settings = Settings.get_theme_settings()
      assert theme_settings.mood == "warm"
      assert theme_settings.typography == "editorial"
      assert html =~ "warm"
      assert html =~ "editorial"
    end

    test "switches preview page", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      html =
        view
        |> element("button", "Collection")
        |> render_click()

      assert html =~ "All Products"
    end

    test "theme settings are saved when applying a preset", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Apply a preset
      view
      |> element("button", "gallery")
      |> render_click()

      # Verify settings were persisted
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.mood == "warm"
      assert theme_settings.typography == "editorial"
    end

    test "all preview page buttons are present", %{conn: conn} do
      {:ok, _view, html} = live(conn, ~p"/admin/theme")

      assert html =~ "Home"
      assert html =~ "Collection"
      assert html =~ "Product"
      assert html =~ "Cart"
      assert html =~ "About"
      assert html =~ "Contact"
      assert html =~ "404"
    end

    test "mood customization buttons work", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Click the "dark" mood button
      html =
        view
        |> element("button[phx-value-setting_value='dark']")
        |> render_click()

      # Verify the setting was updated
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.mood == "dark"
      assert html =~ "dark"
    end

    test "shape customization buttons work", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Click the "round" shape button
      view
      |> element("button[phx-value-setting_value='round']")
      |> render_click()

      # Verify the setting was updated
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.shape == "round"
    end

    test "density customization buttons work", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Click the "compact" density button
      view
      |> element("button[phx-value-setting_value='compact']")
      |> render_click()

      # Verify the setting was updated
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.density == "compact"
    end

    test "grid columns customization buttons work", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Click the "2 columns" grid columns button
      view
      |> element("button", "2 columns")
      |> render_click()

      # Verify the setting was updated
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.grid_columns == "2"
    end

    test "typography customization buttons work", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Click the "modern" typography button
      view
      |> element("button[phx-value-setting_value='modern']")
      |> render_click()

      # Verify the setting was updated
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.typography == "modern"
    end

    test "header layout customization buttons work", %{conn: conn} do
      {:ok, view, _html} = live(conn, ~p"/admin/theme")

      # Click the "centered" header layout button
      view
      |> element("button[phx-value-setting_value='centered']")
      |> render_click()

      # Verify the setting was updated
      theme_settings = Settings.get_theme_settings()
      assert theme_settings.header_layout == "centered"
    end

    test "CSS regenerates when settings change", %{conn: conn} do
      {:ok, view, html} = live(conn, ~p"/admin/theme")

      # Capture initial CSS
      initial_css = html

      # Change a setting
      new_html =
        view
        |> element("button[phx-value-setting_value='dark']")
        |> render_click()

      # Verify CSS has changed
      refute initial_css == new_html
      assert new_html =~ "--t-accent-h:"
    end
  end
end