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

fix(tests): fix 13 pre-existing vitest-browser spec failures
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 3m54s
Details
CI / OCR Service Tests (pull_request) Successful in 33s
Details
CI / Backend Unit Tests (pull_request) Failing after 3m13s
Details
CI / Unit & Component Tests (push) Failing after 3m48s
Details
CI / OCR Service Tests (push) Successful in 39s
Details
CI / Backend Unit Tests (push) Failing after 3m24s
Details

Browse Source 
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:
Marcel
2026-05-07 13:15:54 +02:00
parent cdb54c7545
commit 0c765d8112
13 changed files with 196 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/lib/person/PersonMultiSelect.svelte.spec.ts
View File

@@ -143,7 +143,7 @@ describe('PersonMultiSelect – selecting persons', () => {
const input = page.getByRole('textbox');
await input.fill('Mu');
await waitForDebounce();
await page.getByText('Max Mustermann').click();
((await page.getByRole('button', { name: 'Max Mustermann' }).element()) as HTMLElement).click();
await expect.element(page.getByText('Max Mustermann')).toBeInTheDocument();
await expect.element(input).toHaveValue('');
await page.screenshot({
@@ -158,11 +158,13 @@ describe('PersonMultiSelect – selecting persons', () => {
await input.fill('Mu');
await waitForDebounce();
await page.getByText('Max Mustermann').click();
((await page.getByRole('button', { name: 'Max Mustermann' }).element()) as HTMLElement).click();
await input.fill('Mu');
await waitForDebounce();
await page.getByText('Anna Musterfrau').click();
(
(await page.getByRole('button', { name: 'Anna Musterfrau' }).element()) as HTMLElement
).click();
await expect.element(page.getByText('Max Mustermann')).toBeInTheDocument();
await expect.element(page.getByText('Anna Musterfrau')).toBeInTheDocument();
@@ -210,7 +212,13 @@ describe('PersonMultiSelect – selecting persons', () => {
const input = page.getByRole('textbox');
await input.fill('Ma');
await waitForDebounce();
await page.getByText('Max Mustermann').click();
const resultEl = (await page
.getByRole('button', { name: 'Max Mustermann' })
.element()) as HTMLElement;
resultEl.dispatchEvent(
new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
);
await tick();
await expect.element(page.getByText('Max Mustermann')).toBeInTheDocument();
});
});
@@ -240,8 +248,11 @@ describe('PersonMultiSelect – removing persons', () => {
]
});
// Buttons have aria-label="Entfernen"
const removeButtons = page.getByRole('button', { name: 'Entfernen' });
await removeButtons.first().click();
const removeBtn = (await page
.getByRole('button', { name: 'Entfernen' })
.first()
.element()) as HTMLElement;
removeBtn.click();
await expect.element(page.getByText('Max Mustermann')).not.toBeInTheDocument();
await expect.element(page.getByText('Anna Musterfrau')).toBeInTheDocument();
});
@@ -267,7 +278,9 @@ describe('PersonMultiSelect – removing persons', () => {
}
]
});
await page.getByRole('button', { name: 'Entfernen' }).first().click();
(
(await page.getByRole('button', { name: 'Entfernen' }).first().element()) as HTMLElement
).click();
await tick();
const inputs = receiverInputs();
expect(inputs).toHaveLength(1);

54
frontend/src/lib/person/PersonTypeahead.svelte.spec.ts
View File

