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

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

"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