Teststrategie en suite

De VEMAP frontend test suite is gebaseerd op Vitest 4 en gebruikt de jsdom test runner. De test suite is geconfigureerd met de vitest.config.mjs bestand.

Testsuite statistieken

Metriek	Waarde
Totaal aantal testbestanden	90
Totaal aantal tests	944
Test framework	`Vitest v4.0.1`
Totale testduur	~17s
Test executietijd	~3.8s
Overhead tijd	~13.2s
Gemiddelde tijd per test	~4ms

Teststrategie

Frameworkkeuze: `Vitest`

Voor dit project is gekozen voor Vitest als test framework vanwege de volgende voordelen:

1. Leesbaarheid

Vitest biedt een duidelijke en intuïtieve API die makkelijk te begrijpen is voor developers:

Eenvoudige describe, it, en expect syntax
Duidelijke error messages en stack traces
Overzichtelijke test output

2. Laagdrempeligheid

Ideaal voor developers die niet of nauwelijks bekend zijn met unit testing:

Minimale leercurve door bekende syntax
Uitgebreide documentatie en voorbeelden
Geen complexe configuratie vereist

3. Moderne JavaScript compatibiliteit

Vitest werkt naadloos met moderne JavaScript features zonder aanvullende configuratie:

Native ES modules ondersteuning
TypeScript out-of-the-box (handig vanwege Astro.js’s gebruik van TypeScript)
Modern bundling met Vite
Top-level await ondersteuning

Testprincipes

Focus op unittests

Elke functie en component wordt individueel getest
Tests zijn geïsoleerd en onafhankelijk
Mocking wordt gebruikt voor externe dependencies

Testdekking

Alle kritieke business logic wordt getest
Edge cases en error scenarios worden gedekt
Publieke API’s hebben volledige test coverage

Testorganisatie

Tests worden gegroepeerd per domein (alpine, services, utils, etc.)
Consistente naamgeving: *.test.js
Duidelijke beschrijvingen van test cases

Mocking strategie

Module mocking

vi.mock("@utils/charts/factory.js", () => ({
  createChart: vi.fn(),
}));

Functie mocking

const mockFunction = vi.fn();
mockFunction.mockReturnValue(expectedValue);

Spy gebruik

const spy = vi.spyOn(object, "method");
expect(spy).toHaveBeenCalledWith(expectedArgs);

Test Structuur

Arrange-Act-Assert Pattern

it("should validate user input", () => {
  // Arrange
  const input = "test@example.com";
  const validator = new EmailValidator();

  // Act
  const result = validator.validate(input);

  // Assert
  expect(result).toBe(true);
});

Beschrijvende Test Namen

Test namen beschrijven wat er wordt getest
Gebruik van “should” voor duidelijkheid
Specifieke scenario’s worden expliciet genoemd

Integratie in deploystrategie

Pre-deploy Testing

Alle tests moeten slagen voordat deployment
Automatische test execution bij pull requests
Coverage reporting voor kwaliteitsbewaking

Test Commands

npm test              # Alle tests
npm test -- --watch   # Watch mode
npm run test:coverage # Met coverage

Quick start

Run alle tests: npm run test
Locatie structuur:
- test/alpine voor Alpine component data/tests
- test/stores, test/services, test/utils voor state, service en helper logica
- test/config, test/middleware, test/parser voor overige infrastructuur
Framework: Vitest 4 met jsdom en test/setup.js voor globale mocks.

Gebruik npx vitest --ui voor gerichte debugging en volg coverage-rapporten onder coverage/.

Testfolder structuur

Directorytest/
- README.md
- setup.js
- Directoryalpine/
  - Directoryauth/
    challenge.data.test.js
    forgotPassword.data.test.js
    login.data.test.js
    resetPassword.data.test.js
  - Directorycharts/
    Directoryadmin/
    emailsPerDay.data.test.js
    loginsPerDay.data.test.js
    usersAndTenants.data.test.js
    usersPerTenant.data.test.js
    Directorymanager/
    completionRatioPerMileStone.data.test.js
    costPerClosure.data.test.js
    deadlineHitRatio.data.test.js
    firstTimeRight.data.test.js
    leadTimeVkmProcess.data.test.js
    openTaskTrend.data.test.js
    projectStatus.data.test.js
    slaComplianceTrend.data.test.js
    vkmStability.data.test.js
    Directoryorganisation/
    emailsSent.data.test.js
    queuePerStakeholder.data.test.js
    responseTimePerStakeholder.data.test.js
    Directoryshared/
    barChart.data.test.js
    donutChart.data.test.js
    lineChart.data.test.js
    pieChart.data.test.js
  - Directoryforms/
    client.data.test.js
    closure.data.test.js
    comment.data.test.js
    project.data.test.js
    projectManagers.data.test.js
    recipients.data.test.js
    stakeholders.data.test.js
    supportFileUpload.data.test.js
    user.data.test.js
    userBulk.data.test.js
    vkm.data.test.js
  - Directorymail/
    mailEditor.data.test.js
  - Directorystats/
    stats.data.test.js
  - Directoryviews/
    closure.data.test.js
    closureReferences.data.test.js
    environment.data.test.js
    event.data.test.js
    files.data.test.js
    project.data.test.js
    tabs.data.test.js
    task.data.test.js
    user.data.test.js
- Directoryconfig/
  - app.test.js
  - environments.test.js
  - index.test.js
- Directorymiddleware/
  - auth.middleware.test.js
- Directoryparser/
  - papaparse.init.test.js
- Directoryservices/
  - auth.service.test.js
  - fileUpload.service.test.js
- Directorystores/
  - calendar.store.test.js
  - closure.store.test.js
  - closureReferences.store.test.js
  - tenant.store.test.js
  - event.store.test.js
  - fileModal.store.test.js
  - files.store.test.js
  - formModal.store.test.js
  - metrics.store.test.js
  - modal.store.test.js
  - notification.store.test.js
  - period.store.test.js
  - project.store.test.js
  - slideover.store.test.js
  - task.store.test.js
  - user.store.test.js
- Directoryutils/
  - Directorycharts/
    config.test.js
    data.test.js
    factory.test.js
  - Directoryhttp/
    client.helpers.test.js
    client.test.js
    headers.test.js
  - app-version.test.js
  - auth.test.js
  - constants.test.js
  - cookies.test.js
  - datepicker.test.js
  - dates.test.js
  - errors.test.js
  - events.test.js
  - files.test.js
  - fileUpload.test.js
  - formatters.test.js
  - functions.test.js
  - session.test.js
  - strings.test.js
  - tokens.test.js
  - validation.test.js