mirror of
https://github.com/complexcaresolutions/dak.c2s.git
synced 2026-03-17 20:43:41 +00:00
165 lines
5.7 KiB
Markdown
165 lines
5.7 KiB
Markdown
# 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** |
|