From b7bc0e6eed2355200872699e7cf5701b1aad6ad1 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 10 May 2026 00:31:28 +0200
Subject: [PATCH] test: cover UserProfileSection and AccountSection branches

UserProfileSection: four input fields render, prop hydration including
German date conversion, hidden ISO birthDate input, contact textarea
hydration, empty defaults.

AccountSection: heading, email input attributes, password input
attributes.

9 tests across two account-form helpers.

Refs #496.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../user/UserProfileSection.svelte.test.ts    | 65 +++++++++++++++++++
 .../users/new/AccountSection.svelte.test.ts   | 31 +++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 frontend/src/lib/user/UserProfileSection.svelte.test.ts
 create mode 100644 frontend/src/routes/admin/users/new/AccountSection.svelte.test.ts

diff --git a/frontend/src/lib/user/UserProfileSection.svelte.test.ts b/frontend/src/lib/user/UserProfileSection.svelte.test.ts
new file mode 100644
index 00000000..1154e093
--- /dev/null
+++ b/frontend/src/lib/user/UserProfileSection.svelte.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import UserProfileSection from './UserProfileSection.svelte';
+
+afterEach(cleanup);
+
+describe('UserProfileSection', () => {
+	it('renders all four input fields by default', async () => {
+		render(UserProfileSection, { props: {} });
+
+		expect(document.querySelector('input[name="firstName"]')).not.toBeNull();
+		expect(document.querySelector('input[name="lastName"]')).not.toBeNull();
+		expect(document.querySelector('input[name="email"]')).not.toBeNull();
+		expect(document.querySelector('input[name="birthDate"]')).not.toBeNull();
+	});
+
+	it('hydrates inputs from props when provided', async () => {
+		render(UserProfileSection, {
+			props: {
+				firstName: 'Anna',
+				lastName: 'Schmidt',
+				email: 'anna@example.com',
+				contact: 'Telefon 123'
+			}
+		});
+
+		const first = document.querySelector('input[name="firstName"]') as HTMLInputElement;
+		const last = document.querySelector('input[name="lastName"]') as HTMLInputElement;
+		const email = document.querySelector('input[name="email"]') as HTMLInputElement;
+		expect(first.value).toBe('Anna');
+		expect(last.value).toBe('Schmidt');
+		expect(email.value).toBe('anna@example.com');
+	});
+
+	it('converts the birthDate ISO value to German display format', async () => {
+		render(UserProfileSection, { props: { birthDate: '1923-04-15' } });
+
+		const dateInputs = document.querySelectorAll('input[type="text"][placeholder*="TT"]');
+		expect((dateInputs[0] as HTMLInputElement).value).toBe('15.04.1923');
+	});
+
+	it('renders the hidden ISO birthDate input', async () => {
+		render(UserProfileSection, { props: { birthDate: '1923-04-15' } });
+
+		const hidden = document.querySelector('input[name="birthDate"]') as HTMLInputElement;
+		expect(hidden.type).toBe('hidden');
+		expect(hidden.value).toBe('1923-04-15');
+	});
+
+	it('hydrates the contact textarea from prop', async () => {
+		render(UserProfileSection, { props: { contact: 'Telefon: 030-12345' } });
+
+		const textarea = document.querySelector('textarea[name="contact"]') as HTMLTextAreaElement;
+		expect(textarea.value).toBe('Telefon: 030-12345');
+	});
+
+	it('renders empty values when no props are supplied', async () => {
+		render(UserProfileSection, { props: {} });
+
+		const first = document.querySelector('input[name="firstName"]') as HTMLInputElement;
+		const email = document.querySelector('input[name="email"]') as HTMLInputElement;
+		expect(first.value).toBe('');
+		expect(email.value).toBe('');
+	});
+});
diff --git a/frontend/src/routes/admin/users/new/AccountSection.svelte.test.ts b/frontend/src/routes/admin/users/new/AccountSection.svelte.test.ts
new file mode 100644
index 00000000..c731fe72
--- /dev/null
+++ b/frontend/src/routes/admin/users/new/AccountSection.svelte.test.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AccountSection from './AccountSection.svelte';
+
+afterEach(cleanup);
+
+describe('AccountSection', () => {
+	it('renders the section heading', async () => {
+		render(AccountSection, { props: {} });
+
+		await expect.element(page.getByRole('heading', { name: /benutzerverwaltung/i })).toBeVisible();
+	});
+
+	it('renders the email input as type=email and required', async () => {
+		render(AccountSection, { props: {} });
+
+		const email = document.querySelector('input[name="email"]') as HTMLInputElement;
+		expect(email.type).toBe('email');
+		expect(email.required).toBe(true);
+		expect(email.autocomplete).toBe('email');
+	});
+
+	it('renders the password input as type=password and required', async () => {
+		render(AccountSection, { props: {} });
+
+		const pwd = document.querySelector('input[name="password"]') as HTMLInputElement;
+		expect(pwd.type).toBe('password');
+		expect(pwd.required).toBe(true);
+	});
+});