test: add e2e tests

frontend/src/routes/login/page.svelte.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import LoginPage from './+page.svelte';
+
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+describe('Login page – rendering', () => {
+	it('renders the page title', async () => {
+		render(LoginPage, {});
+		await expect.element(page.getByText('Familienarchiv')).toBeInTheDocument();
+		await page.screenshot({ path: 'test-results/screenshots/login-default.png' });
+	});
+
+	it('renders the submit button', async () => {
+		render(LoginPage, {});
+		await expect.element(page.getByRole('button', { name: 'Anmelden' })).toBeInTheDocument();
+	});
+
+	it('renders the username input', async () => {
+		render(LoginPage, {});
+		await tick();
+		const input = document.querySelector<HTMLInputElement>('input[name="username"]');
+		expect(input).not.toBeNull();
+	});
+
+	it('renders the password input', async () => {
+		render(LoginPage, {});
+		await tick();
+		const input = document.querySelector<HTMLInputElement>('input[name="password"]');
+		expect(input).not.toBeNull();
+	});
+
+	it('username field is required', async () => {
+		render(LoginPage, {});
+		await tick();
+		const input = document.querySelector<HTMLInputElement>('input[name="username"]');
+		expect(input?.required).toBe(true);
+	});
+
+	it('password field is required', async () => {
+		render(LoginPage, {});
+		await tick();
+		const input = document.querySelector<HTMLInputElement>('input[name="password"]');
+		expect(input?.required).toBe(true);
+	});
+
+	it('password field has type="password"', async () => {
+		render(LoginPage, {});
+		await tick();
+		const input = document.querySelector<HTMLInputElement>('input[name="password"]');
+		expect(input?.type).toBe('password');
+	});
+
+	it('form submits to the login action', async () => {
+		render(LoginPage, {});
+		await tick();
+		const form = document.querySelector<HTMLFormElement>('form');
+		expect(form?.action).toMatch(/\?\/login$/);
+	});
+});
+
+describe('Login page – error state', () => {
+	it('shows no error when form is undefined', async () => {
+		render(LoginPage, {});
+		await tick();
+		expect(document.querySelector('.text-red-600')).toBeNull();
+	});
+
+	it('shows no error when form has no error property', async () => {
+		render(LoginPage, { form: {} });
+		await tick();
+		expect(document.querySelector('.text-red-600')).toBeNull();
+	});
+
+	it('displays the error message from the form action', async () => {
+		render(LoginPage, { form: { error: 'Ungültige Anmeldedaten.' } });
+		await expect.element(page.getByText('Ungültige Anmeldedaten.')).toBeInTheDocument();
+		await page.screenshot({ path: 'test-results/screenshots/login-error.png' });
+	});
+
+	it('applies red styling to the error text', async () => {
+		render(LoginPage, { form: { error: 'Fehler!' } });
+		await tick();
+		expect(document.querySelector('.text-red-600')).not.toBeNull();
+	});
+});