fix(person): block submit while a life-date input is partial
A partial date (e.g. "14.03.") left the hidden ISO input empty, so saving the edit form silently cleared a stored date. PersonLifeDateField now delegates to the shared DateInput primitive (inline format error, calendar validation) and sets a custom validity while the error is present, so the browser blocks native submission for both person forms. A full clear stays submittable - that is the intentional clear path. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
64
frontend/src/lib/person/PersonLifeDateField.svelte.spec.ts
Normal file
64
frontend/src/lib/person/PersonLifeDateField.svelte.spec.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page, userEvent } from 'vitest/browser';
|
||||
import PersonLifeDateField from './PersonLifeDateField.svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const baseProps = {
|
||||
name: 'birthDate',
|
||||
legend: 'Geburtsdatum',
|
||||
precisionLabel: 'Genauigkeit'
|
||||
};
|
||||
|
||||
const visibleInput = () => page.getByLabelText('Geburtsdatum', { exact: true });
|
||||
const hiddenIso = () => document.querySelector<HTMLInputElement>('input[name="birthDate"]');
|
||||
|
||||
describe('PersonLifeDateField', () => {
|
||||
it('shows the format error and flags the input invalid for a partial date', async () => {
|
||||
render(PersonLifeDateField, { props: baseProps });
|
||||
|
||||
await userEvent.fill(visibleInput(), '14.03.');
|
||||
|
||||
await expect.element(page.getByText(m.form_date_error())).toBeVisible();
|
||||
const input = (await visibleInput().element()) as HTMLInputElement;
|
||||
expect(input.checkValidity()).toBe(false);
|
||||
expect(hiddenIso()?.value).toBe('');
|
||||
});
|
||||
|
||||
it('clears error and custom validity when the input is fully emptied', async () => {
|
||||
render(PersonLifeDateField, { props: { ...baseProps, initialIso: '1899-03-14' } });
|
||||
|
||||
await userEvent.fill(visibleInput(), '');
|
||||
|
||||
await expect.element(page.getByText(m.form_date_error())).not.toBeInTheDocument();
|
||||
const input = (await visibleInput().element()) as HTMLInputElement;
|
||||
expect(input.checkValidity()).toBe(true);
|
||||
// Empty hidden ISO is the intentional clear path — the server action omits the pair.
|
||||
expect(hiddenIso()?.value).toBe('');
|
||||
});
|
||||
|
||||
it('keeps a stored date submittable when untouched', async () => {
|
||||
render(PersonLifeDateField, {
|
||||
props: { ...baseProps, initialIso: '1899-03-14', initialPrecision: 'DAY' }
|
||||
});
|
||||
|
||||
await expect.element(visibleInput()).toHaveValue('14.03.1899');
|
||||
const input = (await visibleInput().element()) as HTMLInputElement;
|
||||
expect(input.checkValidity()).toBe(true);
|
||||
expect(hiddenIso()?.value).toBe('1899-03-14');
|
||||
});
|
||||
|
||||
it('becomes valid again once the partial date is completed', async () => {
|
||||
render(PersonLifeDateField, { props: baseProps });
|
||||
|
||||
await userEvent.fill(visibleInput(), '14.03.');
|
||||
await userEvent.fill(visibleInput(), '14.03.1899');
|
||||
|
||||
await expect.element(page.getByText(m.form_date_error())).not.toBeInTheDocument();
|
||||
const input = (await visibleInput().element()) as HTMLInputElement;
|
||||
expect(input.checkValidity()).toBe(true);
|
||||
expect(hiddenIso()?.value).toBe('1899-03-14');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user