From 5d65cb3bcd072a8b568520b33232219ee3990550 Mon Sep 17 00:00:00 2001 From: CCS Admin Date: Thu, 26 Feb 2026 20:56:41 +0000 Subject: [PATCH] docs: add frontend testing design (Vitest + MSW + Playwright) Co-Authored-By: Claude Opus 4.6 --- .../2026-02-26-frontend-testing-design.md | 165 ++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 docs/plans/2026-02-26-frontend-testing-design.md diff --git a/docs/plans/2026-02-26-frontend-testing-design.md b/docs/plans/2026-02-26-frontend-testing-design.md new file mode 100644 index 0000000..4c7dd49 --- /dev/null +++ b/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** |