familienarchiv/frontend/src/routes/DocumentList.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: DocumentList } = await import('./DocumentList.svelte');

afterEach(cleanup);

const sender = { id: 's1', displayName: 'Anna Schmidt' };
const receiver = { id: 'r1', displayName: 'Bert Meier' };

const makeItem = (overrides: Record<string, unknown> = {}) => ({
	document: {
		id: 'd1',
		title: 'Brief 1923',
		originalFilename: 'b.pdf',
		documentDate: '1923-04-15',
		sender,
		receivers: [receiver],
		tags: [],
		thumbnailUrl: null,
		contentType: 'application/pdf',
		summary: null,
		archiveBox: null,
		archiveFolder: null,
		location: null,
		...overrides
	},
	matchData: null,
	completionPercentage: 0,
	contributors: []
});

describe('DocumentList', () => {
	it('renders the empty state when items is empty', async () => {
		render(DocumentList, { props: { items: [], canWrite: false } });

		await expect
			.element(page.getByRole('heading', { name: /keine dokumente gefunden/i }))
			.toBeVisible();
	});

	it('renders the term-specific empty message when q is set', async () => {
		render(DocumentList, { props: { items: [], canWrite: false, q: 'Helene' } });

		await expect.element(page.getByText(/Keine Dokumente für "Helene"/i)).toBeVisible();
	});

	it('renders the error banner when error prop is set', async () => {
		render(DocumentList, {
			props: { items: [], canWrite: false, error: 'Server unreachable' }
		});

		await expect.element(page.getByText('Server unreachable')).toBeVisible();
	});

	it('renders one group card per year by default', async () => {
		render(DocumentList, {
			props: {
				items: [
					makeItem({ id: 'd1', documentDate: '1923-04-15' }),
					makeItem({ id: 'd2', documentDate: '1925-06-20' })
				],
				canWrite: false
			}
		});

		const groups = document.querySelectorAll('[data-testid="group-card"]');
		expect(groups.length).toBe(2);
	});

	it('groups by sender when sort=SENDER', async () => {
		render(DocumentList, {
			props: {
				items: [
					makeItem({ id: 'd1', sender: { id: 's1', displayName: 'Anna Schmidt' } }),
					makeItem({ id: 'd2', sender: { id: 's2', displayName: 'Bert Meier' } })
				],
				canWrite: false,
				sort: 'SENDER' as const
			}
		});

		const groupHeaders = document.querySelectorAll('[data-testid="group-header"]');
		expect(groupHeaders.length).toBe(2);
	});

	it('uses "Undatiert" group label for items without documentDate', async () => {
		render(DocumentList, {
			props: { items: [makeItem({ documentDate: null })], canWrite: false }
		});

		await expect.element(page.getByText('Undatiert')).toBeVisible();
	});

	it('uses "Unbekannter Absender" when sort=SENDER and no sender', async () => {
		render(DocumentList, {
			props: {
				items: [makeItem({ sender: null })],
				canWrite: false,
				sort: 'SENDER' as const
			}
		});

		await expect.element(page.getByText('Unbekannter Absender')).toBeVisible();
	});

	it('renders the result count when total is provided and > 0', async () => {
		render(DocumentList, {
			props: { items: [makeItem()], canWrite: false, total: 42 }
		});

		await expect.element(page.getByText('42 Dokumente')).toBeVisible();
	});
});