Testování v JS

Proč psát testy

Co (ne)testovat

AAA vzor

it("should summarize all numbers in an array", () => {
    // arrange
    const numbers = [1, 2, 3];
    const expectedResult = 6;

    // act
    const result = add(number);

    // assert
    expect(result).toBe(expectedResult);
});

Vytvoření testu

import {expect, it} from 'vitest';

it("should summarize all number values in an array", () => {
    const numbers = [1, 2, 3];
    const expectedResult = 6;

    // otestování kódu a získání výsledku
    const result = add(numbers);

    // porovnání výsledku s očekávaným výsledkem
    expect(result).toBe(expectedResult);
});

Seskupování testů

import {describe, expect, it} from 'vitest';

// seskupení testů pro funkci add
describe("add()", () => {
    it("should do something...", () => {
        // ... nějaký test ...
    });
    it("should do something too...", () => {
        // ... nějaký test ...
    });
});

// seskupení testů pro funkci substract
describe("substract()", () => {
    it("should do something...", () => {
        // ... nějaký test ...
    });

    // describe funkce můžeme i vnořovat
    describe("something", () => {
        // ... nějaké další testy ...
    });
});

Testování asynchronního kódu

import {expect, it} from 'vitest';

// testovací funkce jako parametr přijímá funkci, kterou zavoláme až budeme s testováním hotovi
it("should generate a token value", (done) => {
    const testUserEmail = 'test@test.com';

    generateToken(testUserEmail, (err, token) => {
        // metoda toBeDefined (a podobné metody) může vrátit error, ale tady se nacházíme v
        // callbacku, ne v it funkci, proto musíme její volání obalit do try catch bloku
        try {
            expect(token).toBeDefined();
            // pokud metoda toBeDefined nevyhodila žádný error, tak můžeme done funkci zavolat bez parametrů
            done();
        } catch(err) {
            // jako parametr předáváme do done funkce error, který metoda toBeDefined vyhodila
            done(err);
        }
    });
});

import {expect, it} from 'vitest';

it("should generate a token value", () => {
    const testUserEmail = 'test@test.com';

    // pokud testovaná funkce vrací promise, tak jej můžeme předat do expect funkce
    // - když předáváme do expect funkce promise, tak za ni můžeme řetězit resolves (pokud očekáváme že se promise splní)
    // nebo rejects (pokud očekáváme že se promise nesplní) a nakonec podmínku pro hodnotu s kterou se promise splní/nesplní
    // - funkce expect, která přijímá jako parametr promise, se musí v testovací funkci vrátit pomocí return
    return expect(generateToken(testUserEmail)).resolves.toBeDefined();
});

// pokud chceme používat async await, tak můžeme, testování je díky tomu ještě jednodušší
it("should generate a token value - v2", async () => { // testovací funkce je definována jako async (automaticky vrací promise)
    const testUserEmail = 'test@test.com';

    const token = await generateTokenPromise(testUserEmail);

    expect(token).toBeDefined();
});

Špióni

import {it, expect, vi} from 'vitest';

it("should call passed function", () => {
    // vytvoření špionážní funkce
    const callback = vi.fn();

    // předání špionážní funkce jako parametr testované funkci
    generateData(callback);

    // očekáváme že se funkce callback ve funkci generateData zavolala
    expect(callback).toBeCalled();

    // dále můžeme po předání špionážní funkce do expect funkce řetězit metody:
    // toBeCalledTimes, toBeCalledWith, atd... (více v dokumentaci)
});

DOM testování

vitest --environment happy-dom

Načtení stránky pro testování

import fs from 'fs';
import path from 'path';
import { Window } from 'happy-dom';


// získání cesty k HTML souboru
const htmlDocPath = path.join(process.cwd(), 'index.html');
// přečtení HTML souboru a uložení jeho obsahu do proměnné
const htmlDocumentContent = fs.readFileSync(htmlDocPath).toString();

// vytvoření nového window objektu
const window = new Window();
// získání documentu window objektu
const document = window.document;
// zapsání obsahu HTML souboru do documentu
document.write(htmlDocumentContent);

// změnění documentu na document virtuálního DOMu
vi.stubGlobal('document', document);

Příklad DOM testování

 /* ... kód z minulé ukázky a importy ... */

// při DOM testování bychom měli virtual DOM před každým testem resetovat
beforeEach(() => {
    // smazání obsahu documentu
    document.body.innerHTML = '';
    // zapsání obsahu HTML souboru do documentu
    document.write(htmlDocumentContent);
    // stubGlobal volat nemusíme, protože document je objekt a ten se předává adresou
});

it('should add new element to the id="todo-list" element', () => {
    // spuštění testované funkce
    addItem("create website");

    // získání elementu s ID todo-list
    const todoList = document.getElementById("todo-list");
    // získání prvního elementu z elementu s ID todo-list
    const liElement = todoList.firstElementChild;

    // očekáváme že se do elementu s ID todo-list přidal nový element
    expect(liElement).not.toBeNull();
});