From b0fc9f55c1bf21161b0f4df6e07d635e78639998 Mon Sep 17 00:00:00 2001 From: Marcel Raddatz Date: Fri, 10 Apr 2026 16:45:32 +0200 Subject: [PATCH] feat(nav): pass extraPaths to isActiveRoute in DesktopSidebar and MobileTabBar Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/nav/DesktopSidebar.svelte | 2 +- frontend/src/lib/nav/DesktopSidebar.test.ts | 15 +++++++++++++++ frontend/src/lib/nav/MobileTabBar.svelte | 2 +- frontend/src/lib/nav/MobileTabBar.test.ts | 15 +++++++++++++++ 4 files changed, 32 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/nav/DesktopSidebar.svelte b/frontend/src/lib/nav/DesktopSidebar.svelte index 9865bab..328c88d 100644 --- a/frontend/src/lib/nav/DesktopSidebar.svelte +++ b/frontend/src/lib/nav/DesktopSidebar.svelte @@ -24,7 +24,7 @@ {section.title}

{#each section.items as item (item.href)} - {@const active = isActiveRoute(item.href, $page.url.pathname)} + {@const active = isActiveRoute(item.href, $page.url.pathname, item.extraPaths)} { expect(widget).toBeInTheDocument(); }); }); + +describe('DesktopSidebar — extraPaths active state', () => { + it('marks Einstellungen active when on /household/staples', async () => { + const { readable } = await import('svelte/store'); + vi.doMock('$app/stores', () => ({ + page: readable({ url: new URL('http://localhost/household/staples') }) + })); + vi.resetModules(); + const { render: r, screen: s } = await import('@testing-library/svelte'); + const { default: Sidebar } = await import('./DesktopSidebar.svelte'); + r(Sidebar, { props: { appName: 'Test', householdName: 'Test' } }); + const link = s.getByRole('link', { name: /einstellungen/i }); + expect(link).toHaveAttribute('aria-current', 'page'); + }); +}); diff --git a/frontend/src/lib/nav/MobileTabBar.svelte b/frontend/src/lib/nav/MobileTabBar.svelte index d0b336a..a3ff8ac 100644 --- a/frontend/src/lib/nav/MobileTabBar.svelte +++ b/frontend/src/lib/nav/MobileTabBar.svelte @@ -8,7 +8,7 @@ class="fixed bottom-0 w-full flex justify-around bg-white border-t pb-[env(safe-area-inset-bottom,20px)] md:hidden" > {#each mobileNavItems as item (item.href)} - {@const active = isActiveRoute(item.href, $page.url.pathname)} + {@const active = isActiveRoute(item.href, $page.url.pathname, item.extraPaths)} { expect(recipesLink).not.toHaveAttribute('aria-current'); }); }); + +describe('MobileTabBar — extraPaths active state', () => { + it('marks Einstellungen active when on /household/staples', async () => { + const { readable } = await import('svelte/store'); + vi.doMock('$app/stores', () => ({ + page: readable({ url: new URL('http://localhost/household/staples') }) + })); + vi.resetModules(); + const { render: r, screen: s } = await import('@testing-library/svelte'); + const { default: TabBar } = await import('./MobileTabBar.svelte'); + r(TabBar); + const link = s.getByRole('link', { name: /einstellungen/i }); + expect(link).toHaveAttribute('aria-current', 'page'); + }); +});