redirect /admin/theme to on-site editor at /?edit=theme
All checks were successful
deploy / deploy (push) Successful in 1m41s
All checks were successful
deploy / deploy (push) Successful in 1m41s
- Phase 5 was already implemented (URL mode activation via ?edit param) - Phase 6: Add RedirectController to redirect /admin/theme → /?edit=theme - Update admin sidebar and dashboard links to point directly to /?edit=theme - Delete old Admin.Theme.Index LiveView and template (no longer needed) - Update tests for new redirect behavior Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
@@ -19,7 +19,7 @@ defmodule BerrypodWeb.Admin.LayoutTest do
|
||||
|
||||
assert has_element?(view, ~s(a[href="/admin"]), "Dashboard")
|
||||
assert has_element?(view, ~s(a[href="/admin/orders"]), "Orders")
|
||||
assert has_element?(view, ~s(a[href="/admin/theme"]), "Theme")
|
||||
assert has_element?(view, ~s(a[href="/?edit=theme"]), "Theme")
|
||||
assert has_element?(view, ~s(a[href="/admin/settings"]), "Settings")
|
||||
end
|
||||
|
||||
@@ -45,24 +45,6 @@ defmodule BerrypodWeb.Admin.LayoutTest do
|
||||
end
|
||||
end
|
||||
|
||||
describe "theme editor layout" do
|
||||
setup %{conn: conn, user: user} do
|
||||
%{conn: log_in_user(conn, user)}
|
||||
end
|
||||
|
||||
test "does not render sidebar", %{conn: conn} do
|
||||
{:ok, _view, html} = live(conn, ~p"/admin/theme")
|
||||
|
||||
refute html =~ "admin-drawer"
|
||||
end
|
||||
|
||||
test "shows back link to admin", %{conn: conn} do
|
||||
{:ok, view, _html} = live(conn, ~p"/admin/theme")
|
||||
|
||||
assert has_element?(view, ~s(a[href="/admin"]), "Admin")
|
||||
end
|
||||
end
|
||||
|
||||
describe "admin bar on shop pages" do
|
||||
setup do
|
||||
{:ok, _} = Berrypod.Settings.set_site_live(true)
|
||||
|
||||
@@ -1,216 +1,24 @@
|
||||
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")
|
||||
describe "/admin/theme redirect" do
|
||||
test "redirects unauthenticated users to login", %{conn: conn} do
|
||||
conn = get(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}
|
||||
assert redirected_to(conn) == ~p"/users/log-in"
|
||||
end
|
||||
|
||||
test "renders theme editor page", %{conn: conn} do
|
||||
{:ok, _view, html} = live(conn, ~p"/admin/theme")
|
||||
test "redirects authenticated users to on-site editor", %{conn: conn, user: user} do
|
||||
conn = conn |> log_in_user(user) |> get(~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:"
|
||||
assert redirected_to(conn) == "/?edit=theme"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
defmodule BerrypodWeb.ThemeCSSConsistencyTest do
|
||||
@moduledoc """
|
||||
Tests that verify CSS works correctly for both the theme editor
|
||||
preview and the shop pages using the shared .themed class.
|
||||
Tests that verify CSS works correctly for shop pages using the .themed class.
|
||||
|
||||
Architecture:
|
||||
- Both shop pages and preview use .themed class for shared styles
|
||||
- Theme editor uses .preview-frame[data-*] selectors for live switching (in admin.css)
|
||||
- Shop pages get theme values via inline CSS from CSSGenerator (shop.css)
|
||||
- Shop pages use .themed class for theme-aware styles
|
||||
- Theme editor is on-site (/?edit=theme) so it uses the same CSS as shop pages
|
||||
- Shop pages get theme values via inline CSS from CSSGenerator
|
||||
- Component styles use .themed for shared styling (theme-layer2-attributes.css)
|
||||
"""
|
||||
|
||||
@@ -34,11 +33,12 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
|
||||
assert html =~ ~r/data-density="/
|
||||
end
|
||||
|
||||
test "theme editor has .themed with data attributes", %{conn: conn, user: user} do
|
||||
test "on-site theme editor has .themed with data attributes", %{conn: conn, user: user} do
|
||||
conn = log_in_user(conn, user)
|
||||
{:ok, _view, html} = live(conn, ~p"/admin/theme")
|
||||
# Theme editor is now on-site at /?edit=theme
|
||||
{:ok, _view, html} = live(conn, ~p"/?edit=theme")
|
||||
|
||||
# Verify themed element exists in preview-frame with theme data attributes
|
||||
# Verify themed element exists with theme data attributes
|
||||
assert html =~ ~r/<div[^>]*class="themed/
|
||||
assert html =~ ~r/data-mood="/
|
||||
assert html =~ ~r/data-typography="/
|
||||
@@ -46,26 +46,6 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
|
||||
assert html =~ ~r/data-density="/
|
||||
end
|
||||
|
||||
test "shop page uses same theme settings as preview", %{conn: conn, user: user} do
|
||||
# Set a specific theme configuration
|
||||
{:ok, _settings} = Settings.apply_preset(:night)
|
||||
|
||||
# Check shop page (logged in since site_live is false by default)
|
||||
conn = log_in_user(conn, user)
|
||||
{:ok, _view, shop_html} = live(conn, ~p"/")
|
||||
|
||||
# Check preview (already authenticated)
|
||||
{:ok, _view, preview_html} = live(conn, ~p"/admin/theme")
|
||||
|
||||
# Extract data-mood values from both
|
||||
[_, shop_mood] = Regex.run(~r/data-mood="([^"]+)"/, shop_html)
|
||||
[_, preview_mood] = Regex.run(~r/data-mood="([^"]+)"/, preview_html)
|
||||
|
||||
# They should match
|
||||
assert shop_mood == preview_mood
|
||||
assert shop_mood == "dark"
|
||||
end
|
||||
|
||||
test "theme settings changes are reflected on shop page", %{conn: conn, user: user} do
|
||||
conn = log_in_user(conn, user)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user