M5-T01: refactor AppLayout from top bar to sidebar navigation

2026-06-22 12:26:52 +02:00
parent e49a6ad963
commit da7d0f9d62
4 changed files with 332 additions and 123 deletions
@@ -0,0 +1,126 @@
+/**
+ * Tests for AppSidebar (M5-T01).
+ *
+ * Strategy: render AppSidebar inside a minimal AppShell (required by
+ * AppShell.Navbar) + MemoryRouter so useLocation() works.
+ *
+ * Coverage:
+ * 1. All three nav items render (Home, Records, Config).
+ * 2. Home nav item is active when pathname is '/'.
+ * 3. Records nav item is active when pathname is '/records'.
+ * 4. Config nav item is active when pathname is '/config'.
+ * 5. Home is NOT active when on '/records'.
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
+import { MantineProvider, AppShell } from '@mantine/core'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import { AppSidebar } from './AppSidebar'
+
+// ---------------------------------------------------------------------------
+// Mock apiClient (LogoutButton calls POST /api/auth/logout)
+// ---------------------------------------------------------------------------
+
+vi.mock('../api/client', () => ({
+  default: {
+    POST: vi.fn(),
+    GET: vi.fn(),
+  },
+  ApiError: class ApiError extends Error {
+    status: number
+    body: unknown
+    constructor(status: number, body: unknown) {
+      super(`API error ${status}`)
+      this.name = 'ApiError'
+      this.status = status
+      this.body = body
+    }
+  },
+  registerLoginRedirect: vi.fn(),
+}))
+
+// ---------------------------------------------------------------------------
+// Helper: render AppSidebar inside the required AppShell + router providers
+// ---------------------------------------------------------------------------
+
+function renderSidebar(initialPath = '/') {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  })
+
+  return render(
+    <MantineProvider>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialPath]}>
+          <AppShell
+            navbar={{ width: 220, breakpoint: 'sm', collapsed: { mobile: false } }}
+            header={{ height: { base: 48, sm: 0 } }}
+          >
+            <AppSidebar />
+          </AppShell>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </MantineProvider>,
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('AppSidebar', () => {
+  // -------------------------------------------------------------------------
+  // 1. All nav items render
+  // -------------------------------------------------------------------------
+
+  it('renders Home, Records, and Config nav items', () => {
+    renderSidebar('/')
+    expect(screen.getByTestId('nav-home')).toBeInTheDocument()
+    expect(screen.getByTestId('nav-records')).toBeInTheDocument()
+    expect(screen.getByTestId('nav-config')).toBeInTheDocument()
+  })
+
+  // -------------------------------------------------------------------------
+  // 2. Home active on '/'
+  // -------------------------------------------------------------------------
+
+  it('marks Home nav item as active when on "/"', () => {
+    renderSidebar('/')
+    // Mantine NavLink sets data-active="true" on the active item
+    const homeLink = screen.getByTestId('nav-home')
+    expect(homeLink).toHaveAttribute('data-active', 'true')
+  })
+
+  // -------------------------------------------------------------------------
+  // 3. Records active on '/records'
+  // -------------------------------------------------------------------------
+
+  it('marks Records nav item as active when on "/records"', () => {
+    renderSidebar('/records')
+    const recordsLink = screen.getByTestId('nav-records')
+    expect(recordsLink).toHaveAttribute('data-active', 'true')
+  })
+
+  // -------------------------------------------------------------------------
+  // 4. Config active on '/config'
+  // -------------------------------------------------------------------------
+
+  it('marks Config nav item as active when on "/config"', () => {
+    renderSidebar('/config')
+    const configLink = screen.getByTestId('nav-config')
+    expect(configLink).toHaveAttribute('data-active', 'true')
+  })
+
+  // -------------------------------------------------------------------------
+  // 5. Home NOT active on '/records' (exact match guard)
+  // -------------------------------------------------------------------------
+
+  it('does NOT mark Home as active when on "/records"', () => {
+    renderSidebar('/records')
+    const homeLink = screen.getByTestId('nav-home')
+    expect(homeLink).not.toHaveAttribute('data-active', 'true')
+  })
+})