56926efd03
Two failing test suites that encode the regressions this issue fixes: - accessibility.spec.ts: axe wcag2aa in both prefers-color-scheme:dark and data-theme='dark' — fails because --c-ink-3:#6b7280 on #1a1a1a = 3.2:1 - theme.spec.ts: color-scheme computed property is 'dark' in dark mode — fails because neither dark CSS block sets color-scheme: dark Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Theme toggle', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Clear any saved theme preference before each test
|
|
await page.goto('/');
|
|
await page.evaluate(() => localStorage.removeItem('theme'));
|
|
});
|
|
|
|
test('toggle button is visible in the header', async ({ page }) => {
|
|
await page.goto('/');
|
|
await expect(
|
|
page.getByRole('banner').getByRole('button', { name: /dark mode|light mode/i })
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('clicking the toggle switches to dark mode', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
|
|
const html = page.locator('html');
|
|
await expect(html).not.toHaveAttribute('data-theme', 'dark');
|
|
|
|
await page
|
|
.getByRole('banner')
|
|
.getByRole('button', { name: /dark mode/i })
|
|
.click();
|
|
|
|
await expect(html).toHaveAttribute('data-theme', 'dark');
|
|
});
|
|
|
|
test('clicking the toggle again switches back to light mode', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
|
|
await page
|
|
.getByRole('banner')
|
|
.getByRole('button', { name: /dark mode/i })
|
|
.click();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
|
|
await page
|
|
.getByRole('banner')
|
|
.getByRole('button', { name: /light mode/i })
|
|
.click();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
|
|
});
|
|
|
|
test('theme persists after page reload', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
|
|
await page
|
|
.getByRole('banner')
|
|
.getByRole('button', { name: /dark mode/i })
|
|
.click();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
|
|
await page.reload();
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
});
|
|
|
|
test('color-scheme is dark when data-theme=dark is set', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
|
|
await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
|
|
|
|
const colorScheme = await page.evaluate(
|
|
() => getComputedStyle(document.documentElement).colorScheme
|
|
);
|
|
expect(colorScheme).toBe('dark');
|
|
});
|
|
|
|
test('color-scheme is dark in prefers-color-scheme: dark media', async ({ browser }) => {
|
|
const context = await browser.newContext({
|
|
colorScheme: 'dark',
|
|
storageState: 'e2e/.auth/user.json'
|
|
});
|
|
const page = await context.newPage();
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
|
|
const colorScheme = await page.evaluate(
|
|
() => getComputedStyle(document.documentElement).colorScheme
|
|
);
|
|
await context.close();
|
|
expect(colorScheme).toBe('dark');
|
|
});
|
|
|
|
test('saved theme is applied before first paint (no flash)', async ({ page }) => {
|
|
// Set dark theme in localStorage before navigating
|
|
await page.goto('/');
|
|
await page.evaluate(() => localStorage.setItem('theme', 'dark'));
|
|
|
|
// Intercept the initial HTML to verify data-theme is set immediately
|
|
await page.goto('/');
|
|
const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
|
|
expect(theme).toBe('dark');
|
|
});
|
|
});
|