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>
This commit is contained in:
65
frontend/src/lib/user/UserProfileSection.svelte.test.ts
Normal file
65
frontend/src/lib/user/UserProfileSection.svelte.test.ts
Normal file
@@ -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('');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user