From c905f136d2e2e54220d0b4d9664a42b01fcf315d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:03:38 +0200
Subject: [PATCH] test(header): add Playwright tests for brand-navy header

- Asserts header background is rgb(1,40,81) in light mode
- Asserts header stays navy after switching to dark mode
- Asserts logo text visible at 375px viewport
- Asserts login page has AuthHeader with navy background and lang switcher

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/header.spec.ts | 50 +++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 frontend/e2e/header.spec.ts

diff --git a/frontend/e2e/header.spec.ts b/frontend/e2e/header.spec.ts
new file mode 100644
index 00000000..bda4cee3
--- /dev/null
+++ b/frontend/e2e/header.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+const BRAND_NAVY = 'rgb(1, 40, 81)';
+
+test.describe('Header — brand-navy background', () => {
+	test('header background is brand-navy in light mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		const bg = await page.locator('header').evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('header background stays brand-navy after switching to dark 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');
+
+		const bg = await page.locator('header').evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('logo text is visible at 375px viewport', async ({ page }) => {
+		await page.setViewportSize({ width: 375, height: 812 });
+		await page.goto('/');
+
+		await expect(page.getByRole('banner').getByText('Familienarchiv')).toBeVisible();
+	});
+});
+
+test.describe('Login page — AuthHeader', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test('login page has brand-navy header with language switcher', async ({ page }) => {
+		await page.goto('/login');
+
+		const header = page.locator('header');
+		await expect(header).toBeVisible();
+
+		const bg = await header.evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+
+		await expect(header.getByRole('button', { name: 'DE' })).toBeVisible();
+	});
+});