0c765d8112
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>
102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
import { afterEach, describe, it, expect, vi } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
import EntityNav from './EntityNav.svelte';
|
|
|
|
vi.mock('$app/state', () => ({
|
|
page: { url: { pathname: '/admin/users' } }
|
|
}));
|
|
|
|
afterEach(cleanup);
|
|
|
|
const props = {
|
|
userCount: 5,
|
|
groupCount: 3,
|
|
tagCount: 8,
|
|
inviteCount: 2,
|
|
canManageUsers: true,
|
|
canManageTags: true,
|
|
canManagePermissions: true,
|
|
canRunMaintenance: true
|
|
};
|
|
|
|
describe('EntityNav — flyout', () => {
|
|
it('flyout dialog is not visible initially', async () => {
|
|
render(EntityNav, props);
|
|
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('clicking a flyout trigger opens the dialog', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
});
|
|
|
|
it('flyout dialog has aria-modal="true"', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
|
|
});
|
|
|
|
it('flyout dialog has an aria-label', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
const dialog = document.querySelector('[role="dialog"]')!;
|
|
expect(dialog.getAttribute('aria-label')).toBeTruthy();
|
|
});
|
|
|
|
it('flyout contains navigation links to each entity', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
const dialog = document.querySelector('[role="dialog"]')!;
|
|
const links = dialog.querySelectorAll('a[href^="/admin/"]');
|
|
expect(links.length).toBeGreaterThanOrEqual(3);
|
|
});
|
|
|
|
it('pressing Escape closes the flyout', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
|
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('clicking the backdrop closes the flyout', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
document.querySelector<HTMLElement>('[data-flyout-backdrop]')!.click();
|
|
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('clicking a flyout link closes the flyout', async () => {
|
|
render(EntityNav, props);
|
|
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
const dialog = document.querySelector('[role="dialog"]')!;
|
|
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();
|
|
});
|
|
});
|
|
|
|
describe('EntityNav — OCR entry', () => {
|
|
it('renders OCR link when canRunMaintenance is true', async () => {
|
|
render(EntityNav, props);
|
|
await expect.element(page.getByRole('link', { name: /OCR/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render OCR link when canRunMaintenance is false', async () => {
|
|
render(EntityNav, { ...props, canRunMaintenance: false });
|
|
const links = document.querySelectorAll('a[href="/admin/ocr"]');
|
|
expect(links.length).toBe(0);
|
|
});
|
|
});
|