familienarchiv/frontend/e2e/theme.spec.ts

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('header uses --c-header token background in dark mode', async ({ page }) => {
		await page.goto('/');
		await page.waitForSelector('[data-hydrated]');

		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));

		const headerBg = await page.evaluate(() => {
			const header = document.querySelector('header');
			return header ? getComputedStyle(header).backgroundColor : null;
		});
		// --c-header in dark mode = #012851 (brand navy) → rgb(1, 40, 81)
		expect(headerBg).toBe('rgb(1, 40, 81)');
	});

	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');
	});
});