root
59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
|
|
test('explicit dark theme is present on the server-rendered root', async ({ browser, baseURL }) => {
|
|
const origin = new URL(baseURL ?? 'http://127.0.0.1:3000');
|
|
const context = await browser.newContext();
|
|
await context.addCookies([
|
|
{
|
|
name: 'hpc-theme',
|
|
value: 'dark',
|
|
domain: origin.hostname,
|
|
path: '/',
|
|
secure: false,
|
|
sameSite: 'Lax',
|
|
},
|
|
]);
|
|
const page = await context.newPage();
|
|
const response = await page.goto('/en');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'dark');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
const csp = response?.headers()['content-security-policy'] ?? '';
|
|
const nonce = await page.locator('#theme-bootstrap').getAttribute('nonce');
|
|
expect(nonce).toBeTruthy();
|
|
expect(csp).toContain(`'nonce-${nonce}'`);
|
|
await context.close();
|
|
});
|
|
|
|
test('system preference resolves before interaction', async ({ browser }) => {
|
|
const context = await browser.newContext({ colorScheme: 'dark' });
|
|
const page = await context.newPage();
|
|
await page.goto('/en');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'system');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
await context.close();
|
|
});
|
|
|
|
test('system follows operating-system changes while explicit preferences ignore them', async ({
|
|
page,
|
|
}) => {
|
|
await page.goto('/en');
|
|
const selector = page.getByLabel('Theme').first();
|
|
|
|
await selector.selectOption('system');
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
|
|
|
|
await selector.selectOption('dark');
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'dark');
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
expect(await page.evaluate(() => window.localStorage.getItem('hpc.theme.preference'))).toBe(
|
|
'dark',
|
|
);
|
|
expect(await page.context().cookies()).toEqual(
|
|
expect.arrayContaining([expect.objectContaining({ name: 'hpc-theme', value: 'dark' })]),
|
|
);
|
|
});
|