# 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 |