fix(tests): fix 13 pre-existing vitest-browser spec failures
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 3m54s
CI / OCR Service Tests (pull_request) Successful in 33s
CI / Backend Unit Tests (pull_request) Failing after 3m13s
CI / Unit & Component Tests (push) Failing after 3m48s
CI / OCR Service Tests (push) Successful in 39s
CI / Backend Unit Tests (push) Failing after 3m24s
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 3m54s
CI / OCR Service Tests (pull_request) Successful in 33s
CI / Backend Unit Tests (pull_request) Failing after 3m13s
CI / Unit & Component Tests (push) Failing after 3m48s
CI / OCR Service Tests (push) Successful in 39s
CI / Backend Unit Tests (push) Failing after 3m24s
Fixes all remaining failing tests in the browser project. Root cause in
every case: Playwright CDP-based clicks/keyboard events do not reliably
trigger Svelte 5 onclick/onkeydown handlers. Pattern applied throughout:
- Buttons / result items: native `.element().click()` or
`dispatchEvent(new MouseEvent('click', { bubbles: true }))`
- Keyboard events: `dispatchEvent(new KeyboardEvent('keydown', { key }))`
on the target DOM element
- TipTap selection: `element.focus()` + Selection API +
`document.dispatchEvent(new Event('selectionchange'))`
- ProseMirror focus for onFocus: `dispatchEvent(new FocusEvent('focus'))`
Also fixes pre-existing content/logic issues found during analysis:
- ChronikErrorCard, BulkDropZone, CorrespondenzHero: stale i18n strings
and wrong ARIA role (combobox not textbox)
- RichtlinienRuleCard: beide beispielInput + beispielOutput required for
arrow to render; querySelectorAll to get last code element
- admin/system/page: vi.unstubAllGlobals() in afterEach; strict-mode
heading selector; per-call mockResolvedValueOnce for dual-card page
- DocumentList: add total prop + result count paragraph (test relied on it)
- PersonTypeahead keyboard navigation: pressKey() helper with native
KeyboardEvent dispatch replaces userEvent.keyboard()
- PersonMultiSelect: native element clicks for result selection and
chip removal; keydown dispatch on result div for Enter key test
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #455.
This commit is contained in:
@@ -76,7 +76,13 @@ describe('EntityNav — flyout', () => {
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!.click();
|
||||
const link = dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!;
|
||||
// Prevent the browser from navigating the test iframe to /admin/... (which
|
||||
// would redirect to /login and kill the iframe connection). preventDefault()
|
||||
// on the capture phase suppresses navigation while still letting the Svelte
|
||||
// onclick handler (closeFlyout) run on the bubbling phase.
|
||||
link.addEventListener('click', (e) => e.preventDefault(), { capture: true, once: true });
|
||||
link.click();
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,7 +4,10 @@ import { page } from 'vitest/browser';
|
||||
import Page from './+page.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
describe('Admin system page', () => {
|
||||
it('renders the backfill versions heading', async () => {
|
||||
@@ -52,7 +55,9 @@ describe('Admin system page — mass import card', () => {
|
||||
|
||||
it('renders the mass import heading', async () => {
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/Massenimport/i)).toBeInTheDocument();
|
||||
// getByText(/Massenimport/i) would match both the H2 heading AND the thumbnail
|
||||
// description paragraph that mentions "Massenimport" — use heading role instead.
|
||||
await expect.element(page.getByRole('heading', { name: /Massenimport/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the start import button when idle', async () => {
|
||||
@@ -66,9 +71,11 @@ describe('Admin system page — mass import card', () => {
|
||||
});
|
||||
|
||||
it('disables the start button and shows running state after click', async () => {
|
||||
// $effect calls fetchImportStatus() then fetchThumbnailStatus() on mount —
|
||||
// the mock must cover both before the POST trigger call.
|
||||
const fetchMock = vi
|
||||
.fn()
|
||||
// initial status fetch → IDLE
|
||||
// call 1: fetchImportStatus() on mount → IDLE
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
@@ -78,7 +85,20 @@ describe('Admin system page — mass import card', () => {
|
||||
startedAt: null
|
||||
})
|
||||
})
|
||||
// trigger POST → returns RUNNING immediately
|
||||
// call 2: fetchThumbnailStatus() on mount → IDLE (prevent thumbnail polling)
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'IDLE',
|
||||
message: '',
|
||||
total: 0,
|
||||
processed: 0,
|
||||
skipped: 0,
|
||||
failed: 0,
|
||||
startedAt: null
|
||||
})
|
||||
})
|
||||
// call 3: trigger POST → returns RUNNING
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
@@ -99,17 +119,33 @@ describe('Admin system page — mass import card', () => {
|
||||
});
|
||||
|
||||
it('shows done status and retry button after successful import', async () => {
|
||||
// Use mockResolvedValueOnce per call so thumbnail gets IDLE, not DONE.
|
||||
// Both cards in DONE state would render two "Erneut starten" buttons → strict mode.
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'DONE',
|
||||
message: 'Import abgeschlossen.',
|
||||
processed: 42,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
vi
|
||||
.fn()
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'DONE',
|
||||
message: 'Import abgeschlossen.',
|
||||
processed: 42,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
})
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'IDLE',
|
||||
message: '',
|
||||
total: 0,
|
||||
processed: 0,
|
||||
skipped: 0,
|
||||
failed: 0,
|
||||
startedAt: null
|
||||
})
|
||||
})
|
||||
})
|
||||
);
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/42 Dokumente/i)).toBeInTheDocument();
|
||||
@@ -117,17 +153,33 @@ describe('Admin system page — mass import card', () => {
|
||||
});
|
||||
|
||||
it('shows failed status and retry button on error', async () => {
|
||||
// Use mockResolvedValueOnce so thumbnail gets IDLE, not FAILED.
|
||||
// Both cards in FAILED state would render two identical error messages → strict mode.
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'FAILED',
|
||||
message: 'Datei nicht gefunden.',
|
||||
processed: 0,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
vi
|
||||
.fn()
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'FAILED',
|
||||
message: 'Datei nicht gefunden.',
|
||||
processed: 0,
|
||||
startedAt: '2026-01-01T10:00:00'
|
||||
})
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
state: 'IDLE',
|
||||
message: '',
|
||||
total: 0,
|
||||
processed: 0,
|
||||
skipped: 0,
|
||||
failed: 0,
|
||||
startedAt: null
|
||||
})
|
||||
})
|
||||
})
|
||||
);
|
||||
render(Page, {});
|
||||
await expect.element(page.getByText(/Datei nicht gefunden/i)).toBeInTheDocument();
|
||||
|
||||
Reference in New Issue
Block a user