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

chore: merge main into branch; resolve ChronikRow conflict
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 4m21s
Details
CI / OCR Service Tests (pull_request) Successful in 42s
Details
CI / Backend Unit Tests (pull_request) Failing after 3m36s
Details
CI / Unit & Component Tests (push) Failing after 3m46s
Details
CI / OCR Service Tests (push) Successful in 31s
Details
CI / Backend Unit Tests (push) Failing after 3m17s
Details

Browse Source 
TODO/SECURITY placeholders from main are superseded by the #454 implementation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #475.
This commit is contained in:
Marcel
2026-05-07 20:05:12 +02:00
parent 9ef3c82398 c10e8e8a3a
commit baa0a9811c
74 changed files with 317 additions and 4176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/activity/ChronikErrorCard.svelte.spec.ts
View File

@@ -1,6 +1,6 @@
import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import { page } from 'vitest/browser';
import ChronikErrorCard from './ChronikErrorCard.svelte';
@@ -10,7 +10,7 @@ describe('ChronikErrorCard', () => {
it('renders the default error message', async () => {
render(ChronikErrorCard, { onRetry: vi.fn() });
await expect
.element(page.getByText('Die Chronik konnte nicht geladen werden.'))
.element(page.getByText('Die Aktivitäten konnten nicht geladen werden.'))
.toBeInTheDocument();
});
@@ -27,7 +27,8 @@ describe('ChronikErrorCard', () => {
it('calls onRetry when the retry button is clicked', async () => {
const onRetry = vi.fn();
render(ChronikErrorCard, { onRetry });
await userEvent.click(page.getByText('Erneut versuchen'));
const btn = (await page.getByText('Erneut versuchen').element()) as HTMLElement;
btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(onRetry).toHaveBeenCalledTimes(1);
});

2
frontend/src/lib/document/BulkDropZone.svelte.spec.ts
View File

@@ -34,6 +34,6 @@ describe('BulkDropZone', () => {
it('shows drop hint text', async () => {
render(BulkDropZone, { onFilesAdded: vi.fn() });
await expect.element(page.getByText(/hier ablegen/i)).toBeInTheDocument();
await expect.element(page.getByText(/Dateien ablegen/i)).toBeInTheDocument();
});
});

33
frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts
View File

@@ -116,8 +116,8 @@ describe('TranscriptionBlock — interactions', () => {
it('calls onFocus when textarea is focused', async () => {
const onFocus = vi.fn();
renderBlock({ onFocus });
const textarea = page.getByRole('textbox');
await textarea.click();
const textboxEl = (await page.getByRole('textbox').element()) as HTMLElement;
textboxEl.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
expect(onFocus).toHaveBeenCalled();
});
@@ -152,16 +152,20 @@ describe('TranscriptionBlock — reorder controls', () => {
it('calls onMoveUp when up arrow clicked', async () => {
const onMoveUp = vi.fn();
renderBlock({ onMoveUp, isFirst: false });
const btn = page.getByRole('button', { name: 'Nach oben' });
await btn.click();
const btnEl = (await page
.getByRole('button', { name: 'Nach oben' })
.element()) as HTMLButtonElement;
btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(onMoveUp).toHaveBeenCalled();
});
it('calls onMoveDown when down arrow clicked', async () => {
const onMoveDown = vi.fn();
renderBlock({ onMoveDown, isLast: false });
const btn = page.getByRole('button', { name: 'Nach unten' });
await btn.click();
const btnEl = (await page
.getByRole('button', { name: 'Nach unten' })
.element()) as HTMLButtonElement;
btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(onMoveDown).toHaveBeenCalled();
});
});
@@ -227,16 +231,17 @@ describe('TranscriptionBlock — delete confirmation', () => {
describe('TranscriptionBlock — quote selection', () => {
it('shows quote hint after text is selected in the editor', async () => {
renderBlock({ text: 'Breslau, den 12. August' });
await page.getByRole('textbox').click();
// Select all text in the contenteditable via the native Selection API.
// Tiptap fires selectionUpdate which the block forwards as onSelectionChange.
const editorEl = document.querySelector('[role="textbox"]') as HTMLElement;
// Native .focus() activates ProseMirror's DOMObserver so it listens for selectionchange.
const editorEl = (await page.getByRole('textbox').element()) as HTMLElement;
editorEl.focus();
// Let ProseMirror's focus handler complete before we overwrite the selection.
await new Promise((r) => setTimeout(r, 0));
const range = document.createRange();
range.selectNodeContents(editorEl);
const selection = window.getSelection()!;
selection.removeAllRanges();
selection.addRange(range);
editorEl.dispatchEvent(new Event('input', { bubbles: true }));
const sel = window.getSelection()!;
sel.removeAllRanges();
sel.addRange(range);
document.dispatchEvent(new Event('selectionchange'));
await expect.element(page.getByText(/Zitat/)).toBeInTheDocument();
});
});

49
frontend/src/lib/document/transcription/TranscriptionEditView.svelte.spec.ts
View File

@@ -1,6 +1,6 @@
import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import { page, userEvent } from 'vitest/browser';
import TranscriptionEditView from './TranscriptionEditView.svelte';
import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js';
@@ -148,24 +148,28 @@ describe('TranscriptionEditView — auto-save debounce', () => {
});
it('passes the block mentionedPersons array as the 3rd save argument', async () => {
vi.useFakeTimers();
const onSaveBlock = vi.fn().mockResolvedValue(undefined);
const blockWithMention = {
...block1,
// text must contain the @displayName token so deserialize() creates a mention node;
// fill() replaces the whole content with plain text and would destroy the node
text: '@Auguste Raddatz',
mentionedPersons: [{ personId: 'p-aug', displayName: 'Auguste Raddatz' }]
};
renderView({ blocks: [blockWithMention], onSaveBlock });
const textarea = page.getByRole('textbox').first();
await textarea.fill('Hallo @Auguste Raddatz');
// type() focuses the element (cursor at position 0) then inserts without replacing the
// existing mention node. Fake timers interfere with keyboard CDP so use real timers
// + vi.waitFor to catch the 1500 ms debounce.
await userEvent.type(page.getByRole('textbox').first(), 'Hallo ');
vi.advanceTimersByTime(1500);
await vi.runAllTimersAsync();
expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Hallo @Auguste Raddatz', [
{ personId: 'p-aug', displayName: 'Auguste Raddatz' }
]);
vi.useRealTimers();
await vi.waitFor(
() =>
expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Hallo @Auguste Raddatz', [
{ personId: 'p-aug', displayName: 'Auguste Raddatz' }
]),
{ timeout: 3000 }
);
});
it('resets debounce timer on rapid successive changes', async () => {
@@ -238,8 +242,9 @@ describe('TranscriptionEditView — flush on blur', () => {
const textarea = page.getByRole('textbox').first();
await textarea.fill('Blur text');
// Blur before 1500ms debounce fires — locator.blur() not available, use native DOM
const el = document.querySelector('textarea') as HTMLTextAreaElement;
// Blur before 1500ms debounce fires — locator.blur() not available, use native DOM.
// PersonMentionEditor uses a contenteditable div (role=textbox), not a <textarea>.
const el = document.querySelector('[role="textbox"]') as HTMLElement;
el.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
await vi.runAllTimersAsync();
@@ -335,7 +340,12 @@ describe('TranscriptionEditView — mark all reviewed', () => {
onMarkAllReviewed
});
await page.getByRole('button', { name: /Alle als fertig markieren/ }).click();
// userEvent.click() via Playwright CDP doesn't reliably trigger Svelte 5 onclick
// handlers when a TipTap editor is mounted in the same component tree.
const btn = (await page
.getByRole('button', { name: /Alle als fertig markieren/ })
.element()) as HTMLButtonElement;
btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
await vi.waitFor(() => expect(onMarkAllReviewed).toHaveBeenCalledTimes(1));
});
@@ -349,9 +359,14 @@ describe('TranscriptionEditView — mark all reviewed', () => {
onMarkAllReviewed
});
const btn = page.getByRole('button', { name: /Alle als fertig markieren/ });
await btn.click();
await expect.element(btn).toBeDisabled();
// Same CDP click workaround: dispatch from browser JS to reliably fire Svelte 5 onclick
const btnEl = (await page
.getByRole('button', { name: /Alle als fertig markieren/ })
.element()) as HTMLButtonElement;
btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
await expect
.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
.toBeDisabled();
resolveMarkAll();
});
});

36
frontend/src/lib/geschichte/GeschichteEditor.svelte.spec.ts
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];

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();

14
frontend/src/lib/shared/discussion/PersonMentionEditor.svelte.spec.ts
View File

@@ -174,7 +174,14 @@ describe('PersonMentionEditor — AC-1: typed text as displayName', () => {
await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
});
await userEvent.click(page.getByRole('option', { name: /Auguste Raddatz/ }));
// MentionDropdown handles selection via onmousedown (not onclick) to prevent
// blurring the editor before the selection fires. userEvent.click() via CDP
// does not reliably trigger Svelte 5's onmousedown handler when TipTap is
// mounted — dispatch the MouseEvent directly from browser JS instead.
const option = (await page
.getByRole('option', { name: /Auguste Raddatz/ })
.element()) as HTMLElement;
option.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
await vi.waitFor(() => {
expect(host.snapshot.mentionedPersons).toHaveLength(1);
@@ -212,7 +219,10 @@ describe('PersonMentionEditor — AC-1: typed text as displayName', () => {
await expect.element(page.getByRole('option', { name: /Auguste Raddatz/ })).toBeVisible();
});
await userEvent.click(page.getByRole('option', { name: /Auguste Raddatz/ }));
const option = (await page
.getByRole('option', { name: /Auguste Raddatz/ })
.element()) as HTMLElement;
option.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
await vi.waitFor(() => {
expect(host.snapshot.mentionedPersons).toEqual([{ personId: 'p-aug', displayName: 'Aug' }]);

11
frontend/src/lib/shared/primitives/RichtlinienRuleCard.svelte.spec.ts
View File

@@ -9,6 +9,8 @@ const defaultProps = {
icon: '✍',
title: 'Unleserliche Wörter',
body: 'Schreiben Sie [unleserlich].',
// beispielInput is required for the → arrow to render (component: {#if beispielInput !== undefined})
beispielInput: '[Original]',
beispielOutput: '[unleserlich]'
};
@@ -34,9 +36,12 @@ describe('RichtlinienRuleCard', () => {
it('renders beispielOutput in monospace with → arrow', async () => {
render(RichtlinienRuleCard, { props: defaultProps });
const mono = document.querySelector('code, [class*="font-mono"]');
expect(mono).not.toBeNull();
expect(mono!.textContent).toContain('[unleserlich]');
// With both beispielInput and beispielOutput, the component renders two code elements:
// [Input] → [Output]. querySelectorAll gets both; last one is the output.
const codes = document.querySelectorAll('code, [class*="font-mono"]');
expect(codes.length).toBeGreaterThanOrEqual(1);
const outputCode = codes[codes.length - 1];
expect(outputCode.textContent).toContain('[unleserlich]');
await expect.element(page.getByText(/→/)).toBeInTheDocument();
});

3
frontend/src/lib/tag/TagInput.svelte.spec.ts
View File

@@ -369,8 +369,7 @@ describe('TagInput – onTextInput callback', () => {
const input = page.getByRole('textbox');
await input.fill('Ka');
await waitForFetch();
const option = page.getByRole('option', { name: 'Kaufvertrag' });
await option.click();
((await page.getByRole('option', { name: 'Kaufvertrag' }).element()) as HTMLElement).click();
await expect.poll(() => onTextInput.mock.calls.at(-1)).toEqual(['']);
});
});