36 lines
1.7 KiB
TypeScript
36 lines
1.7 KiB
TypeScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Standalone theme follow e2e (comments-ux 0002): resolution precedence
|
||
|
|
* (?theme= param > storage > OS), no-flash application before first paint,
|
||
|
|
* persistence across a param-less reload, and the shell toggle. Kept on the
|
||
|
|
* HOME page — no tool boot needed; the canvas half (seeded KiCad color theme
|
||
|
|
* + the kicadSetColorTheme bridge) is covered by unit seeding assertions and
|
||
|
|
* manual Firefox verification per the standalone UI workflow.
|
||
|
|
*/
|
||
|
|
|
||
|
|
test('?theme=dark applies before paint, persists, and the toggle flips it', async ({ page }) => {
|
||
|
|
await page.goto('/?theme=dark', { waitUntil: 'domcontentloaded' });
|
||
|
|
// The inline boot script ran before first paint — no React needed yet.
|
||
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
||
|
|
|
||
|
|
// The param persisted; a param-less reload stays dark.
|
||
|
|
await page.goto('/');
|
||
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
||
|
|
expect(await page.evaluate(() => localStorage.getItem('pcbjam-theme'))).toBe('dark');
|
||
|
|
|
||
|
|
// Shell toggle flips class + storage.
|
||
|
|
await page.getByTestId('theme-toggle').click();
|
||
|
|
await expect(page.locator('html')).not.toHaveClass(/dark/);
|
||
|
|
expect(await page.evaluate(() => localStorage.getItem('pcbjam-theme'))).toBe('light');
|
||
|
|
|
||
|
|
// A later ?theme= wins over the stored choice.
|
||
|
|
await page.goto('/?theme=dark', { waitUntil: 'domcontentloaded' });
|
||
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('invalid ?theme= falls back to the stored/OS preference', async ({ page }) => {
|
||
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
||
|
|
await page.goto('/?theme=purple', { waitUntil: 'domcontentloaded' });
|
||
|
|
await expect(page.locator('html')).not.toHaveClass(/dark/);
|
||
|
|
});
|