From fb66ce62848361a853785c76fba86d27df24c561 Mon Sep 17 00:00:00 2001 From: Marcel Date: Sat, 9 May 2026 22:38:02 +0200 Subject: [PATCH] test: cover register and admin/users/new page branches register page (350 lines): hero render when no codeError, NO_INVITE_CODE vs other-codeError card branches, form hidden when codeError set, back-to-login link, form section rendering, prefill hydration of firstName/lastName/email, prefill-hint visibility branch, hidden code input with code-null fallback. admin/users/new: heading, three card sections, group checkboxes rendered, form-error banner branch, cancel link, submit button. 17 tests across two pages. Refs #496. Co-Authored-By: Claude Sonnet 4.6 --- .../admin/users/new/page.svelte.test.ts | 74 +++++++++++ .../src/routes/register/page.svelte.test.ts | 121 ++++++++++++++++++ 2 files changed, 195 insertions(+) create mode 100644 frontend/src/routes/admin/users/new/page.svelte.test.ts create mode 100644 frontend/src/routes/register/page.svelte.test.ts diff --git a/frontend/src/routes/admin/users/new/page.svelte.test.ts b/frontend/src/routes/admin/users/new/page.svelte.test.ts new file mode 100644 index 00000000..e403aefb --- /dev/null +++ b/frontend/src/routes/admin/users/new/page.svelte.test.ts @@ -0,0 +1,74 @@ +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: AdminUserNewPage } = await import('./+page.svelte'); + +afterEach(cleanup); + +const baseData = (overrides: Record = {}) => ({ + groups: [ + { id: 'g1', name: 'Familie' }, + { id: 'g2', name: 'Admins' } + ], + ...overrides +}); + +describe('admin/users/new page', () => { + it('renders the new-user heading', async () => { + render(AdminUserNewPage, { props: { data: baseData(), form: undefined } }); + + await expect + .element(page.getByRole('heading', { name: /neuen benutzer anlegen/i })) + .toBeVisible(); + }); + + it('renders the three card sections', async () => { + render(AdminUserNewPage, { props: { data: baseData(), form: undefined } }); + + await expect.element(page.getByRole('heading', { name: /persönliche daten/i })).toBeVisible(); + await expect.element(page.getByRole('heading', { name: /^gruppen$/i })).toBeVisible(); + }); + + it('renders all available groups in the picker', async () => { + render(AdminUserNewPage, { props: { data: baseData(), form: undefined } }); + + const checkboxes = document.querySelectorAll('input[name="groupIds"]'); + expect(checkboxes.length).toBe(2); + }); + + it('shows the form-error banner when form.error is set', async () => { + render(AdminUserNewPage, { + props: { data: baseData(), form: { error: 'E-Mail bereits vergeben' } } + }); + + await expect.element(page.getByText('E-Mail bereits vergeben')).toBeVisible(); + }); + + it('renders cancel link to /admin/users', async () => { + render(AdminUserNewPage, { props: { data: baseData(), form: undefined } }); + + const cancel = document.querySelectorAll('a[href="/admin/users"]'); + expect(cancel.length).toBeGreaterThan(0); + }); + + it('renders the create submit button', async () => { + render(AdminUserNewPage, { props: { data: baseData(), form: undefined } }); + + await expect.element(page.getByRole('button', { name: /erstellen/i })).toBeVisible(); + }); +}); diff --git a/frontend/src/routes/register/page.svelte.test.ts b/frontend/src/routes/register/page.svelte.test.ts new file mode 100644 index 00000000..db81aa1d --- /dev/null +++ b/frontend/src/routes/register/page.svelte.test.ts @@ -0,0 +1,121 @@ +import { describe, it, expect, afterEach } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import RegisterPage from './+page.svelte'; + +afterEach(cleanup); + +const baseData = (overrides: Record = {}) => ({ + code: 'invite-token', + prefill: null as { firstName?: string; lastName?: string; email?: string } | null, + codeError: null as string | null, + ...overrides +}); + +describe('register page', () => { + it('renders the hero headline when there is no codeError', async () => { + render(RegisterPage, { props: { data: baseData(), form: undefined } }); + + await expect + .element(page.getByRole('heading', { name: /schön, dass du da bist/i })) + .toBeVisible(); + }); + + it('renders the NO_INVITE_CODE error card with invite-only heading', async () => { + render(RegisterPage, { + props: { data: baseData({ codeError: 'NO_INVITE_CODE' }), form: undefined } + }); + + await expect.element(page.getByRole('heading', { name: /nur auf einladung/i })).toBeVisible(); + }); + + it('renders the invalid-code error card for any other codeError value', async () => { + render(RegisterPage, { + props: { data: baseData({ codeError: 'EXPIRED' }), form: undefined } + }); + + await expect + .element(page.getByRole('heading', { name: /ungültiger einladungslink/i })) + .toBeVisible(); + }); + + it('hides the form when there is a codeError', async () => { + render(RegisterPage, { + props: { data: baseData({ codeError: 'NO_INVITE_CODE' }), form: undefined } + }); + + await expect.element(page.getByLabelText(/^vorname$/i)).not.toBeInTheDocument(); + }); + + it('shows the back-to-login link in the codeError card', async () => { + render(RegisterPage, { + props: { data: baseData({ codeError: 'NO_INVITE_CODE' }), form: undefined } + }); + + await expect + .element(page.getByRole('link', { name: /zurück zum login/i })) + .toHaveAttribute('href', '/login'); + }); + + it('renders the form sections when there is no codeError', async () => { + render(RegisterPage, { props: { data: baseData(), form: undefined } }); + + await expect.element(page.getByText('Über dich')).toBeVisible(); + await expect.element(page.getByLabelText(/vorname/i)).toBeVisible(); + await expect.element(page.getByLabelText(/^e-mail-adresse$/i)).toBeVisible(); + }); + + it('hydrates the form fields from prefill', async () => { + render(RegisterPage, { + props: { + data: baseData({ + prefill: { firstName: 'Anna', lastName: 'Schmidt', email: 'anna@example.com' } + }), + form: undefined + } + }); + + const firstName = (await page.getByLabelText(/vorname/i).element()) as HTMLInputElement; + const lastName = (await page.getByLabelText(/nachname/i).element()) as HTMLInputElement; + const email = (await page.getByLabelText(/^e-mail-adresse$/i).element()) as HTMLInputElement; + expect(firstName.value).toBe('Anna'); + expect(lastName.value).toBe('Schmidt'); + expect(email.value).toBe('anna@example.com'); + }); + + it('shows the prefill hint when an email is prefilled', async () => { + render(RegisterPage, { + props: { + data: baseData({ prefill: { email: 'anna@example.com' } }), + form: undefined + } + }); + + await expect + .element(page.getByText('Von deiner Einladung übernommen – du kannst es ändern')) + .toBeVisible(); + }); + + it('omits the prefill hint when no email is prefilled', async () => { + render(RegisterPage, { props: { data: baseData(), form: undefined } }); + + await expect + .element(page.getByText('Von deiner Einladung übernommen – du kannst es ändern')) + .not.toBeInTheDocument(); + }); + + it('puts the invite code in a hidden input', async () => { + render(RegisterPage, { props: { data: baseData({ code: 'tok-99' }), form: undefined } }); + + const codeInput = document.querySelector('input[name="code"]') as HTMLInputElement; + expect(codeInput.type).toBe('hidden'); + expect(codeInput.value).toBe('tok-99'); + }); + + it('renders an empty hidden code input when data.code is null', async () => { + render(RegisterPage, { props: { data: baseData({ code: null }), form: undefined } }); + + const codeInput = document.querySelector('input[name="code"]') as HTMLInputElement; + expect(codeInput.value).toBe(''); + }); +});