Claude Fable 5
4e0ad82220
theme-contrast.test.ts parses tokens.css and asserts every real UI colour pairing (4.5:1 text, 3:1 UI) for BOTH palettes, so palette drift fails unit tests instead of review. theme.test.ts covers resolve/apply logic (Node >= 22 ships a shadowing undefined localStorage global — the test brings its own in-memory storage). The a11y pack now runs its four scans in light AND dark via emulateMedia; the new theme pack exercises the three-way switch end to end (instant apply, reload persistence, live OS follow in system mode, override beats OS). ADR 0018 records the theming model broadly: modes now, accent themes by derivation later. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QRtCnB3uLdQtFmvp9HXcRX
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test';
|
|
|
|
import { contextForUser } from './helpers';
|
|
|
|
/**
|
|
* Theme-Umschalter (issue #180): die Hell/Dunkel/System-Wahl in den
|
|
* Einstellungen wirkt sofort, überlebt den Reload (localStorage) und folgt
|
|
* im System-Modus Live-Änderungen des OS-Schemas. Klassen-Hooks statt
|
|
* lokalisierter Texte (UI-Sprache folgt dem Profil-Locale).
|
|
*/
|
|
|
|
const BASE = process.env.E2E_BASE_URL ?? 'http://localhost:5173';
|
|
|
|
const radio = (page: Page, value: string) =>
|
|
page.locator(`.settings-fieldset input[value="${value}"]`);
|
|
|
|
const effectiveTheme = (page: Page) => page.evaluate(() => document.documentElement.dataset.theme);
|
|
|
|
test('theme choice applies instantly, persists, and system mode follows the OS', async ({
|
|
browser,
|
|
}) => {
|
|
const context = await contextForUser(browser, BASE, 'fixture-user');
|
|
const page = await context.newPage();
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
|
await page.goto('/settings');
|
|
await page.locator('.settings-fieldset').waitFor();
|
|
|
|
// Default: System, auf einem hellen OS also light.
|
|
await expect(radio(page, 'system')).toBeChecked();
|
|
expect(await effectiveTheme(page)).toBe('light');
|
|
|
|
// Explizit Dunkel: wirkt sofort, ohne Reload, trotz hellem OS.
|
|
await radio(page, 'dark').check();
|
|
expect(await effectiveTheme(page)).toBe('dark');
|
|
await expect(page.locator('meta[name="theme-color"]').first()).toHaveAttribute(
|
|
'content',
|
|
'#10161d',
|
|
);
|
|
|
|
// Persistenz: Wahl und Theme überleben den Reload (theme-init.js liest
|
|
// denselben localStorage-Key vor dem ersten Paint).
|
|
await page.reload();
|
|
await page.locator('.settings-fieldset').waitFor();
|
|
await expect(radio(page, 'dark')).toBeChecked();
|
|
expect(await effectiveTheme(page)).toBe('dark');
|
|
expect(await page.evaluate(() => window.localStorage.getItem('ui.theme.mode'))).toBe('"dark"');
|
|
|
|
// Zurück auf System: folgt dem hellen OS …
|
|
await radio(page, 'system').check();
|
|
expect(await effectiveTheme(page)).toBe('light');
|
|
|
|
// … und Live-Wechseln des OS-Schemas ohne Interaktion.
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
|
await expect
|
|
.poll(async () => effectiveTheme(page), { message: 'system mode follows OS change' })
|
|
.toBe('dark');
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
|
await expect.poll(async () => effectiveTheme(page)).toBe('light');
|
|
|
|
// Explizite Wahl gewinnt gegen das OS-Schema.
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
|
await radio(page, 'light').check();
|
|
expect(await effectiveTheme(page)).toBe('light');
|
|
|
|
await context.close();
|
|
});
|