test(frontend): Sprint 5 — Vitest setup, 14 component/API tests, Viewer memo

- Setup Vitest + React Testing Library + jsdom
- 7 API client tests (endpoints, ApiError, extractDetail, delete)
- 3 RetroButton tests (render, onClick, disabled)
- 2 RetroTextarea tests (accessible label linkage)
- 2 RetroSelect tests (accessible label, options rendering)
- Memoize Viewer.tsx source with useMemo

https://claude.ai/code/session_012NCh8yLxMXkRmBYQgHCTik

frontend/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "openseadragon": "^4.1.0",
@@ -14,14 +15,19 @@
     "react-router-dom": "^7.14.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/openseadragon": "^3.0.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
+    "jsdom": "^29.0.2",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "vitest": "^4.1.4"
   }
 }

frontend/src/components/Viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type FC } from 'react'
+import { useEffect, useMemo, useRef, type FC } from 'react'
 import OpenSeadragon from 'openseadragon'
 import { RetroButton } from './retro'
 
@@ -39,7 +39,10 @@ const Viewer: FC<Props> = ({ iiifServiceUrl, fallbackImageUrl, onViewerReady })
   }, [])
 
   // Source à ouvrir : préférer le service IIIF (zoom tuilé), sinon image statique
-  const source = iiifServiceUrl || fallbackImageUrl || ''
+  const source = useMemo(
+    () => iiifServiceUrl || fallbackImageUrl || '',
+    [iiifServiceUrl, fallbackImageUrl]
+  )
 
   useEffect(() => {
     const viewer = viewerRef.current

frontend/src/components/retro/__tests__/RetroButton.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { RetroButton } from '../index'
+
+test('renders button with text', () => {
+  render(<RetroButton>Click me</RetroButton>)
+  expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
+})
+
+test('calls onClick when clicked', async () => {
+  const handleClick = vi.fn()
+  render(<RetroButton onClick={handleClick}>Click</RetroButton>)
+  await userEvent.click(screen.getByRole('button'))
+  expect(handleClick).toHaveBeenCalledOnce()
+})
+
+test('disabled button does not call onClick', async () => {
+  const handleClick = vi.fn()
+  render(<RetroButton disabled onClick={handleClick}>Click</RetroButton>)
+  await userEvent.click(screen.getByRole('button'))
+  expect(handleClick).not.toHaveBeenCalled()
+})

frontend/src/components/retro/__tests__/RetroSelect.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { RetroSelect } from '../index'
+
+test('select has accessible label', () => {
+  render(
+    <RetroSelect
+      label="Profil"
+      options={[{ value: 'a', label: 'Option A' }]}
+      value="a"
+      onChange={() => {}}
+    />
+  )
+  expect(screen.getByLabelText('Profil')).toBeInTheDocument()
+})
+
+test('renders all options', () => {
+  render(
+    <RetroSelect
+      label="Test"
+      options={[
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+      ]}
+      value="a"
+      onChange={() => {}}
+    />
+  )
+  expect(screen.getAllByRole('option')).toHaveLength(2)
+})

frontend/src/components/retro/__tests__/RetroTextarea.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react'
+import { RetroTextarea } from '../index'
+
+test('textarea has accessible label', () => {
+  render(<RetroTextarea label="Notes" />)
+  expect(screen.getByLabelText('Notes')).toBeInTheDocument()
+  expect(screen.getByLabelText('Notes').tagName).toBe('TEXTAREA')
+})
+
+test('renders without label', () => {
+  render(<RetroTextarea placeholder="Type here" />)
+  expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument()
+})

frontend/src/lib/__tests__/api.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+// We need to mock fetch before importing the module,
+// and also need to handle import.meta.env used by the module.
+
+// Mock global fetch
+const mockFetch = vi.fn()
+vi.stubGlobal('fetch', mockFetch)
+
+// Dynamic import so our fetch stub is in place
+const api = await import('../api')
+
+beforeEach(() => {
+  mockFetch.mockReset()
+})
+
+describe('fetchCorpora', () => {
+  it('calls the correct endpoint', async () => {
+    const mockCorpora = [
+      { id: '1', slug: 'test', title: 'Test', profile_id: 'medieval-illuminated', created_at: '', updated_at: '' },
+    ]
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(mockCorpora),
+    })
+
+    const result = await api.fetchCorpora()
+
+    expect(mockFetch).toHaveBeenCalledOnce()
+    expect(mockFetch).toHaveBeenCalledWith('/api/v1/corpora')
+    expect(result).toEqual(mockCorpora)
+  })
+
+  it('throws ApiError on non-200 response', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 404,
+    })
+
+    await expect(api.fetchCorpora()).rejects.toThrow(api.ApiError)
+    await mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+    })
+    await expect(api.fetchCorpora()).rejects.toThrow('HTTP 500')
+  })
+})
+
+describe('ApiError', () => {
+  it('has correct name and status', () => {
+    const err = new api.ApiError(422, 'Validation failed')
+    expect(err.name).toBe('ApiError')
+    expect(err.status).toBe(422)
+    expect(err.message).toBe('Validation failed')
+    expect(err).toBeInstanceOf(Error)
+  })
+})
+
+describe('post helper — error extraction', () => {
+  it('extracts string detail from FastAPI error', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: () => Promise.resolve({ detail: 'Corpus not found' }),
+    })
+
+    await expect(
+      api.createCorpus({ slug: 'x', title: 'X', profile_id: 'p' })
+    ).rejects.toThrow('Corpus not found')
+  })
+
+  it('extracts array detail from FastAPI validation error', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 422,
+      json: () =>
+        Promise.resolve({
+          detail: [
+            { loc: ['body', 'slug'], msg: 'field required', type: 'missing' },
+          ],
+        }),
+    })
+
+    await expect(
+      api.createCorpus({ slug: '', title: '', profile_id: '' })
+    ).rejects.toThrow('body \u2192 slug : field required')
+  })
+
+  it('falls back to HTTP status when json parsing fails', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      json: () => Promise.reject(new Error('not json')),
+    })
+
+    await expect(
+      api.createCorpus({ slug: 'x', title: 'X', profile_id: 'p' })
+    ).rejects.toThrow('HTTP 500')
+  })
+})
+
+describe('deleteCorpus', () => {
+  it('calls DELETE on the correct endpoint', async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true })
+
+    await api.deleteCorpus('abc-123')
+
+    expect(mockFetch).toHaveBeenCalledWith('/api/v1/corpora/abc-123', {
+      method: 'DELETE',
+    })
+  })
+})

frontend/src/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

frontend/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: './src/test-setup.ts',
+    globals: true,
+  },
+})