Testing

Nieuw bij dit project is het concept van (automatisch) testen, hiervoor maakt het project gebruik van Vitest, wat weer geïnspireerd is op syntax van Jest.

Er zijn een aantal voorbeelden meegeleverd: - routest.test.ts test een aantal API endpoints van het backend project of deze correct reageren op bepaalde invoer. - WelcomeService.test.ts test de session-functie WelcomeService van het frontend project. Dit is een vrij geavanceerd voorbeeld die onder andere gebruik maakt van mocking. Met mocking kun je tijdens een test de werking van een functie overschrijven, in dit geval de standaard fetch-functie. Het resultaat is dat de test nu de baas is over hoe de fetch-functie reageert zonder daarvoor een draaiend backend project nodig te hebben!

Testen is een heel belangrijk bij softwareontwikkeling! Foutloze code bestaat niet, er zullen dus altijd bugs ontstaan bij het schrijven van code. Door het schrijven van tests worden de functionaliteit en kwaliteit van de code gecontroleerd. Fouten en bugs kunnen zo gevonden worden, en uiteraard opgelost.

Testen zorgt voor betrouwbaarheid en consistentie in de software, waardoor het risico op storingen en fouten wordt verminderd. Door tests uit te voeren kunnen ontwikkelaars er zeker van zijn dat de software voldoet aan de vereisten en verwachtingen van de eind-gebruikers en/of de klant.

We testen software als kwaliteitscontrole, voor de detectie van mogelijke bugs.

In dit project ga je aan de slag met ‘unit’ testing.

Een ‘unit’ is het kleinst testbare deel van een stuk code. Bij de meeste codetalen is dit een ‘method’ of ‘functie’.

Voorbeeld van een unit test in TypeScript voor een frontend element:

import { beforeEach, describe, expect, test, vi } from "vitest";
import { deepQuerySelector, deepQuerySelectorAll } from "../__helpers__/web.helpers";

import { WelcomeComponent } from "@web/components/WelcomeComponent";

describe("WelcomeComponent", () => {
    test("should render 4 buttons", () => {
        // Arrange
        const component: WelcomeComponent = new WelcomeComponent();
        document.body.append(component);

        const result1: HTMLElement[] = deepQuerySelectorAll(document, "button");

        // Act / Assert
        expect(result1.length).toEqual(4);
    });
});

Unit test frameworks

Er zijn veel verschillende frameworks op de markt om unit tests uit te kunnen voeren. Hieronder vind je een overzicht van een aantal van die frameworks:

• Vitest
• Jest
• Mocha and Chai
• Jasmine

Het is aan te raden om de websites van deze verschillende tools te bezoeken om de verschillen en overeenkomsten tussen de verschillende tools te kunnen herkennen.

Binnen dit project maken we gebruik van het framework Vitest.

Voorbeelden

In de repository in de folder: ‘tests’ staan een aantal voorbeelden van unit testen.

Er is bijvoorbeeld het frontend test bestand ‘WelcomeComponent.test.ts’ in de subfolder ‘web’. In ‘WelcomeComponent.test.ts’ worden drie tests uitgevoerd die de werking van buttons op het component uittesten.

Er is ook een API test bestand ‘routes.test.ts’ in de subfolder ‘api’. In dit test bestand worden verschillende API routes gecontroleerd om te zien of deze de juiste response retourneren. Hier wordt gebruik gemaakt van een library genaamd ‘supertest’. Hiermee kun je het gedrag van de Express server ‘mocken’ (na doen) zonder dat de server echt hoeft te draaien.

Tests draaien

Open een nieuwe terminal window en run het NPM command: ‘npm run test’. In de package.json staat een script: “test”: “vitest”. Deze kun je in Visual Code met ‘Run Script’ activeren. De Vitest software zal het project doorzoeken voor bestanden met de naam ‘test’ of ‘spec’ in de filename.

Coverage

Als je unit tests schrijft wil je zo veel mogelijk code getest hebben. Het ‘coverage’ percentage geeft aan hoeveel procent van je code getest wordt met ‘unit tests’. Open een nieuwe terminal window en run het NPM command: ‘npm run coverage’. In de package.json staat een script: “coverage”: “vitest run –coverage”. Deze kun je in Visual Code met ‘Run Script’ activeren.

Er zal een folder worden aangemaakt genaamd ‘coverage’ en daarin een index.html bestand. Als je dit html bestand opent in een browser zul je een overzicht zien met alle code bestanden. Per bestand zul je het percentage van ‘coverage’ zien.

Een standaard streefpercentage voor de coverage van alle bestanden is 80%. Er zijn natuurlijk situaties waar je hiervan kan afwijken.