From 750f2463a2d1e2b30ebd335b9f35172a25366729 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 9 May 2026 22:10:08 +0200
Subject: [PATCH] test(hilfe): cover the Transkriptions-Richtlinien page

Title, all four section headings, secure Wikipedia link rel
attributes, five rule cards rendered, four klaerung chips rendered.

7 tests covering the static help page.

Refs #496.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../hilfe/transkription/page.svelte.test.ts   | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 frontend/src/routes/hilfe/transkription/page.svelte.test.ts

diff --git a/frontend/src/routes/hilfe/transkription/page.svelte.test.ts b/frontend/src/routes/hilfe/transkription/page.svelte.test.ts
new file mode 100644
index 00000000..4aea91d4
--- /dev/null
+++ b/frontend/src/routes/hilfe/transkription/page.svelte.test.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TranskriptionsRichtlinienPage from './+page.svelte';
+
+afterEach(cleanup);
+
+describe('hilfe/transkription page', () => {
+	it('renders the page title', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		await expect
+			.element(page.getByRole('heading', { level: 1, name: /transkriptions-richtlinien/i }))
+			.toBeVisible();
+	});
+
+	it('renders the rules section heading', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		await expect
+			.element(page.getByRole('heading', { name: /regeln für die transkription/i }))
+			.toBeVisible();
+	});
+
+	it('renders the klaerung section heading', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		await expect.element(page.getByRole('heading', { name: /noch in klärung/i })).toBeVisible();
+	});
+
+	it('renders the closing question heading', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		await expect.element(page.getByRole('heading', { name: /fehlt eine regel/i })).toBeVisible();
+	});
+
+	it('renders the Wikipedia link with secure rel attributes', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		const link = (await page
+			.getByRole('link', { name: /wikipedia/i })
+			.element()) as HTMLAnchorElement;
+		expect(link.href).toContain('wikipedia.org');
+		expect(link.target).toBe('_blank');
+		expect(link.rel).toContain('noopener');
+		expect(link.rel).toContain('noreferrer');
+	});
+
+	it('renders five rule cards', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		// Each RichtlinienRuleCard heading appears once
+		const ruleHeadings = document.querySelectorAll('h3');
+		expect(ruleHeadings.length).toBeGreaterThanOrEqual(5);
+	});
+
+	it('renders four klaerung chips', async () => {
+		render(TranskriptionsRichtlinienPage, { props: {} });
+
+		// Chips are styled spans with rounded-full — count by class
+		const chips = document.querySelectorAll('span.rounded-full');
+		expect(chips.length).toBeGreaterThanOrEqual(4);
+	});
+});