test-tooling.md

Test-tooling

Doel van dit document is beschrijven welke tooling we voor welke tests gebruiken.

De nadruk in dit document ligt op testautomatisering, maar zoals in ons "Testen en kwaliteit"-document staat: "handmatig en automatisch testen gaan samen".

Tests uitgevoerd door externe partijen (pen test, wettelijke toets) zijn niet opgenomen in dit document.

Frontend

Frontend "units"

• Containercomponenten: zijn verantwoordelijk voor het ophalen en weergeven van data, zoals pagina's.
• Presentatiecomponenten: zijn verantwoordelijk voor het weergeven van data.
• Overige units: bijvoorbeeld API code, utility functies.

Tooling

• eslint: Linting
• prettier: Formatting
• Vitest: Test runner voor alle tests behalve Playwright-tests
• Playwright: Test framework inclusief runner tegen browser-engine
• Mock Service Worker: Mock server
• React Testing Library: Library voor het testen van React componenten
• Ladle: Library voor het ontwikkelen en testen van alleenstaande componenten (alternatief voor Storybook)

Tests voor presentatiecomponenten

Omdat presentatiecomponenten puur de data weergeven die ze krijgen, kunnen ze met Ladle getest worden. Ze hebben geen backend of mock server nodig.

---
title: Presentatiecomponenten
---
flowchart LR
    rtl([React Testing Library])
    playwright([Playwright])
    component(Component)

    subgraph ladle-story [Ladle story]
        component
    end

    style ladle-story fill:#ececff,stroke:#c5b9de

    rtl --> component
    playwright --> component

Loading

Voor de tests met Playwright of een browser, wordt de story geserved door de ladle dev server.

---

Tests voor containercomponenten

Containercomponenten hebben interacties met de backend voor hun data. Ze hebben dus de backend of een mock server nodig.

---
title: Containercomponenten
---
flowchart LR
    component(Component)

    rtl([React Testing Library])
    msw([Mock Service Worker])

    rtl --> component
    component --> msw

Loading

---

---
title: React integration test
---
flowchart LR
    fe(Frontend)

    rtl([React Testing Library])
    msw([Mock Service Worker])

    rtl --> fe

    fe --> msw

Loading

Plan is om binnenkort deze tests te vervangen door Playwright tests. (issue 898)

Backend

• Linting: Rust compiler en clippy
• Formatting: rustfmt
• Test runner: cargo test
• Unit en integratie-tests: geen additionele libraries of tools nodig
• API client: reqwest

Als de performance van cargo test een probleem wordt, kunnen we overstappen op cargo-nextest.

---
title: API integration tests
---
flowchart LR
    be(Backend)
    db[(Database)]

    api-client([API client])

    api-client --> be

    be --> db

Loading

End-to-end

Test runner: Playwright

---
title: End-to-end tests
---
flowchart LR
    fe(Frontend)
    be(Backend)
    db[(Database)]

    playwright([Playwright])

    playwright --> fe

    subgraph Abacus
        fe -.- be
        be -.- db
    end

Loading

Security

• GitHub Dependabot
• GitHub Code Scanning
• GitHub Secret Scanning

Performance

Nog te bepalen.

• Benchmarking opties:
  • cargo bench
  • criterion.rs
  • divan
• Load en stress testen:
  • grote data sets
  • opties voor API calls
    • JMeter
    • Locust

Toegankelijkheid

Nog te bepalen.

• Opties:
  • Google Lighthouse
  • Axe (ondersteund door Ladle)
  • Pa11y