@@ -1,6 +1,6 @@
import { describe, expect, it, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import { page } from 'vitest/browser';
import PersonTypeahead from './PersonTypeahead.svelte';
const waitForDebounce = () => new Promise((r) => setTimeout(r, 350));
@@ -346,6 +346,14 @@ describe('PersonTypeahead – ARIA roles', () => {
// ─── Keyboard navigation ──────────────────────────────────────────────────────
// CDP-based userEvent.keyboard does not reliably trigger Svelte 5 onkeydown
// handlers. Dispatch native KeyboardEvent directly on the DOM element instead.
async function pressKey(input: ReturnType<typeof page.getByPlaceholder>, key: string) {
const el = (await input.element()) as HTMLInputElement;
el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
await tick();
}
describe('PersonTypeahead – keyboard navigation', () => {
it('ArrowDown moves highlight to the first option', async () => {
mockFetchWithPersons();
@@ -354,9 +362,7 @@ describe('PersonTypeahead – keyboard navigation', () => {
await input.fill('Mu');
await waitForDebounce();
await input.click();
await userEvent.keyboard('{ArrowDown}');
await tick();
await pressKey(input, 'ArrowDown');
// First option should be highlighted (aria-selected="true")
const firstOption = page.getByRole('option', { name: 'Max Mustermann' });
@@ -370,11 +376,8 @@ describe('PersonTypeahead – keyboard navigation', () => {
await input.fill('Mu');
await waitForDebounce();
await input.click();
await userEvent.keyboard('{ArrowDown}');
await tick();
await userEvent.keyboard('{ArrowDown}');
await tick();
await pressKey(input, 'ArrowDown');
await pressKey(input, 'ArrowDown');
const secondOption = page.getByRole('option', { name: 'Anna Musterfrau' });
await expect.element(secondOption).toHaveAttribute('aria-selected', 'true');
@@ -387,11 +390,8 @@ describe('PersonTypeahead – keyboard navigation', () => {
await input.fill('Mu');
await waitForDebounce();
await input.click();
await userEvent.keyboard('{ArrowDown}'); // highlight first
await tick();
await userEvent.keyboard('{ArrowUp}'); // wrap to last
await tick();
await pressKey(input, 'ArrowDown'); // highlight first
await pressKey(input, 'ArrowUp'); // wrap to last
const lastOption = page.getByRole('option', { name: 'Anna Musterfrau' });
await expect.element(lastOption).toHaveAttribute('aria-selected', 'true');
@@ -404,13 +404,9 @@ describe('PersonTypeahead – keyboard navigation', () => {
await input.fill('Mu');
await waitForDebounce();
await input.click();
await userEvent.keyboard('{ArrowDown}'); // highlight first (index 0)
await tick();
await userEvent.keyboard('{ArrowDown}'); // highlight second (index 1 = last)
await tick();
await userEvent.keyboard('{ArrowDown}'); // wrap to first (index 0)
await tick();
await pressKey(input, 'ArrowDown'); // highlight first (index 0)
await pressKey(input, 'ArrowDown'); // highlight second (index 1 = last)
await pressKey(input, 'ArrowDown'); // wrap to first (index 0)
const firstOption = page.getByRole('option', { name: 'Max Mustermann' });
await expect.element(firstOption).toHaveAttribute('aria-selected', 'true');
@@ -431,11 +427,8 @@ describe('PersonTypeahead – keyboard navigation', () => {
await input.fill('Ma');
await waitForDebounce();
await input.click();
await userEvent.keyboard('{ArrowDown}');
await tick();
await userEvent.keyboard('{Enter}');
await tick();
await pressKey(input, 'ArrowDown');
await pressKey(input, 'Enter');
await expect.element(input).toHaveValue('Max Mustermann');
await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
@@ -449,9 +442,8 @@ describe('PersonTypeahead – keyboard navigation', () => {
await waitForDebounce();
await expect.element(page.getByRole('listbox')).toBeInTheDocument();
await input.click();
await userEvent.keyboard('{Escape}');
await tick();
await pressKey(input, 'Escape');
await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
// Value unchanged — nothing was selected
await expect.element(input).toHaveValue('Mu');
@@ -468,9 +460,7 @@ describe('PersonTypeahead – keyboard navigation', () => {
const beforeNav = await input.element().getAttribute('aria-activedescendant');
expect(beforeNav).toBeFalsy();
await input.click();
await userEvent.keyboard('{ArrowDown}');
await tick();
await pressKey(input, 'ArrowDown');
const afterNav = await input.element().getAttribute('aria-activedescendant');
expect(afterNav).toBeTruthy();