feat(lesereisen): implement lesereisen

frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+const { default: GeschichteListRow } = await import('./GeschichteListRow.svelte');
+
+afterEach(cleanup);
+
+const baseRow = (overrides = {}) => ({
+	id: 'g1',
+	title: 'Die Reise nach Berlin',
+	body: '<p>Im Jahr 1923...</p>',
+	type: 'STORY' as 'STORY' | 'JOURNEY',
+	status: 'PUBLISHED' as 'PUBLISHED' | 'DRAFT',
+	author: { firstName: 'Anna', lastName: 'Schmidt' },
+	publishedAt: '2026-04-15T10:00:00Z',
+	...overrides
+});
+
+describe('GeschichteListRow', () => {
+	it('renders the title', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow() } });
+		await expect
+			.element(page.getByRole('heading', { level: 2 }))
+			.toHaveTextContent('Die Reise nach Berlin');
+	});
+
+	it('row text sizes suit the full-width list: title text-lg, excerpt/meta text-sm (#802)', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow() } });
+
+		const title = document.querySelector('h2');
+		expect(title!.className).toContain('text-lg');
+		expect(title!.className).not.toContain('text-[15px]');
+
+		const excerpt = document.querySelector('p');
+		expect(excerpt!.className).toContain('text-sm');
+		expect(excerpt!.className).not.toContain('text-xs');
+
+		const meta = Array.from(document.querySelectorAll('span')).filter((s) =>
+			s.textContent?.includes('Anna Schmidt')
+		);
+		expect(meta.length).toBeGreaterThan(0);
+		for (const span of meta) {
+			expect(span.className).toContain('text-sm');
+		}
+	});
+
+	it('desktop meta column is wide enough for text-sm names (w-40, #802)', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow() } });
+
+		const metaColumn = document.querySelector('[class*="border-r"]');
+		expect(metaColumn).not.toBeNull();
+		expect(metaColumn!.className).toContain('w-40');
+		expect(metaColumn!.className).not.toContain('w-28');
+	});
+
+	it('shows no badge for STORY type', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } });
+		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
+	});
+
+	it('shows no badge when type is undefined', async () => {
+		render(GeschichteListRow, {
+			props: { geschichte: baseRow({ type: undefined as unknown as 'STORY' | 'JOURNEY' }) }
+		});
+		expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
+	});
+
+	it('shows REISE badge for JOURNEY type', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
+		const badge = document.querySelector('[data-testid="journey-badge"]');
+		expect(badge).not.toBeNull();
+		expect(badge?.textContent?.trim()).toBe('REISE');
+	});
+
+	it('badge is a plain <span>, not a nested interactive element', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
+		const badge = document.querySelector('[data-testid="journey-badge"]');
+		expect(badge?.tagName.toLowerCase()).toBe('span');
+	});
+
+	it('badge uses the 12px label size — text-xs is the visible-text floor', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
+		const badge = document.querySelector('[data-testid="journey-badge"]');
+		expect(badge!.className).toContain('text-xs');
+		// 10px was below the house floor for the 60+ audience (round-3 review)
+		expect(badge!.className).not.toContain('text-[10px]');
+	});
+
+	it('renders author name in meta line', async () => {
+		render(GeschichteListRow, { props: { geschichte: baseRow() } });
+		expect(document.body.textContent).toContain('Anna Schmidt');
+	});
+});