marcel/familienarchiv
1
0
Fork 0
Code Issues 102 Pull Requests Actions Packages Projects Releases Wiki Activity

test(person): rewrite PersonTypeahead test with behavioral assertions

Browse Source 
Replaces 3 setTimeout sleeps with vi.waitFor on listbox / aria-expanded
state and converts 2 .not.toThrow smoke tests + 1 vacuous expect(true)
into assertions about the input remaining usable after fetch errors
and Escape on a closed dropdown being a no-op.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-11 17:19:04 +02:00
parent 37b9d25f65
commit 9ea1d6f5e1
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/lib/person/PersonTypeahead.svelte.test.ts
View File

@@ -106,9 +106,9 @@ describe('PersonTypeahead', () => {
const input = document.querySelector('input#s-search') as HTMLInputElement; const input = document.querySelector('input#s-search') as HTMLInputElement;
input.dispatchEvent(new Event('focus', { bubbles: true })); input.dispatchEvent(new Event('focus', { bubbles: true }));
await new Promise((r) => setTimeout(r, 100)); await vi.waitFor(() => {
const listbox = document.querySelector('[role="listbox"]'); expect(document.querySelector('[role="listbox"]')).not.toBeNull();
expect(listbox).not.toBeNull(); });
}); });
it('updates aria-expanded when the dropdown opens', async () => { it('updates aria-expanded when the dropdown opens', async () => {
@@ -120,30 +120,35 @@ describe('PersonTypeahead', () => {
expect(input.getAttribute('aria-expanded')).toBe('false'); expect(input.getAttribute('aria-expanded')).toBe('false');
input.dispatchEvent(new Event('focus', { bubbles: true })); input.dispatchEvent(new Event('focus', { bubbles: true }));
await new Promise((r) => setTimeout(r, 100)); await vi.waitFor(() => {
expect(input.getAttribute('aria-expanded')).toBe('true'); expect(input.getAttribute('aria-expanded')).toBe('true');
});
}); });
it('opens the dropdown via Escape key without throwing', async () => { it('Escape key on a closed dropdown is a no-op (no listbox appears)', async () => {
render(PersonTypeahead, { props: { name: 's', label: 'Absender' } }); render(PersonTypeahead, { props: { name: 's', label: 'Absender' } });
const input = document.querySelector('input#s-search') as HTMLInputElement; const input = document.querySelector('input#s-search') as HTMLInputElement;
expect(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
).not.toThrow(); expect(document.querySelector('[role="listbox"]')).toBeNull();
}); });
it('handles fetch failure gracefully on focus', async () => { it('keeps the input usable when fetch rejects on focus (no error UI, no crash)', async () => {
fetchSpy.mockRejectedValueOnce(new Error('boom')); fetchSpy.mockRejectedValueOnce(new Error('boom'));
render(PersonTypeahead, { render(PersonTypeahead, {
props: { name: 's', label: 'Absender', restrictToCorrespondentsOf: 'parent-id' } props: { name: 's', label: 'Absender', restrictToCorrespondentsOf: 'parent-id' }
}); });
const input = document.querySelector('input#s-search') as HTMLInputElement; const input = document.querySelector('input#s-search') as HTMLInputElement;
expect(() => input.dispatchEvent(new Event('focus', { bubbles: true }))).not.toThrow(); input.dispatchEvent(new Event('focus', { bubbles: true }));
// Graceful failure: no listbox surfaces but the input stays mounted and interactive.
await vi.waitFor(() => expect(fetchSpy).toHaveBeenCalled());
expect(document.querySelector('input#s-search')).not.toBeNull();
}); });
it('handles fetch returning non-ok response on focus', async () => { it('keeps the input usable when fetch returns a non-OK response on focus', async () => {
fetchSpy.mockResolvedValueOnce(new Response('error', { status: 500 })); fetchSpy.mockResolvedValueOnce(new Response('error', { status: 500 }));
render(PersonTypeahead, { render(PersonTypeahead, {
props: { name: 's', label: 'Absender', restrictToCorrespondentsOf: 'parent-id' } props: { name: 's', label: 'Absender', restrictToCorrespondentsOf: 'parent-id' }
@@ -151,10 +156,9 @@ describe('PersonTypeahead', () => {
const input = document.querySelector('input#s-search') as HTMLInputElement; const input = document.querySelector('input#s-search') as HTMLInputElement;
input.dispatchEvent(new Event('focus', { bubbles: true })); input.dispatchEvent(new Event('focus', { bubbles: true }));
await new Promise((r) => setTimeout(r, 50));
// Should still open the listbox (with no results) await vi.waitFor(() => expect(fetchSpy).toHaveBeenCalled());
// no throw is the assertion here expect(document.querySelector('input#s-search')).not.toBeNull();
expect(true).toBe(true);
}); });
it('renders the FieldLabelBadge when badge is provided', async () => { it('renders the FieldLabelBadge when badge is provided', async () => {
@@ -162,9 +166,7 @@ describe('PersonTypeahead', () => {
props: { name: 's', label: 'Absender', badge: 'replace' } props: { name: 's', label: 'Absender', badge: 'replace' }
}); });
// FieldLabelBadge renders a small badge element
const label = document.querySelector('label[for="s-search"]'); const label = document.querySelector('label[for="s-search"]');
// The badge variant is passed; check the label has the additional badge child
expect(label?.children.length).toBeGreaterThan(0); expect(label?.children.length).toBeGreaterThan(0);
}); });
@@ -174,7 +176,6 @@ describe('PersonTypeahead', () => {
}); });
const label = document.querySelector('label[for="s-search"]'); const label = document.querySelector('label[for="s-search"]');
// No badge child
expect(label?.querySelector('[class*="badge"]')).toBeNull(); expect(label?.querySelector('[class*="badge"]')).toBeNull();
}); });