familienarchiv/frontend/src/routes/geschichten/page.svelte.test.ts

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