docs: add frontend testing design (Vitest + MSW + Playwright)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/plans/2026-02-26-frontend-testing-design.md

@@ -0,0 +1,165 @@
+# Frontend Testing Design — Vitest + MSW + Playwright
+
+**Ziel:** Vollständige Testabdeckung des Frontends — Hooks, Services, Pages (Unit/Integration) + E2E Browser-Tests.
+
+**Stack:** Vitest, @testing-library/react, MSW (Mock Service Worker), Playwright
+
+---
+
+## 1. Test-Infrastruktur
+
+### Dependencies
+
+```
+# Unit/Integration
+vitest @vitest/coverage-v8 jsdom
+@testing-library/react @testing-library/jest-dom @testing-library/user-event
+msw
+
+# E2E
+@playwright/test
+```
+
+### Konfiguration
+
+- `vitest.config.ts` — erweitert `vite.config.ts`, environment: `jsdom`, setup-Datei
+- `frontend/src/test/setup.ts` — `@testing-library/jest-dom` Matchers, MSW Server beforeAll/afterEach/afterAll
+- `frontend/src/test/mocks/handlers.ts` — MSW Request-Handler für alle API-Endpoints
+- `frontend/src/test/mocks/server.ts` — MSW Server-Instanz
+- `frontend/src/test/mocks/data.ts` — Mock-Daten (Cases, Users, Dashboard, etc.)
+- `frontend/src/test/utils.tsx` — `renderWithProviders()` Wrapper (QueryClientProvider + AuthContext + BrowserRouter)
+- `playwright.config.ts` — E2E Config, baseURL `http://localhost:5173`
+
+### Verzeichnisstruktur
+
+```
+frontend/src/test/
+├── setup.ts
+├── utils.tsx
+└── mocks/
+    ├── server.ts
+    ├── handlers.ts
+    └── data.ts
+
+frontend/src/hooks/__tests__/
+├── useDashboard.test.ts
+├── useCases.test.ts
+├── useDisclosures.test.ts
+├── useAuditLog.test.ts
+├── useUsers.test.ts
+├── useNotifications.test.ts
+└── useReports.test.ts
+
+frontend/src/services/__tests__/
+├── api.test.ts
+├── authService.test.ts
+└── disclosureService.test.ts
+
+frontend/src/pages/__tests__/
+├── DashboardPage.test.tsx
+├── CasesPage.test.tsx
+├── DisclosuresPage.test.tsx
+├── AdminAuditPage.test.tsx
+├── AdminUsersPage.test.tsx
+├── ReportsPage.test.tsx
+├── LoginPage.test.tsx
+├── ImportPage.test.tsx
+├── AccountPage.test.tsx
+└── ProtectedRoute.test.tsx
+
+frontend/e2e/
+├── auth.spec.ts
+├── dashboard.spec.ts
+├── cases.spec.ts
+└── admin.spec.ts
+```
+
+### Scripts
+
+```json
+"test": "vitest run",
+"test:watch": "vitest",
+"test:coverage": "vitest run --coverage",
+"test:e2e": "playwright test"
+```
+
+---
+
+## 2. Unit-Tests — Custom Hooks (~50 Tests)
+
+Alle Hooks mit `renderHook()` + MSW testen. Frischer QueryClient pro Test.
+
+| Hook | Tests |
+|------|-------|
+| `useDashboard(jahr)` | Erfolg, Error, Jahr-Wechsel refetcht |
+| `useCases(filters)` | Erfolg, leer, Filter-Varianten, `enabled: false` |
+| `usePendingIcdCases()` | Erfolg, leer, `enabled: false` |
+| `useCaseUpdate()` | Erfolg, Error, Cache-Invalidierung `['cases']` |
+| `useKvnrUpdate()` | Erfolg, Error, Cache-Invalidierung `['cases']` |
+| `useIcdUpdate()` | Erfolg, Error, invalidiert `['cases']` + `['dashboard']` |
+| `useDisclosures(status)` | Erfolg, leer, Status-Filter |
+| `useReviewDisclosure()` | Approve, Reject, Error, invalidiert `['disclosures']` + `['notifications']` |
+| `useAuditLog(filters)` | Erfolg, leer, Filter-Kombinationen |
+| `useUsers()` | Erfolg, leer |
+| `useCreateUser()` | Erfolg, Validation-Error, Cache-Invalidierung |
+| `useUpdateUser()` | Erfolg, Error, Cache-Invalidierung |
+| `useNotifications()` | Erfolg, Polling, markAsRead, markAllAsRead, refresh |
+| `useReports()` | Erfolg, leer |
+| `useGenerateReport()` | Erfolg, Error, Cache-Invalidierung |
+| `useDeleteReports()` | Erfolg, Error, Cache-Invalidierung |
+
+---
+
+## 3. Unit-Tests — Services (~25 Tests)
+
+Services mit MSW testen (echte HTTP-Requests abfangen).
+
+| Service | Tests |
+|---------|-------|
+| **api.ts** | Token-Attachment, 401 → Auto-Refresh, Refresh-Failure → Redirect, Base-URL |
+| **authService.ts** | login Erfolg/Error, register, logout (Token-Cleanup), refreshAccessToken, getProfile, updateProfile, MFA-Endpoints (setup, verify, disable), uploadAvatar |
+| **disclosureService.ts** | requestDisclosure Erfolg/Error, getDisclosureRequests mit Status, reviewDisclosure approve/reject |
+
+---
+
+## 4. Integration-Tests — Pages (~60 Tests)
+
+Pages mit `renderWithProviders()` rendern (QueryClient + Router + Auth). MSW liefert Daten.
+
+| Page | Tests |
+|------|-------|
+| **DashboardPage** | KPIs laden, Jahres-Wechsel, Tortendiagramm (0-Werte gefiltert), Skeleton, Error |
+| **CasesPage** | Liste rendert, Filter (Suche, Jahr, Fallgruppe, ICD), Pagination, Detail-Sheet, Inline-Edit, ICD-Save, pendingIcdOnly |
+| **DisclosuresPage** | Liste, Approve/Reject-Buttons, leer, Loading |
+| **AdminAuditPage** | Einträge laden, Filter, Reset, Pagination, Expandable |
+| **AdminUsersPage** | Liste, Create-Dialog, Edit-Dialog, Validation, isPending |
+| **ReportsPage** | Liste, Generieren, Download, Löschen, Checkbox |
+| **LoginPage** | Erfolg → Redirect, Fehler, Validation |
+| **ImportPage** | Upload, Preview, Bestätigung, Fehler |
+| **AccountPage** | Profil, Passwort, MFA, Avatar |
+| **ProtectedRoute** | Redirect ohne Auth, Admin-Guard, Loading |
+
+---
+
+## 5. E2E-Tests — Playwright (~20 Tests)
+
+Gegen echtes Frontend + Backend. Braucht laufendes Dev-Backend auf `localhost:8000` und Test-User.
+
+| Spec | Szenarien |
+|------|-----------|
+| **auth.spec.ts** | Login gültig → Dashboard, Login ungültig → Error, Logout → Redirect, Protected Route → Redirect |
+| **dashboard.spec.ts** | KPI-Cards sichtbar, Jahres-Wechsel, Tortendiagramm aktive Fallgruppen |
+| **cases.spec.ts** | Liste lädt, Suche filtert, Detail-Sheet, Feld bearbeiten + speichern, ICD speichern |
+| **admin.spec.ts** | User anlegen, User bearbeiten, Audit-Log filtern, Disclosure approve/reject |
+
+---
+
+## Gesamtumfang
+
+| Kategorie | Anzahl Tests |
+|-----------|-------------|
+| Hook Unit-Tests | ~50 |
+| Service Unit-Tests | ~25 |
+| Page Integration-Tests | ~60 |
+| E2E Browser-Tests | ~20 |
+| **Gesamt** | **~155** |