familienarchiv/frontend/src/routes/admin/users/[id]/page.svelte.spec.ts

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import Page from './+page.svelte';

vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));

import { beforeNavigate, goto } from '$app/navigation';

const groups = [
	{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
	{ id: 'g2', name: 'Admins', permissions: ['ADMIN'] }
];

const makeUser = (overrides = {}) => ({
	id: 'u1',
	username: 'max',
	firstName: 'Max',
	lastName: 'Mustermann',
	email: 'max@example.com',
	birthDate: '1985-03-22',
	contact: 'Tel: 0123',
	enabled: true,
	groups: [{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] }],
	createdAt: '2024-01-01T00:00:00Z',
	...overrides
});

const baseData = {
	user: undefined,
	canWrite: true,
	canAnnotate: false,
	editUser: makeUser(),
	groups
};

afterEach(cleanup);

// ─── Rendering ────────────────────────────────────────────────────────────────

describe('Admin edit user page – rendering', () => {
	it('renders the heading with username', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText(/Benutzer bearbeiten: max/i)).toBeInTheDocument();
	});

	it('pre-fills first name from editUser data', async () => {
		render(Page, { data: baseData, form: null });
		const input = document.querySelector<HTMLInputElement>('input[name="firstName"]');
		expect(input?.value).toBe('Max');
	});

	it('pre-fills last name from editUser data', async () => {
		render(Page, { data: baseData, form: null });
		const input = document.querySelector<HTMLInputElement>('input[name="lastName"]');
		expect(input?.value).toBe('Mustermann');
	});

	it('pre-fills email from editUser data', async () => {
		render(Page, { data: baseData, form: null });
		const input = document.querySelector<HTMLInputElement>('input[name="email"]');
		expect(input?.value).toBe('max@example.com');
	});

	it('pre-fills birth date in German format (dd.mm.yyyy)', async () => {
		render(Page, { data: baseData, form: null });
		const input = document.querySelector<HTMLInputElement>('input[placeholder="TT.MM.JJJJ"]');
		expect(input?.value).toBe('22.03.1985');
	});

	it('pre-fills contact field', async () => {
		render(Page, { data: baseData, form: null });
		const textarea = document.querySelector<HTMLTextAreaElement>('textarea[name="contact"]');
		expect(textarea?.value).toBe('Tel: 0123');
	});

	it('renders group checkboxes', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
		await expect.element(page.getByText('Admins')).toBeInTheDocument();
	});

	it('pre-selects the groups the user already belongs to', async () => {
		render(Page, { data: baseData, form: null });
		const checkbox = document.querySelector<HTMLInputElement>(
			'input[type="checkbox"][name="groupIds"][value="g1"]'
		);
		expect(checkbox?.checked).toBe(true);
	});

	it('does not pre-select groups the user does not belong to', async () => {
		render(Page, { data: baseData, form: null });
		const checkbox = document.querySelector<HTMLInputElement>(
			'input[type="checkbox"][name="groupIds"][value="g2"]'
		);
		expect(checkbox?.checked).toBe(false);
	});

	it('includes pre-selected group ids in FormData at submit time (guards against groupIds being empty)', async () => {
		render(Page, { data: baseData, form: null });
		const form = document.querySelector<HTMLFormElement>('form#edit-user-form')!;
		const formData = new FormData(form);
		expect(formData.getAll('groupIds')).toContain('g1');
		expect(formData.getAll('groupIds')).not.toContain('g2');
	});

	it('password fields are empty by default', async () => {
		render(Page, { data: baseData, form: null });
		const passwordInputs = document.querySelectorAll<HTMLInputElement>('input[type="password"]');
		passwordInputs.forEach((input) => {
			expect(input.value).toBe('');
		});
	});

	it('cancel link points to /admin/users', async () => {
		render(Page, { data: baseData, form: null });
		await expect
			.element(page.getByRole('link', { name: /Abbrechen/i }))
			.toHaveAttribute('href', '/admin/users');
	});

	it('renders the save button', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
	});
});

// ─── Feedback messages ────────────────────────────────────────────────────────

describe('Admin edit user page – feedback', () => {
	it('shows success message when form.success is true', async () => {
		render(Page, { data: baseData, form: { success: true } });
		await expect.element(page.getByText(/Änderungen gespeichert/i)).toBeInTheDocument();
	});

	it('shows error message when form.error is set', async () => {
		render(Page, { data: baseData, form: { error: 'Ungültige Eingabe.' } });
		await expect.element(page.getByText('Ungültige Eingabe.')).toBeInTheDocument();
	});

	it('does not show success message when form is null', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
	});
});

// ─── Unsaved-changes guard ────────────────────────────────────────────────────

describe('Admin edit user page – unsaved-changes guard', () => {
	beforeEach(() => vi.clearAllMocks());

	it('does not show unsaved warning initially', async () => {
		render(Page, { data: baseData, form: null });
		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
	});

	it('cancels navigation and shows warning when form is dirty', async () => {
		render(Page, { data: baseData, form: null });
		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];

		document
			.querySelector<HTMLInputElement>('input[name="firstName"]')!
			.dispatchEvent(new InputEvent('input', { bubbles: true }));

		const cancel = vi.fn();
		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });

		expect(cancel).toHaveBeenCalled();
		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();
	});

	it('does not cancel navigation when form is clean', async () => {
		render(Page, { data: baseData, form: null });
		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];

		const cancel = vi.fn();
		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });

		expect(cancel).not.toHaveBeenCalled();
	});

	it('discard button calls goto with the target URL', async () => {
		render(Page, { data: baseData, form: null });
		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];

		document
			.querySelector<HTMLInputElement>('input[name="firstName"]')!
			.dispatchEvent(new InputEvent('input', { bubbles: true }));

		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });

		await page.getByRole('button', { name: /verwerfen/i }).click();

		expect(vi.mocked(goto)).toHaveBeenCalledWith('http://localhost/admin/users/u2');
	});

	it('clears dirty state when form saves successfully', async () => {
		const { rerender } = render(Page, { data: baseData, form: null });
		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];

		document
			.querySelector<HTMLInputElement>('input[name="firstName"]')!
			.dispatchEvent(new InputEvent('input', { bubbles: true }));

		callback({ cancel: vi.fn(), to: { url: new URL('http://localhost/admin/users/u2') } });
		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).toBeInTheDocument();

		await rerender({ data: baseData, form: { success: true } });

		const cancel = vi.fn();
		callback({ cancel, to: { url: new URL('http://localhost/admin/users/u2') } });
		expect(cancel).not.toHaveBeenCalled();
	});
});