MVP frontend+backend

frontend/src/components/layout/Header.test.tsx

@@ -1,51 +1,77 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { BrowserRouter } from 'react-router-dom'
 import { Header } from './Header'
 
+const renderWithRouter = (element: React.ReactElement) => {
+  return render(
+    <BrowserRouter>
+      {element}
+    </BrowserRouter>,
+  )
+}
+
 describe('Header', () => {
   it('renders header with default title', () => {
-    render(<Header />)
+    renderWithRouter(<Header />)
     expect(screen.getByTestId('header-title')).toHaveTextContent('Föräldraledigplannerare')
   })
 
-  it('renders header with custom title', () => {
-    render(<Header title="Custom Title" />)
-    expect(screen.getByTestId('header-title')).toHaveTextContent('Custom Title')
+  it('renders parent name when provided', () => {
+    renderWithRouter(<Header parentName="Elin" />)
+    expect(screen.getByTestId('parent-name')).toHaveTextContent('Elin')
+  })
+
+  it('renders child select when children provided', () => {
+    const childrenList = [
+      { id: '1', name: 'Emma' },
+      { id: '2', name: 'Oscar' },
+    ]
+    renderWithRouter(<Header childrenList={childrenList} selectedChildId="1" />)
+    expect(screen.getByTestId('child-select')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('Emma')).toBeInTheDocument()
+  })
+
+  it('calls onChildSelect when child selection changes', async () => {
+    const onChildSelect = vi.fn()
+    const childrenList = [
+      { id: '1', name: 'Emma' },
+      { id: '2', name: 'Oscar' },
+    ]
+    renderWithRouter(
+      <Header childrenList={childrenList} selectedChildId="1" onChildSelect={onChildSelect} />,
+    )
+    const select = screen.getByTestId('child-select') as HTMLSelectElement
+    await userEvent.selectOptions(select, '2')
+    expect(onChildSelect).toHaveBeenCalledWith('2')
+  })
+
+  it('renders navigation links', () => {
+    renderWithRouter(<Header />)
+    expect(screen.getByText('Översikt')).toBeInTheDocument()
+    expect(screen.getByText('Kalender')).toBeInTheDocument()
+    expect(screen.getByText('Tips')).toBeInTheDocument()
+    expect(screen.getByText('Inställningar')).toBeInTheDocument()
   })
 
   it('renders logout button when onLogout provided', () => {
     const onLogout = vi.fn()
-    render(<Header onLogout={onLogout} />)
+    renderWithRouter(<Header onLogout={onLogout} />)
     const button = screen.getByTestId('logout-button')
     expect(button).toBeInTheDocument()
   })
 
   it('calls onLogout when logout button clicked', async () => {
     const onLogout = vi.fn()
-    render(<Header onLogout={onLogout} />)
+    renderWithRouter(<Header onLogout={onLogout} />)
     const button = screen.getByTestId('logout-button')
     await userEvent.click(button)
     expect(onLogout).toHaveBeenCalled()
   })
 
-  it('renders workspace selector button when onWorkspaceSelect provided', () => {
-    const onWorkspaceSelect = vi.fn()
-    render(<Header onWorkspaceSelect={onWorkspaceSelect} />)
-    expect(screen.getByTestId('workspace-selector')).toBeInTheDocument()
-  })
-
-  it('calls onWorkspaceSelect when workspace button clicked', async () => {
-    const onWorkspaceSelect = vi.fn()
-    render(<Header onWorkspaceSelect={onWorkspaceSelect} />)
-    const button = screen.getByTestId('workspace-selector')
-    await userEvent.click(button)
-    expect(onWorkspaceSelect).toHaveBeenCalled()
-  })
-
-  it('does not render buttons when no handlers provided', () => {
-    render(<Header />)
+  it('does not render logout button when not provided', () => {
+    renderWithRouter(<Header />)
     expect(screen.queryByTestId('logout-button')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('workspace-selector')).not.toBeInTheDocument()
   })
 })