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