From 8319ca79eda0ded0da7b52d483e98361700b8a59 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 14 May 2026 10:58:29 +0200 Subject: [PATCH] fix(tests): use native element clicks in layout dropdown spec MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CDP-based Playwright clicks (locator.click()) do not reliably trigger Svelte 5 onclick handlers — documented in commit 0c765d81 which fixed 13 other specs. The layout dropdown tests were missed in that pass. Applies the same pattern: ((await locator.element()) as HTMLElement).click() for button interactions, and native KeyboardEvent dispatch for the Escape test (dispatched on the button so it bubbles to the parent div's onkeydown). Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/routes/layout.svelte.spec.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/routes/layout.svelte.spec.ts b/frontend/src/routes/layout.svelte.spec.ts index 094918bd..6020faec 100644 --- a/frontend/src/routes/layout.svelte.spec.ts +++ b/frontend/src/routes/layout.svelte.spec.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import { cleanup, render } from 'vitest-browser-svelte'; -import { page, userEvent } from 'vitest/browser'; +import { page } from 'vitest/browser'; import { createRawSnippet } from 'svelte'; vi.mock('$env/static/public', () => ({ PUBLIC_NOTIFICATION_POLL_MS: '60000' })); @@ -96,13 +96,13 @@ describe('Layout – user dropdown', () => { it('opens dropdown on button click', async () => { render(Layout, { data: makeData(), children: emptySnippet }); - await page.getByRole('button', { name: /MM/ }).click(); + ((await page.getByRole('button', { name: /MM/ }).element()) as HTMLElement).click(); await expect.element(page.getByRole('link', { name: /Profil/i })).toBeInTheDocument(); }); it('profile link points to /profile', async () => { render(Layout, { data: makeData(), children: emptySnippet }); - await page.getByRole('button', { name: /MM/ }).click(); + ((await page.getByRole('button', { name: /MM/ }).element()) as HTMLElement).click(); await expect .element(page.getByRole('link', { name: /Profil/i })) .toHaveAttribute('href', '/profile'); @@ -110,16 +110,16 @@ describe('Layout – user dropdown', () => { it('logout button is in the dropdown', async () => { render(Layout, { data: makeData(), children: emptySnippet }); - await page.getByRole('button', { name: /MM/ }).click(); + ((await page.getByRole('button', { name: /MM/ }).element()) as HTMLElement).click(); await expect.element(page.getByRole('button', { name: /Abmelden/i })).toBeInTheDocument(); }); it('closes dropdown when Escape is pressed', async () => { render(Layout, { data: makeData(), children: emptySnippet }); - const btn = page.getByRole('button', { name: /MM/ }); - await btn.click(); + const btnEl = (await page.getByRole('button', { name: /MM/ }).element()) as HTMLElement; + btnEl.click(); await expect.element(page.getByRole('link', { name: /Profil/i })).toBeInTheDocument(); - await userEvent.keyboard('{Escape}'); + btnEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); await tick(); await expect.element(page.getByRole('link', { name: /Profil/i })).not.toBeInTheDocument(); }); -- 2.49.1