init project

2026-06-25 19:06:59 -04:00
parent c5dfee6efb
commit 5d017f533a
349 changed files with 31330 additions and 0 deletions
@@ -0,0 +1,58 @@
+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' })]),
+  );
+});