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

@@ -53,7 +53,12 @@ describe('GeschichteEditor — title-required guard', () => {
render(GeschichteEditor, { onSubmit });
await userEvent.click(page.getByPlaceholder('Titel der Geschichte'));
await userEvent.tab(); // blur
// userEvent.tab() / keyboard('{Tab}') do not reliably fire the blur event on
// inputs inside Playwright's test iframe. .blur() is a no-op when the element
// has lost focus to TipTap's onMount initialisation. Dispatching the FocusEvent
// directly fires Svelte's onblur listener regardless of the current focus owner.
const input = await page.getByPlaceholder('Titel der Geschichte').element();
input.dispatchEvent(new FocusEvent('blur'));
await expect.element(page.getByText('Bitte gib einen Titel ein.')).toBeInTheDocument();
});
});
@@ -111,8 +116,23 @@ describe('GeschichteEditor — onSubmit payload', () => {
const onSubmit = vi.fn().mockResolvedValue(undefined);
render(GeschichteEditor, { onSubmit });
await userEvent.fill(page.getByPlaceholder('Titel der Geschichte'), ' My title ');
await userEvent.click(page.getByRole('button', { name: 'Entwurf speichern' }));
// userEvent.fill() with trailing whitespace does not fire the input event chain
// that Svelte's bind:value requires (CDP limitation). Setting .value directly
// and dispatching an input event works around this while preserving the trailing
// space needed to verify the trim() contract.
const input = (await page
.getByPlaceholder('Titel der Geschichte')
.element()) as HTMLInputElement;
input.value = 'My title ';
input.dispatchEvent(new Event('input', { bubbles: true }));
// userEvent.click() via Playwright CDP does not reliably trigger Svelte 5 onclick
// handlers when a TipTap editor is mounted in the same component. Dispatching
// the MouseEvent directly from the browser JS context bypasses this issue.
const btn = (await page
.getByRole('button', { name: 'Entwurf speichern' })
.element()) as HTMLButtonElement;
btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(onSubmit).toHaveBeenCalledTimes(1);
const payload = onSubmit.mock.calls[0][0];
@@ -125,7 +145,10 @@ describe('GeschichteEditor — onSubmit payload', () => {
render(GeschichteEditor, { onSubmit });
await userEvent.fill(page.getByPlaceholder('Titel der Geschichte'), 'Story');
await userEvent.click(page.getByRole('button', { name: 'Veröffentlichen' }));
const btn = (await page
.getByRole('button', { name: 'Veröffentlichen' })
.element()) as HTMLButtonElement;
btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit.mock.calls[0][0].status).toBe('PUBLISHED');
@@ -140,7 +163,10 @@ describe('GeschichteEditor — onSubmit payload', () => {
});
await userEvent.fill(page.getByPlaceholder('Titel der Geschichte'), 'Story');
await userEvent.click(page.getByRole('button', { name: 'Entwurf speichern' }));
const btn = (await page
.getByRole('button', { name: 'Entwurf speichern' })
.element()) as HTMLButtonElement;
btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(onSubmit).toHaveBeenCalledTimes(1);
const payload = onSubmit.mock.calls[0][0];