test(routes): expand AppNav coverage for active links and mobile overlay

Active-link styling per pathname (documents, persons, stammbaum,
geschichten, admin), mobile backdrop click closes nav, Escape
keypress on overlay closes nav.

7 new tests targeting ~14 branches.

Refs #496.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-10 03:53:32 +02:00
parent d51552ed11
commit 68ca7df177

View File

@@ -75,4 +75,83 @@ describe('AppNav', () => {
.element(browserPage.getByRole('button', { name: /menü schließen/i }))
.toHaveAttribute('aria-expanded', 'true');
});
it('marks the documents link as active when pathname starts with /documents', async () => {
mockPage.url = new URL('http://localhost/documents/abc');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: false } });
const link = Array.from(document.querySelectorAll('nav a[href="/documents"]'))[0];
expect(link?.className).toContain('border-accent');
});
it('marks the persons link as active when pathname starts with /persons', async () => {
mockPage.url = new URL('http://localhost/persons/123');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: false } });
const link = Array.from(document.querySelectorAll('nav a[href="/persons"]'))[0];
expect(link?.className).toContain('border-accent');
});
it('marks the stammbaum link as active when pathname starts with /stammbaum', async () => {
mockPage.url = new URL('http://localhost/stammbaum');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: false } });
const link = Array.from(document.querySelectorAll('nav a[href="/stammbaum"]'))[0];
expect(link?.className).toContain('border-accent');
});
it('marks the geschichten link as active when pathname starts with /geschichten', async () => {
mockPage.url = new URL('http://localhost/geschichten/x');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: false } });
const link = Array.from(document.querySelectorAll('nav a[href="/geschichten"]'))[0];
expect(link?.className).toContain('border-accent');
});
it('marks the admin link as active when pathname starts with /admin and isAdmin is true', async () => {
mockPage.url = new URL('http://localhost/admin/users');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: true } });
const link = Array.from(document.querySelectorAll('nav a[href="/admin"]'))[0];
expect(link?.className).toContain('border-accent');
});
it('closes the mobile nav when the backdrop is clicked', async () => {
mockPage.url = new URL('http://localhost/');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: false } });
await browserPage.getByRole('button', { name: /menü öffnen/i }).click();
// Mobile nav is now open
const backdrop = document.querySelector('.bg-black\\/20') as HTMLElement;
expect(backdrop).not.toBeNull();
backdrop.click();
await new Promise((r) => setTimeout(r, 30));
await expect
.element(browserPage.getByRole('button', { name: /menü öffnen/i }))
.toHaveAttribute('aria-expanded', 'false');
});
it('closes the mobile nav when Escape is pressed on the overlay', async () => {
mockPage.url = new URL('http://localhost/');
const AppNav = await loadComponent();
render(AppNav, { props: { isAdmin: false } });
await browserPage.getByRole('button', { name: /menü öffnen/i }).click();
const overlay = document.querySelector('.fixed.inset-0') as HTMLElement;
overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
await new Promise((r) => setTimeout(r, 30));
await expect
.element(browserPage.getByRole('button', { name: /menü öffnen/i }))
.toHaveAttribute('aria-expanded', 'false');
});
});