feat(web): add Shell component with header, sidebar, and user menu

Persistent chrome used by every authenticated route. Sidebar hides below md:; mobile nav is a separate concern for a later plan.
2026-04-22 22:20:18 -04:00
parent 7a6aa50693
commit e1504f8e6c
4 changed files with 148 additions and 3 deletions
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+
+vi.mock('$app/state', () => ({
+  page: { url: new URL('http://localhost/') }
+}));
+
+vi.mock('$app/navigation', () => ({
+  goto: vi.fn()
+}));
+
+vi.mock('$lib/auth/store.svelte', () => ({
+  user: { value: { id: '1', username: 'alice', is_admin: false } },
+  logout: vi.fn().mockResolvedValue(undefined)
+}));
+
+import Shell from './Shell.svelte';
+import { logout } from '$lib/auth/store.svelte';
+import { goto } from '$app/navigation';
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('Shell', () => {
+  test('renders the username in the header', () => {
+    render(Shell);
+    expect(screen.getByText('alice')).toBeInTheDocument();
+  });
+
+  test('renders three nav items: Library, Search, Playlists', () => {
+    render(Shell);
+    expect(screen.getByRole('link', { name: 'Library' })).toHaveAttribute('href', '/');
+    expect(screen.getByRole('link', { name: 'Search' })).toHaveAttribute('href', '/search');
+    expect(screen.getByRole('link', { name: 'Playlists' })).toHaveAttribute('href', '/playlists');
+  });
+
+  test('user-menu "Log out" calls logout() and navigates to /login', async () => {
+    render(Shell);
+    await fireEvent.click(screen.getByRole('button', { name: /alice/i }));
+    await fireEvent.click(screen.getByRole('button', { name: /log out/i }));
+    expect(logout).toHaveBeenCalledTimes(1);
+    expect(goto).toHaveBeenCalledWith('/login', { replaceState: true });
+  });
+});