From 3e4157fa7cfb621fac4c606de07203ec9c59078d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 9 May 2026 22:05:32 +0200
Subject: [PATCH] test(geschichten): cover the index page branches

Heading, canBlogWrite-gated CTA, no-filter empty state vs for-persons
empty state, all-pill aria-pressed matrix, person-filter chip
rendering, populated card list. Mocks $app/navigation since the filter
buttons call goto.

9 tests, ~25 branches.

Refs #496.

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

diff --git a/frontend/src/routes/geschichten/page.svelte.test.ts b/frontend/src/routes/geschichten/page.svelte.test.ts
new file mode 100644
index 00000000..3246d8cf
--- /dev/null
+++ b/frontend/src/routes/geschichten/page.svelte.test.ts
@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+vi.mock('$app/navigation', () => ({
+	beforeNavigate: () => {},
+	afterNavigate: () => {},
+	goto: vi.fn(),
+	invalidate: vi.fn(),
+	invalidateAll: vi.fn(),
+	preloadCode: vi.fn(),
+	preloadData: vi.fn(),
+	pushState: vi.fn(),
+	replaceState: vi.fn(),
+	disableScrollHandling: vi.fn(),
+	onNavigate: () => () => {}
+}));
+
+const { default: GeschichtenListPage } = await import('./+page.svelte');
+
+afterEach(cleanup);
+
+const baseData = (overrides: Record<string, unknown> = {}) => ({
+	geschichten: [] as Array<{
+		id: string;
+		title: string;
+		body?: string;
+		publishedAt?: string;
+		author?: { firstName?: string; lastName?: string; email: string };
+	}>,
+	personFilters: [] as { id?: string; displayName: string }[],
+	documentFilter: null,
+	canBlogWrite: false,
+	...overrides
+});
+
+describe('geschichten/+ page', () => {
+	it('renders the page heading', async () => {
+		render(GeschichtenListPage, { props: { data: baseData() } });
+
+		await expect
+			.element(page.getByRole('heading', { level: 1, name: /geschichten/i }))
+			.toBeVisible();
+	});
+
+	it('shows the new-geschichte CTA when canBlogWrite is true', async () => {
+		render(GeschichtenListPage, { props: { data: baseData({ canBlogWrite: true }) } });
+
+		await expect
+			.element(page.getByRole('link', { name: /neue geschichte/i }))
+			.toHaveAttribute('href', '/geschichten/new');
+	});
+
+	it('hides the new-geschichte CTA when canBlogWrite is false', async () => {
+		render(GeschichtenListPage, { props: { data: baseData({ canBlogWrite: false }) } });
+
+		await expect
+			.element(page.getByRole('link', { name: /neue geschichte/i }))
+			.not.toBeInTheDocument();
+	});
+
+	it('renders the no-filter empty state when geschichten and personFilters are empty', async () => {
+		render(GeschichtenListPage, { props: { data: baseData() } });
+
+		await expect
+			.element(page.getByText('Es gibt noch keine veröffentlichten Geschichten.'))
+			.toBeVisible();
+	});
+
+	it('renders the for-persons empty state when filters are set but no results', async () => {
+		render(GeschichtenListPage, {
+			props: {
+				data: baseData({ personFilters: [{ id: 'p1', displayName: 'Anna Schmidt' }] })
+			}
+		});
+
+		await expect
+			.element(page.getByText(/Keine Geschichten für Anna Schmidt gefunden/i))
+			.toBeVisible();
+	});
+
+	it('renders the all-pill as pressed when no filters are set', async () => {
+		render(GeschichtenListPage, { props: { data: baseData() } });
+
+		await expect
+			.element(page.getByRole('button', { name: /^alle$/i }))
+			.toHaveAttribute('aria-pressed', 'true');
+	});
+
+	it('marks the all-pill not pressed when person filters are set', async () => {
+		render(GeschichtenListPage, {
+			props: { data: baseData({ personFilters: [{ id: 'p1', displayName: 'Anna' }] }) }
+		});
+
+		await expect
+			.element(page.getByRole('button', { name: /^alle$/i }))
+			.toHaveAttribute('aria-pressed', 'false');
+	});
+
+	it('renders one chip per person filter', async () => {
+		render(GeschichtenListPage, {
+			props: {
+				data: baseData({
+					personFilters: [
+						{ id: 'p1', displayName: 'Anna Schmidt' },
+						{ id: 'p2', displayName: 'Bert Meier' }
+					]
+				})
+			}
+		});
+
+		await expect
+			.element(page.getByRole('button', { name: /Anna Schmidt aus Filter entfernen/i }))
+			.toBeVisible();
+		await expect
+			.element(page.getByRole('button', { name: /Bert Meier aus Filter entfernen/i }))
+			.toBeVisible();
+	});
+
+	it('renders one card per geschichte when populated', async () => {
+		render(GeschichtenListPage, {
+			props: {
+				data: baseData({
+					geschichten: [
+						{
+							id: 'g1',
+							title: 'Reise nach Berlin',
+							body: '<p>Im Jahr 1923...</p>',
+							publishedAt: '2026-04-15T10:00:00Z',
+							author: { firstName: 'Anna', lastName: 'Schmidt', email: 'a@x' }
+						}
+					]
+				})
+			}
+		});
+
+		await expect
+			.element(page.getByRole('heading', { level: 2, name: /reise nach berlin/i }))
+			.toBeVisible();
+	});
+});