familienarchiv/frontend/e2e/documents.spec.ts

import { test, expect } from '@playwright/test';

/**
 * Document management E2E tests.
 * Assumes auth setup has run (storageState is applied by playwright.config.ts).
 * Assumes the backend has at least one document in the database.
 */
test.describe('Document list', () => {
	test.beforeEach(async ({ page }) => {
		await page.goto('/');
		// Wait for SvelteKit hydration to complete so onclick/oninput handlers are active.
		await page.waitForSelector('[data-hydrated]');
	});

	test('renders the search bar and document list', async ({ page }) => {
		await expect(page.getByPlaceholder('Suche in Titel, Inhalt, Ort...')).toBeVisible();
		await expect(page.getByRole('link', { name: /Neues Dokument/i })).toBeVisible();
		await page.screenshot({ path: 'test-results/e2e/documents-home.png' });
	});

	test('navigation bar shows active state for Dokumente', async ({ page }) => {
		const navLink = page.getByRole('navigation').getByRole('link', { name: 'Dokumente' });
		await expect(navLink).toHaveClass(/text-brand-navy/);
	});

	test('text search filters the document list', async ({ page }) => {
		// Navigate directly with the query param — tests that search results are filtered
		// correctly without depending on the debounced oninput → goto chain in CI.
		await page.goto('/?q=zzz_unlikely_to_match_anything');
		await expect(page.getByText('Keine Dokumente gefunden')).toBeVisible();
		await page.screenshot({ path: 'test-results/e2e/documents-search-no-results.png' });
	});

	test('clearing the search returns all documents', async ({ page }) => {
		// Navigate with an active query first, then click the reset link.
		await page.goto('/?q=xyz_unlikely');
		await page.getByTitle('Filter zurücksetzen').click();
		await page.waitForURL('/');
		await expect(page).toHaveURL('/');
		await page.screenshot({ path: 'test-results/e2e/documents-reset-search.png' });
	});

	test('advanced filters panel opens and closes', async ({ page }) => {
		const btn = page.getByRole('button', { name: 'Filter', exact: true });
		await btn.click();
		await expect(page.getByLabel('Von')).toBeVisible();
		await expect(page.getByLabel('Bis')).toBeVisible();
		await page.screenshot({ path: 'test-results/e2e/documents-filters-open.png' });
		await btn.click();
		await expect(page.getByLabel('Von')).not.toBeVisible();
	});

	test('date range filter triggers a new search', async ({ page }) => {
		await page.getByRole('button', { name: 'Filter', exact: true }).click();
		await page.getByLabel('Von').fill('2000-01-01');
		await page.waitForURL(/from=2000-01-01/);
		await expect(page).toHaveURL(/from=2000-01-01/);
		await page.screenshot({ path: 'test-results/e2e/documents-date-filter.png' });
	});
});

test.describe('Document detail', () => {
	test('clicking a document opens the detail page', async ({ page }) => {
		await page.goto('/');
		// Click the first document link in the list
		const firstDoc = page.locator('ul li a').first();
		const href = await firstDoc.getAttribute('href');
		await firstDoc.click();
		await expect(page).toHaveURL(href!);
		await page.screenshot({ path: 'test-results/e2e/document-detail.png' });
	});
});

test.describe('New document', () => {
	test('renders the upload form', async ({ page }) => {
		await page.goto('/documents/new');
		await expect(page.getByRole('heading', { name: /Neues Dokument/i })).toBeVisible();
		await expect(page.getByLabel('Titel')).toBeVisible();
		await page.screenshot({ path: 'test-results/e2e/document-new.png' });
	});
});

test.describe('Document edit', () => {
	test('renders the edit form with pre-filled data', async ({ page }) => {
		// Navigate to home, find first document, go to its edit page
		await page.goto('/');
		const firstDocLink = page.locator('ul li a').first();
		const href = await firstDocLink.getAttribute('href');
		await page.goto(`${href}/edit`);
		await expect(page.getByRole('heading', { name: /Bearbeiten/i })).toBeVisible();
		await expect(page.getByLabel('Titel')).toBeVisible();
		await page.screenshot({ path: 'test-results/e2e/document-edit.png' });
	});

	test('shows a validation error for an invalid date format', async ({ page }) => {
		await page.goto('/');
		const firstDocLink = page.locator('ul li a').first();
		const href = await firstDocLink.getAttribute('href');
		await page.goto(`${href}/edit`);
		// Wait for hydration so oninput={handleDateInput} is registered.
		await page.waitForSelector('[data-hydrated]');
		const dateInput = page.getByLabel('Datum');
		// Type partial digits: '99' → dateDisplay='99', dateIso='' → dateInvalid=true
		await dateInput.fill('');
		await dateInput.pressSequentially('99');
		await expect(page.getByText(/TT\.MM\.JJJJ/i)).toBeVisible();
		await page.screenshot({ path: 'test-results/e2e/document-edit-date-error.png' });
	});
});