diff --git a/frontend/src/lib/document/DashboardNeedsMetadata.svelte.spec.ts b/frontend/src/lib/document/DashboardNeedsMetadata.svelte.spec.ts index b08e32ff..f842f296 100644 --- a/frontend/src/lib/document/DashboardNeedsMetadata.svelte.spec.ts +++ b/frontend/src/lib/document/DashboardNeedsMetadata.svelte.spec.ts @@ -52,6 +52,6 @@ describe('DashboardNeedsMetadata', () => { it('uses totalCount in the footer even when topDocs has fewer items', async () => { const docs = [makeDoc('d1', 'Only one')]; render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 50 }); - await expect.element(page.getByRole('link', { name: /50/ })).toBeInTheDocument(); + await expect.element(page.getByRole('link', { name: /Alle 50/ })).toBeInTheDocument(); }); }); diff --git a/frontend/src/lib/shared/actions/radioGroupNav.ts b/frontend/src/lib/shared/actions/radioGroupNav.ts index 25a6d3d9..6c3d5838 100644 --- a/frontend/src/lib/shared/actions/radioGroupNav.ts +++ b/frontend/src/lib/shared/actions/radioGroupNav.ts @@ -19,6 +19,7 @@ export function radioGroupNav( const next = (current + delta + radios.length) % radios.length; radios[next].focus(); + radios.forEach((r, i) => r.setAttribute('aria-checked', i === next ? 'true' : 'false')); onChangeFn?.(radios[next].getAttribute('value') ?? ''); } diff --git a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts index 6dc213a4..577a03fe 100644 --- a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts +++ b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts @@ -236,7 +236,7 @@ describe('geschichten/[id] page', () => { // Trigger delete — opens confirm dialog const deleteBtn = page.getByRole('button', { name: /löschen/i }); - userEvent.click(deleteBtn); + await userEvent.click(deleteBtn); // Settle the confirmation dialog confirmService.settle(true); @@ -262,7 +262,7 @@ describe('geschichten/[id] page', () => { // Trigger delete — opens confirm dialog const deleteBtn = page.getByRole('button', { name: /löschen/i }); - userEvent.click(deleteBtn); + await userEvent.click(deleteBtn); // Settle the confirmation dialog confirmService.settle(true); diff --git a/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts b/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts index 2c36b34d..9aff1ca9 100644 --- a/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts +++ b/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts @@ -85,8 +85,9 @@ describe('TypeSelector', () => { const onweiter = vi.fn(); render(TypeSelector, { props: { onweiter } }); - const weiter = page.getByRole('button', { name: /Weiter/i }); - await userEvent.click(weiter); + // aria-disabled="true" prevents Playwright actionability — dispatch via DOM to test handler behaviour + const weiter = document.querySelector('button[aria-disabled="true"]'); + weiter?.click(); expect(onweiter).not.toHaveBeenCalled(); }); @@ -101,7 +102,7 @@ describe('TypeSelector', () => { render(TypeSelector, { props: { onweiter: vi.fn() } }); const storyCard = page.getByRole('radio', { name: /Geschichte/i }); - await storyCard.focus(); + await userEvent.click(storyCard); // click focuses the card; .focus() is not on vitest-browser Locator await userEvent.keyboard('{ArrowRight}'); const journeyCard = page.getByRole('radio', { name: /Lesereise/i }); @@ -113,7 +114,7 @@ describe('TypeSelector', () => { render(TypeSelector, { props: { onweiter: vi.fn() } }); const storyCard = page.getByRole('radio', { name: /Geschichte/i }); - await storyCard.focus(); + await userEvent.click(storyCard); // click focuses the card; .focus() is not on vitest-browser Locator await userEvent.keyboard('{ArrowLeft}'); const journeyCard = page.getByRole('radio', { name: /Lesereise/i }); diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts index efdba26e..a20320b5 100644 --- a/frontend/src/test-setup.ts +++ b/frontend/src/test-setup.ts @@ -1,3 +1,9 @@ +// Load global CSS so Tailwind utility classes (text-xs, min-h-[44px], etc.) +// are compiled and applied in browser-mode tests. Without this import the +// @tailwindcss/vite plugin never generates the utility stylesheet, leaving +// computed styles at browser defaults (16 px font, content-only height). +import './routes/layout.css'; + // Disable SvelteKit hover-prefetch (both data + code) in browser-mode tests. // ADR-012 / #553. //