test: Cypress en Playwright e2e-suites voor login, agenda, cortex en verpleegrapportage

Configs voor beide runners, login via session caching, AI-chat mocks (SSE) voor deterministische Cortex-tests. Supabase local config toegevoegd. Auth-state en reports zijn gitignored. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 23:16:17 +02:00
parent 924988dd15
commit 9195eb9fed
20 changed files with 1611 additions and 0 deletions
--- a/tests/README.md
+++ b/tests/README.md
@@ -0,0 +1,256 @@
+# Testhandleiding - Mini EPD Prototype
+
+Deze handleiding is bedoeld voor iedereen die de EPD-applicatie wil testen — ook zonder technische achtergrond. Je kunt kiezen tussen twee testtools: **Playwright** en **Cypress**. Beide doen hetzelfde — een browser automatisch bedienen alsof er een echte gebruiker achter zit — maar de interface is net iets anders.
+
+---
+
+## Mappenstructuur
+
+```
+tests/
+  playwright/               # Playwright tests
+    .auth/                  # Opgeslagen inlogsessie (automatisch aangemaakt)
+    fixtures/
+      ai-mocks.ts           # Gesimuleerde AI-antwoorden
+    auth.setup.ts           # Eenmalige inlog setup
+    login.spec.ts
+    agenda/agenda.spec.ts
+    cortex/
+      command-center.spec.ts
+      dagnotitie-flow.spec.ts
+    verpleegrapportage/overzicht.spec.ts
+
+  cypress/                  # Cypress tests (zelfde flows, andere syntax)
+    support/
+      commands.ts           # cy.login(), cy.mockDagnotitieChat()
+      e2e.ts
+    login.cy.ts
+    agenda/agenda.cy.ts
+    cortex/
+      command-center.cy.ts
+      dagnotitie-flow.cy.ts
+    verpleegrapportage/overzicht.cy.ts
+    screenshots/            # Schermafbeeldingen bij fouten (automatisch)
+    videos/                 # Video-opnames per testrun (automatisch)
+
+  test-results/             # Playwright: details bij falende tests (automatisch)
+  playwright-report/        # Playwright: HTML rapport na afloop (automatisch)
+
+  README.md                 # Dit bestand
+```
+
+---
+
+## Voorbereiding
+
+Zorg dat je twee dingen hebt gestart voordat je de tests draait:
+
+**1. De applicatie zelf**
+
+Open een terminal en typ:
+```bash
+pnpm dev
+```
+Wacht tot je ziet: `✓ Ready on http://localhost:3000`. Laat dit venster open staan.
+
+**2. De testtool naar keuze** — zie hieronder.
+
+---
+
+## Playwright gebruiken
+
+Playwright is geïnstalleerd en geconfigureerd in `playwright.config.ts`.
+
+### Starten
+
+```bash
+pnpm test:e2e:ui      # visuele UI (aanbevolen voor demo en testers)
+pnpm test:e2e         # alle tests in de terminal
+pnpm test:e2e:debug   # stap-voor-stap debuggen
+pnpm test:e2e:report  # HTML rapport na afloop bekijken
+```
+
+### De Playwright UI gebruiken
+
+```
+┌─────────────────────────┬──────────────────────────────┐
+│  Testlijst (links)      │  Browser preview (rechts)    │
+│                         │                              │
+│  ▶ auth.setup           │  Hier zie je de app         │
+│  ▶ login                │  meelopen terwijl de test    │
+│  ▶ agenda               │  wordt uitgevoerd            │
+│  ▶ cortex               │                              │
+│  ▶ verpleegrapportage   │                              │
+└─────────────────────────┴──────────────────────────────┘
+```
+
+**Stap 1 — Filter instellen**
+Zorg dat bovenaan "chromium" of "All" geselecteerd is, niet "setup". Anders zie je maar één test.
+
+**Stap 2 — Inloggen (eenmalig per sessie)**
+Klik op ▶ naast `auth.setup.ts`. Dit logt automatisch in en slaat de sessie op. Daarna starten alle andere tests al ingelogd.
+
+**Stap 3 — Test uitvoeren**
+Klik op een individuele testnaam (niet de groepsnaam). De browser aan de rechterkant springt tot leven.
+
+**Wat betekenen de kleuren?**
+- **Grijs** — test is nog niet gedraaid
+- **Groen** ✓ — test geslaagd
+- **Rood** ✗ — test gefaald, zie details onderaan
+
+---
+
+## Cypress gebruiken
+
+Cypress is de tool die jullie testers al kennen. Geconfigureerd in `cypress.config.ts`.
+
+### Starten
+
+```bash
+pnpm test:cypress:open   # visuele UI (aanbevolen voor testers)
+pnpm test:cypress:run    # alle tests headless in de terminal
+```
+
+### De Cypress UI gebruiken
+
+Na `pnpm test:cypress:open` opent de Cypress app. Kies **E2E Testing** en daarna **Chrome** als browser.
+
+```
+┌──────────────────────────────────────────────────────┐
+│  Specs (testbestanden)                               │
+│                                                      │
+│  login.cy.ts                                         │
+│  agenda / agenda.cy.ts                               │
+│  cortex / command-center.cy.ts                       │
+│  cortex / dagnotitie-flow.cy.ts                      │
+│  verpleegrapportage / overzicht.cy.ts                │
+└──────────────────────────────────────────────────────┘
+```
+
+Klik op een bestand om alle tests erin te draaien. De browser opent en je ziet links de stappen en rechts de live applicatie.
+
+**Inloggen gaat automatisch** via `cy.login()` — je hoeft niets extra te doen. De sessie wordt gecached zodat het maar één keer per testrun hoeft.
+
+---
+
+## Vergelijking Playwright vs Cypress
+
+Beide tools testen exact dezelfde flows. De syntax verschilt iets:
+
+| Actie | Playwright | Cypress |
+|---|---|---|
+| Navigeer naar pagina | `page.goto('/login')` | `cy.visit('/login')` |
+| Vind element | `page.locator('#email')` | `cy.get('#email')` |
+| Typ tekst | `page.fill('#email', '...')` | `cy.get('#email').type('...')` |
+| Klik | `page.click('button')` | `cy.contains('button').click()` |
+| Controleer zichtbaar | `expect(...).toBeVisible()` | `.should('be.visible')` |
+| Mock API | `page.route('**/api/...')` | `cy.intercept('GET', '/api/...')` |
+| Wacht op redirect | `page.waitForURL(/\/epd\//)` | `cy.url().should('match', /\/epd\//)` |
+
+---
+
+## Overzicht van alle tests
+
+### login — Inlogpagina (5 tests)
+
+| Test | Wat wordt gecontroleerd |
+|---|---|
+| Toont loginpagina correct | Email, wachtwoord en inlogknop zijn zichtbaar |
+| Foutmelding bij verkeerde gegevens | Foutmelding verschijnt bij foute combinatie |
+| Demo login knop werkt | ⚡ knop logt direct in en stuurt door naar het EPD |
+| Redirect na succesvol inloggen | Na inloggen kom je op `/epd/` terecht |
+| Beveiligde route stuurt door | Probeer `/epd/dashboard` zonder sessie → je gaat naar login |
+
+---
+
+### agenda — Agenda en afspraken (8 tests)
+
+Zoekresultaten zijn gesimuleerd met **Robbert Robot** zodat de tests niet afhankelijk zijn van live patiëntdata.
+
+**Basiscontroles**
+
+| Test | Wat wordt gecontroleerd |
+|---|---|
+| Laadt de agendapagina | Pagina opent correct met "Agenda" titel en "Nieuwe Afspraak" knop |
+| Navigatieknoppen zichtbaar | "Vandaag", "Dag" en andere knoppen aanwezig |
+
+**Afspraak aanmaken**
+
+| Test | Wat wordt gecontroleerd |
+|---|---|
+| Modal opent | Klik op "Nieuwe Afspraak" → formulier verschijnt |
+| Verplichte velden aanwezig | Patiëntzoekveld, datum, tijd en "Afspraak maken" knop zichtbaar |
+| Zoeken toont resultaat | Type "Robbert" → "Robbert Robot" verschijnt in de lijst |
+| Patiënt selecteren | Klik op naam → bevestigingskaart verschijnt in formulier |
+| Knop uitgeschakeld zonder patiënt | "Afspraak maken" is niet klikbaar zonder geselecteerde patiënt |
+| Sluiten werkt | Klik op "Sluiten" → modal verdwijnt |
+
+---
+
+### cortex/command-center — Cortex interface (5 tests)
+
+Puur UI — geen echte AI-calls.
+
+| Test | Wat wordt gecontroleerd |
+|---|---|
+| Interface laadt | Invoerveld en voorbeeldtekst zichtbaar |
+| Tekst invoeren werkt | Je kunt iets typen in het veld |
+| ⌘K opent het veld | Sneltoets focust automatisch op het invoerveld |
+| Escape wist de invoer | Escape-toets leegt het veld |
+| Voorbeeldcommandos zichtbaar | Hints zoals "notitie jan" en "overdracht" staan in beeld |
+
+---
+
+### cortex/dagnotitie-flow — Chat flows (5 tests)
+
+AI-antwoorden zijn gesimuleerd — tests werken altijd hetzelfde en hebben geen Anthropic API nodig.
+
+| Test | Scenario |
+|---|---|
+| Dagnotitie | Typ "notitie jan de vries voelt zich goed" → AI antwoordt "Genoteerd." |
+| Invoer leeg na verzenden | Na het sturen is het invoerveld weer leeg |
+| Zoeken | Typ "zoek marie" → AI antwoordt "Even kijken." |
+| Onbekende opdracht | AI vraagt om verduidelijking als de intentie onduidelijk is |
+| Meerdere berichten | Eerder gestuurde berichten blijven zichtbaar in de chat |
+
+---
+
+### verpleegrapportage — Rapportagepagina's (3 tests)
+
+| Test | Wat wordt gecontroleerd |
+|---|---|
+| Rapportage pagina laadt | `/epd/verpleegrapportage` opent zonder fout of redirect naar login |
+| Inhoud zichtbaar | Er is een patiëntenlijst of een lege-staat melding |
+| Overdracht pagina laadt | `/epd/verpleegrapportage/overdracht` opent correct |
+
+---
+
+## Als een test faalt
+
+**Playwright** schrijft bij een falende test het volgende weg in `tests/test-results/`:
+
+| Bestand | Inhoud |
+|---|---|
+| `screenshot.png` | Foto van de browser op het moment van de fout |
+| `video.webm` | Video van de volledige testrun |
+| `error-context.md` | Tekstbeschrijving van wat er misging |
+
+Bekijk het volledige HTML-rapport (in `tests/playwright-report/`):
+```bash
+pnpm test:e2e:report
+```
+
+**Cypress** schrijft bij een falende test naar `tests/cypress/screenshots/` en `tests/cypress/videos/`. In de visuele UI zie je de fout direct in beeld met een tijdlijn van alle uitgevoerde stappen.
+
+---
+
+## Veelvoorkomende problemen
+
+| Probleem | Oplossing |
+|---|---|
+| Alle tests falen meteen | `pnpm dev` draait niet — start de applicatie eerst |
+| Auth setup faalt | Supabase is gepauzeerd — herstart het project op supabase.com |
+| Alleen de auth test zichtbaar (Playwright) | Filter staat op "setup" — zet hem op "chromium" of "All" |
+| Browser preview blijft leeg (Playwright) | Klik op een individuele test (niet de groepsnaam) en druk op ▶ |
+| Cypress vraagt om browser te kiezen | Kies "Chrome" in het openingsscherm |
+| Tests werken maar app doet het niet | Tests controleren de interface, niet alle logica — meld bevindingen apart |