frontend/src/lib/nav/MobileTabBar.routes.test.ts

@@ -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();
+	});
+});