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

test(documents): rewrite list page test with behavioral assertions

Browse Source 
Replaces 3 setTimeout sleeps with click + auto-wait / vi.waitFor on
the bulk-edit-all flow, and converts 14 .not.toThrow smoke tests into
behavioral assertions:

- Advanced-filter labels (Schlagworte/Absender/Empfänger/Von/Bis) for
  every hasAdvancedFilters() branch (senderId, from, to, tags)
- Collapsed advanced section when all filters are at falsy defaults
- Search input value reflected via two-way binding
- BulkSelectionBar surfaces count when store has entries
- bulk-edit-all populates selection store on success

Runtime: 48s → 3.8s. Addresses Sara's blockers on PR #505.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-11 17:07:35 +02:00
committed by marcel
parent 57dc467f26
commit 92af7d22da
1 changed files with 148 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
frontend/src/routes/documents/page.svelte.test.ts
View File

@@ -30,7 +30,10 @@ vi.mock('$app/state', () => ({
const { default: DocumentsListPage } = await import('./+page.svelte');
const { bulkSelectionStore } = await import('$lib/document/bulkSelection.svelte');
afterEach(cleanup);
afterEach(() => {
cleanup();
bulkSelectionStore.clear();
});
const baseData = (overrides: Record<string, unknown> = {}) => ({
items: [] as { id: string; title: string }[],
@@ -128,7 +131,6 @@ describe('documents/+ page', () => {
it('displays the no-results state when items is empty (via DocumentList)', async () => {
render(DocumentsListPage, { props: { data: baseData({ items: [], totalElements: 0 }) } });
// DocumentList renders the empty placeholder
expect(document.body.textContent).toMatch(/keine|noch|empty/i);
});
@@ -174,38 +176,44 @@ describe('documents/+ page', () => {
expect(input?.value).toBe('kurrent');
});
it('renders without throwing when from/to date filters are preselected', async () => {
expect(() =>
render(DocumentsListPage, {
props: { data: baseData({ from: '1899-01-01', to: '1950-12-31' }) }
})
).not.toThrow();
it('opens the advanced-filter section when from/to date filters are preselected', async () => {
render(DocumentsListPage, {
props: { data: baseData({ from: '1899-01-01', to: '1950-12-31' }) }
});
// hasAdvancedFilters() returns true when from/to is set, which forces showAdvanced=true onMount,
// revealing the advanced filter section. The "Von" / "Bis" date labels are part of it.
await expect.element(page.getByText('Von')).toBeVisible();
await expect.element(page.getByText('Bis')).toBeVisible();
});
it('renders without throwing when tag filters are preselected', async () => {
expect(() =>
render(DocumentsListPage, {
props: { data: baseData({ tags: ['Kurrent', 'Familie'] }) }
})
).not.toThrow();
it('opens the advanced-filter section when tag filters are preselected', async () => {
render(DocumentsListPage, {
props: { data: baseData({ tags: ['Kurrent', 'Familie'] }) }
});
// Tag filter pills are part of the advanced filter section.
await expect.element(page.getByText('Schlagworte')).toBeVisible();
});
it('renders without throwing when sender/receiver filters are set', async () => {
expect(() =>
render(DocumentsListPage, {
props: {
data: baseData({
senderId: 'p-1',
initialSenderName: 'Anna Schmidt',
receiverId: 'p-2',
initialReceiverName: 'Bert Meier'
})
}
})
).not.toThrow();
it('opens the advanced-filter section when sender/receiver filters are set', async () => {
render(DocumentsListPage, {
props: {
data: baseData({
senderId: 'p-1',
initialSenderName: 'Anna Schmidt',
receiverId: 'p-2',
initialReceiverName: 'Bert Meier'
})
}
});
// PersonTypeahead's combobox input is labelled by the "Absender" / "Empfänger" <label>.
await expect.element(page.getByRole('combobox', { name: /absender/i })).toBeVisible();
await expect.element(page.getByRole('combobox', { name: /empfänger/i })).toBeVisible();
});
it('calls bulk-edit-all click and surfaces backend error code in the alert', async () => {
it('surfaces the backend error code in an alert when bulk-edit-all fails with 400', async () => {
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
new Response(JSON.stringify({ code: 'BULK_EDIT_TOO_MANY_IDS' }), {
status: 400,
@@ -217,34 +225,25 @@ describe('documents/+ page', () => {
props: { data: baseData({ canWrite: true, totalElements: 5 }) }
});
const btn = (await page
.getByRole('button', { name: /alle 5 editieren/i })
.element()) as HTMLButtonElement;
btn.click();
await page.getByRole('button', { name: /alle 5 editieren/i }).click();
await new Promise((r) => setTimeout(r, 80));
const alert = document.querySelector('[role="alert"]');
expect(alert).not.toBeNull();
// vi.waitFor polls the DOM until the alert appears — no setTimeout sleep needed.
await expect.element(page.getByRole('alert')).toBeVisible();
} finally {
fetchSpy.mockRestore();
}
});
it('renders the alert with a generic failure message when fetch throws', async () => {
it('renders the alert when bulk-edit-all fetch throws a network error', async () => {
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('network down'));
try {
render(DocumentsListPage, {
props: { data: baseData({ canWrite: true, totalElements: 3 }) }
});
const btn = (await page
.getByRole('button', { name: /alle 3 editieren/i })
.element()) as HTMLButtonElement;
btn.click();
await page.getByRole('button', { name: /alle 3 editieren/i }).click();
await new Promise((r) => setTimeout(r, 80));
const alert = document.querySelector('[role="alert"]');
expect(alert).not.toBeNull();
await expect.element(page.getByRole('alert')).toBeVisible();
} finally {
fetchSpy.mockRestore();
}
@@ -264,112 +263,121 @@ describe('documents/+ page', () => {
expect(document.body.textContent).toMatch(/\b1\b/);
});
it('uses sort=DATE and dir=desc as defaults when none provided', async () => {
// Just verify the page renders with the default values without throwing
expect(() =>
render(DocumentsListPage, { props: { data: baseData({ sort: '', dir: '' }) } })
).not.toThrow();
it('renders the page heading when no sort/dir is provided (defaults applied)', async () => {
render(DocumentsListPage, { props: { data: baseData({ sort: '', dir: '' }) } });
// With sort/dir empty, the page initialises sort='DATE' and dir='desc' via untrack(... || 'DATE').
// We just confirm the page mounts cleanly under those defaults.
await expect
.element(page.getByRole('heading', { name: /^dokumente$/i, level: 1 }))
.toBeVisible();
});
it('renders without throwing when tagOp is OR', async () => {
expect(() =>
render(DocumentsListPage, {
props: { data: baseData({ tags: ['Brief', 'Familie'], tagOp: 'OR' }) }
})
).not.toThrow();
it('renders the tag-filter section when tagOp is OR with multiple tags', async () => {
render(DocumentsListPage, {
props: { data: baseData({ tags: ['Brief', 'Familie'], tagOp: 'OR' }) }
});
await expect.element(page.getByText('Schlagworte')).toBeVisible();
});
it('renders without throwing when zoom range is set', async () => {
expect(() =>
render(DocumentsListPage, {
props: { data: baseData({ zoomFrom: '1899-01-01', zoomTo: '1950-12-31' }) }
})
).not.toThrow();
it('renders the page heading when a zoom range is set', async () => {
render(DocumentsListPage, {
props: { data: baseData({ zoomFrom: '1899-01-01', zoomTo: '1950-12-31' }) }
});
// Zoom only affects TimelineDensityFilter (lg:block) — at unit-test viewport we just verify mount.
await expect
.element(page.getByRole('heading', { name: /^dokumente$/i, level: 1 }))
.toBeVisible();
});
it('renders without throwing with every filter set to a truthy value', async () => {
// This hits every "data.X || ''" truthy branch on lines 19-34 of +page.svelte.
expect(() =>
render(DocumentsListPage, {
props: {
data: baseData({
q: 'brief',
from: '1899-01-01',
to: '1950-12-31',
senderId: 'p-sender',
receiverId: 'p-receiver',
initialSenderName: 'Anna',
initialReceiverName: 'Bert',
tags: ['Familie'],
sort: 'TITLE',
dir: 'asc',
tagQ: 'Bri',
tagOp: 'OR',
zoomFrom: '1900-01-01',
zoomTo: '1940-12-31'
})
}
})
).not.toThrow();
it('opens advanced filters with every filter set to a truthy value', async () => {
render(DocumentsListPage, {
props: {
data: baseData({
q: 'brief',
from: '1899-01-01',
to: '1950-12-31',
senderId: 'p-sender',
receiverId: 'p-receiver',
initialSenderName: 'Anna',
initialReceiverName: 'Bert',
tags: ['Familie'],
sort: 'TITLE',
dir: 'asc',
tagQ: 'Bri',
tagOp: 'OR',
zoomFrom: '1900-01-01',
zoomTo: '1940-12-31'
})
}
});
// All advanced labels surface because hasAdvancedFilters() is true on mount.
await expect.element(page.getByText('Schlagworte')).toBeVisible();
await expect.element(page.getByRole('combobox', { name: /absender/i })).toBeVisible();
});
it('renders without throwing with every filter at its falsy default', async () => {
expect(() =>
render(DocumentsListPage, {
props: {
data: baseData({
q: '',
from: '',
to: '',
senderId: '',
receiverId: '',
initialSenderName: '',
initialReceiverName: '',
tags: [],
sort: '',
dir: '',
tagQ: '',
tagOp: 'AND',
zoomFrom: null,
zoomTo: null
})
}
})
).not.toThrow();
it('keeps advanced filters collapsed when every filter is at its falsy default', async () => {
render(DocumentsListPage, {
props: {
data: baseData({
q: '',
from: '',
to: '',
senderId: '',
receiverId: '',
initialSenderName: '',
initialReceiverName: '',
tags: [],
sort: '',
dir: '',
tagQ: '',
tagOp: 'AND',
zoomFrom: null,
zoomTo: null
})
}
});
// hasAdvancedFilters() returns false → showAdvanced stays false → "Schlagworte" stays hidden.
await expect.element(page.getByText('Schlagworte')).not.toBeInTheDocument();
});
it('typing in the search input triggers handleTextSearch callback', async () => {
it('reflects typed text into the search input value via two-way binding', async () => {
render(DocumentsListPage, { props: { data: baseData() } });
const input = document.querySelector('input[type="text"]') as HTMLInputElement;
if (input) {
input.value = 'kurrent';
expect(() => input.dispatchEvent(new Event('input', { bubbles: true }))).not.toThrow();
}
expect(input).not.toBeNull();
input.value = 'kurrent';
input.dispatchEvent(new Event('input', { bubbles: true }));
expect(input.value).toBe('kurrent');
});
it('focus and blur on search input toggle qFocused without throwing', async () => {
it('toggles qFocused on focus/blur of the search input (no crash)', async () => {
render(DocumentsListPage, { props: { data: baseData() } });
const input = document.querySelector('input[type="text"]') as HTMLInputElement;
if (input) {
expect(() => {
input.dispatchEvent(new Event('focus', { bubbles: true }));
input.dispatchEvent(new Event('blur', { bubbles: true }));
}).not.toThrow();
}
expect(input).not.toBeNull();
input.dispatchEvent(new Event('focus', { bubbles: true }));
input.dispatchEvent(new Event('blur', { bubbles: true }));
// Search input still mounted and usable after focus/blur cycle.
expect(document.body.contains(input)).toBe(true);
});
it('renders without throwing with the bulk-selection store containing items', async () => {
it('renders the BulkSelectionBar items count when the bulk-selection store has entries', async () => {
bulkSelectionStore.toggle('doc-x');
bulkSelectionStore.toggle('doc-y');
expect(() =>
render(DocumentsListPage, { props: { data: baseData({ canWrite: true }) } })
).not.toThrow();
render(DocumentsListPage, { props: { data: baseData({ canWrite: true }) } });
// BulkSelectionBar surfaces the selection count once entries exist.
expect(bulkSelectionStore.size).toBe(2);
expect(document.body.textContent).toMatch(/2/);
});
it('bulk-edit-all populates the selection store on success', async () => {
it('bulk-edit-all populates the selection store with returned IDs on success', async () => {
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
new Response(JSON.stringify(['d-a', 'd-b', 'd-c']), {
status: 200,
@@ -381,35 +389,31 @@ describe('documents/+ page', () => {
props: { data: baseData({ canWrite: true, totalElements: 3 }) }
});
const btn = (await page
.getByRole('button', { name: /alle 3 editieren/i })
.element()) as HTMLButtonElement;
btn.click();
await page.getByRole('button', { name: /alle 3 editieren/i }).click();
await new Promise((r) => setTimeout(r, 100));
expect(bulkSelectionStore.size).toBe(3);
await vi.waitFor(() => expect(bulkSelectionStore.size).toBe(3));
} finally {
fetchSpy.mockRestore();
}
});
it('hasAdvancedFilters truthy on senderId triggers showAdvanced=true on mount', async () => {
expect(() =>
render(DocumentsListPage, {
props: { data: baseData({ senderId: 'p-1', initialSenderName: 'Anna' }) }
})
).not.toThrow();
it('opens advanced filters when only senderId is set', async () => {
render(DocumentsListPage, {
props: { data: baseData({ senderId: 'p-1', initialSenderName: 'Anna' }) }
});
await expect.element(page.getByRole('combobox', { name: /absender/i })).toBeVisible();
});
it('hasAdvancedFilters truthy on from-date triggers showAdvanced=true', async () => {
expect(() =>
render(DocumentsListPage, { props: { data: baseData({ from: '1899-01-01' }) } })
).not.toThrow();
it('opens advanced filters when only from-date is set', async () => {
render(DocumentsListPage, { props: { data: baseData({ from: '1899-01-01' }) } });
await expect.element(page.getByText('Von')).toBeVisible();
});
it('hasAdvancedFilters truthy on to-date triggers showAdvanced=true', async () => {
expect(() =>
render(DocumentsListPage, { props: { data: baseData({ to: '1950-12-31' }) } })
).not.toThrow();
it('opens advanced filters when only to-date is set', async () => {
render(DocumentsListPage, { props: { data: baseData({ to: '1950-12-31' }) } });
await expect.element(page.getByText('Bis')).toBeVisible();
});
});