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:
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user