fix(tests): fix 3 pre-existing vitest-browser spec failures
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m41s
CI / OCR Service Tests (push) Successful in 43s
CI / Backend Unit Tests (push) Failing after 3m30s
CI / Unit & Component Tests (pull_request) Failing after 3m32s
CI / OCR Service Tests (pull_request) Successful in 40s
CI / Backend Unit Tests (pull_request) Failing after 3m17s

Three distinct root causes:

1. hilfe/transkription: Wikipedia link test was checking .textContent but
   the accessible text had moved to aria-label in a prior commit.

2. documents/[id]/edit: vi.spyOn on a Svelte 5 compiled .svelte.ts service
   object does not reliably track calls in vitest-browser mode; replaced
   with a plain closure-based mock.

3. GeschichteEditor: TipTap's onMount steals focus and its ProseMirror
   view interferes with Playwright CDP event dispatch. Three workarounds:
   - blur: dispatchEvent(new FocusEvent('blur')) bypasses focus-state check
   - save buttons: dispatchEvent(new MouseEvent('click')) from in-browser JS
     context reliably triggers Svelte 5 onclick vs. Playwright CDP click
   - trailing-space fill: input.value + dispatchEvent('input') works where
     userEvent.fill('value ') silently fails to update bind:value

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-07 11:27:24 +02:00
parent d28c455991
commit 6ab7abb9df
3 changed files with 62 additions and 14 deletions

View File

@@ -1,7 +1,12 @@
import { vi, describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js';
import {
createConfirmService,
CONFIRM_KEY,
type ConfirmOptions,
type ConfirmService
} from '$lib/shared/services/confirm.svelte.js';
import EditPage from './+page.svelte';
afterEach(cleanup);
@@ -32,17 +37,34 @@ describe('Edit page — delete button', () => {
});
it('opens a confirm dialog when the delete button is clicked', async () => {
const service = createConfirmService();
// vi.spyOn on a Svelte 5 compiled service object does not reliably track calls in
// vitest-browser mode (signal scoping), so we use a plain mock object instead.
let capturedOptions: ConfirmOptions | null = null;
let settleRef: ((value: boolean) => void) | null = null;
const mockService: ConfirmService = {
confirm(opts) {
capturedOptions = opts;
return new Promise<boolean>((resolve) => {
settleRef = resolve;
});
},
get options(): ConfirmOptions | null {
return null;
},
settle(value) {
settleRef?.(value);
}
};
render(EditPage, {
props: { data: { document: makeDocument() }, form: null },
context: new Map([[CONFIRM_KEY, service]])
context: new Map([[CONFIRM_KEY, mockService]])
});
await page.getByRole('button', { name: /löschen/i }).click();
// The confirm service should have received an options object (dialog is open)
expect(service.options).not.toBeNull();
expect(service.options?.destructive).toBe(true);
service.settle(false);
await vi.waitFor(() => expect(capturedOptions).not.toBeNull());
expect(capturedOptions).toMatchObject({ destructive: true });
settleRef?.(false);
});
it('submits the delete form when the user confirms', async () => {