test(nav): add parameterized active-state tests for all routes
Proves active state logic generalizes beyond /planner by testing all 4 mobile nav routes with writable page store. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
37
frontend/src/lib/nav/MobileTabBar.routes.test.ts
Normal file
37
frontend/src/lib/nav/MobileTabBar.routes.test.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
|
||||
const { pageStore } = vi.hoisted(() => {
|
||||
const { writable } = require('svelte/store');
|
||||
const pageStore = writable({ url: new URL('http://localhost/planner') });
|
||||
return { pageStore };
|
||||
});
|
||||
|
||||
vi.mock('$app/stores', () => ({
|
||||
page: pageStore
|
||||
}));
|
||||
|
||||
import MobileTabBar from './MobileTabBar.svelte';
|
||||
|
||||
describe('MobileTabBar active state per route', () => {
|
||||
it.each([
|
||||
['/planner', 'Planer'],
|
||||
['/recipes', 'Rezepte'],
|
||||
['/shopping', 'Einkauf'],
|
||||
['/settings', 'Einstellungen']
|
||||
])('on %s, %s is active and others are not', (route, expectedActiveLabel) => {
|
||||
pageStore.set({ url: new URL(`http://localhost${route}`) });
|
||||
const { unmount } = render(MobileTabBar);
|
||||
|
||||
const activeLink = screen.getByRole('link', { name: expectedActiveLabel });
|
||||
expect(activeLink).toHaveAttribute('aria-current', 'page');
|
||||
|
||||
const allLinks = screen.getAllByRole('link');
|
||||
const inactiveLinks = allLinks.filter((link) => link.textContent?.trim() !== expectedActiveLabel);
|
||||
for (const link of inactiveLinks) {
|
||||
expect(link).not.toHaveAttribute('aria-current');
|
||||
}
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user