kawaandClaude Haiku 4.5
a7a1b05817
Remove data-theme attribute when mode="auto" instead of setting it to "auto". Pico's OS-dark selector is :root:not([data-theme]), so any value (even "auto") prevents dark-mode Pico styles. Add Pico form element background vars and color-scheme: light to match active theme. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
60 lines
2.2 KiB
Python
60 lines
2.2 KiB
Python
"""UIE-04: E2E tests for theme toggle — data-theme cycling and localStorage persistence."""
|
|
from __future__ import annotations
|
|
import pytest
|
|
|
|
|
|
def test_theme_cycles_on_click(page, live_server: str) -> None:
|
|
"""Clicking theme button cycles data-theme attribute: auto -> light -> dark -> auto."""
|
|
page.goto(f"{live_server}/", wait_until="domcontentloaded")
|
|
|
|
# Initial state: auto — the attribute must be ABSENT, not "auto". Pico's
|
|
# OS-dark block is keyed on `:root:not([data-theme])`, so any value pins
|
|
# Pico to its light theme while app.css follows the OS into dark.
|
|
initial_theme = page.evaluate("document.documentElement.getAttribute('data-theme')")
|
|
assert initial_theme is None
|
|
|
|
# Click once -> light
|
|
page.click("button[aria-label='auto']")
|
|
page.wait_for_function(
|
|
"document.documentElement.getAttribute('data-theme') === 'light'",
|
|
timeout=2000,
|
|
)
|
|
assert page.evaluate("document.documentElement.getAttribute('data-theme')") == "light"
|
|
|
|
# Click again -> dark
|
|
page.click("button[aria-label='light']")
|
|
page.wait_for_function(
|
|
"document.documentElement.getAttribute('data-theme') === 'dark'",
|
|
timeout=2000,
|
|
)
|
|
assert page.evaluate("document.documentElement.getAttribute('data-theme')") == "dark"
|
|
|
|
# Click again -> auto, which removes the attribute again
|
|
page.click("button[aria-label='dark']")
|
|
page.wait_for_function(
|
|
"!document.documentElement.hasAttribute('data-theme')",
|
|
timeout=2000,
|
|
)
|
|
|
|
|
|
def test_theme_persists_across_reload(page, live_server: str) -> None:
|
|
"""After clicking theme toggle, the chosen theme is restored on reload."""
|
|
page.goto(f"{live_server}/", wait_until="domcontentloaded")
|
|
|
|
# Switch to light mode
|
|
page.click("button[aria-label='auto']")
|
|
page.wait_for_function(
|
|
"document.documentElement.getAttribute('data-theme') === 'light'",
|
|
timeout=2000,
|
|
)
|
|
|
|
# Reload the page
|
|
page.reload(wait_until="domcontentloaded")
|
|
|
|
# Theme should still be light (from localStorage)
|
|
theme_after_reload = page.evaluate("document.documentElement.getAttribute('data-theme')")
|
|
assert theme_after_reload == "light"
|
|
|
|
# Cleanup: reset to auto
|
|
page.evaluate("localStorage.setItem('imptune_theme', 'auto')")
|