Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

2. diel - Testovanie v JavaScripte - Úvod do unit testov

V minulej lekcii, Úvod do testovania v JavaScripte , sme si urobili pomerne solídny úvod do problematiky. Tiež sme si uviedli v-model, ktorý znázorňuje vzťah medzi jednotlivými výstupmi fázou návrhu a príslušnými testami.

Testy teda píšeme vždy na základe návrhu, nie implementácie. Inými slovami, robíme je na základe očakávanej funkčnosti. Tá môže byť buď priamo od zákazníka (a to v prípade akceptačných testov) alebo už od programátora (architekta), kde špecifikuje ako sa má ktorá metóda správať. Dnes sa budeme venovať práve týmto testom, ktorým hovoríme jednotkové (unit testy) a ktoré testujú detailnú špecifikáciu aplikácie, teda jej triedy.

Pamätajte, že nikdy nepíšeme testy podľa toho, ako je niečo vnútri naprogramované! Veľmi jednoducho by to mohlo naše myslenie zviesť len tým daným spôsobom a zabudli by sme na to, že metóde môžu prísť napríklad aj iné vstupy, na ktoré nie je vôbec pripravená. Testovanie s implementáciou v skutočnosti vôbec nesúvisí, vždy testujeme či je splnené zadanie.

Aké triedy testujeme

Unit testy testujú jednotlivé metódy v triedach. Pre istotu zopakujem, že nemá veľký zmysel testovať jednoúčelové metódy napr. V modeloch, ktoré napr. Len niečo vyberajú z databázy. Aby sme boli konkrétnejší, nemá zmysel testovať metódu ako je táto:

function VlozPolozku(nazev, cena) {
    var rs = new ActiveXObject("ADODB.Recordset");

    rs.Open(`${nazev} - ${cena} `, rs);
}

Metóda pridáva položku do databázy. Typicky je použitá len v nejakom formulári a ak by nefungovala, zistí to akceptačné testy, pretože by sa nová položka neobjavila v zozname. Podobných metód je v aplikácii veľa a zbytočne by sme strácali čas pokrývaním niečoho, čo ľahko pokryjeme v iných testoch.

Unit testy nájdeme najčastejšie u knižníc, teda nástrojov, ktoré programátor používa na viacerých miestach alebo dokonca vo viacerých projektoch a mali by byť 100% funkčný. Možno si spomeniete, kedy ste použili nejakú knižnicu, stiahnutú napr. Z GitHub. Veľmi pravdepodobne u nej boli tiež testy. Ak napr. Píšeme aplikáciu, v ktorej často potrebujeme nejaké matematické výpočty, napr. Faktoriál a ďalšie pravdepodobnostné funkcie, je samozrejmosťou vytvoriť si na tieto výpočty knižnicu a je veľmi dobrý nápad pokryť takú knižnicu testy.

Príklad

Ako asi tušíte, my si podobnú triedu vytvoríme a skúsime si ju otestovať. Aby sme sa nezdržovali, vytvorme si iba jednoduchú kalkulačku, ktorá bude vedieť:

  • sčítať
  • odčítať
  • násobiť
  • deliť

Vytvorenie projektu

V praxi by v triede boli nejaké zložitejšie výpočty, ale tým sa tu zaoberať nebudeme. Vytvorme si nový súbor index.html a do neho si pridajme nasledujúce riadky:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Kalkulačka</title>
        <script src="script.js"></script>
    </head>

    <body>
        <input type="number" placeholder="První číslo" id="cislo1"><br>
        <input type="number" placeholder="Druhé číslo" id="cislo2"><br>
        <select id="operace">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="button" value="Vypočítat" onclick="Vypocet()">
        <p id="vysledek">0</p>
    </body>
</html>

Asi je z kódu jasné, že ďalšie súbor bude script.js:

function Vypocet() {
    let a = parseInt(document.getElementById("cislo1").value);
    let b = parseInt(document.getElementById("cislo2").value);
    let operace = document.getElementById("operace").value;
    let vysledek = document.getElementById("vysledek");

    if (a == "" || b == "") {

    }
    else {
        switch (operace) {
            case "+":
                vysledek.innerHTML = Soucet(a, b);
            break;

            case "-":
                vysledek.innerHTML = Rozdil(a, b);
            break;

            case "*":
                vysledek.innerHTML = Soucin(a, b);
                break;

            case "/":
                vysledek.innerHTML = Podil(a, b);
                break;
        }
    }
}

function Soucet(a, b) {
    return a + b;
}

function Rozdil(a, b) {
    return a - b;
}

function Soucin(a, b) {
    return a * b;
}

function Podil(a, b) {
    if (b != 0)
        return a / b;
}

UnitTesting

Najprv potrebujeme niečo, čo nám testy vie spustiť a zobraziť nám výsledky. K tomuto využijeme populárne knižnicu Jest. V tomto článku budem pracovať s vývojovým prostredím Visual Studio Code. Jest nainštalujeme využitím terminálu, ktorý možno zobraziť klávesovou skratkou Ctrl +; vo VS Code. Do terminálu napíšeme npm install --save-dev jest a počkáme na dokončenie procesu.

Písanie testov

Aby sme mohli začať testovať, musíme si vytvoriť nový súbor v rovnakom adresári, ako je náš skript script.js. Ak ste sem prišli po absolvovaní kurzu JavaScript debuggovania, je to pre vás známa vec. Súbor teda pomenujeme rovnako, akurát k nemu pridáme koncovku čiže script.test.js. Jest podľa koncovky automaticky rozozná, že sa jedná o súbor pre testy. Najprv funkcia musíme v novovytvorenom súboru importovať:

const {Soucet, Rozdil, Soucin, Podil} = require('./script');

Funkcia musíme tiež exportovať. Pridajme si na koniec súboru script.js tieto riadky kódu:

exports.Soucet = Soucet;
exports.Rozdil = Rozdil;
exports.Soucin = Soucin;
exports.Podil = Podil;

Ako časť nastavenia si vytvoríme súbor package.json a vložíme do neho nasledujúce:

{
"scripts": {
    "test": "jest"
  }
}

To nám umožní testy spúšťať priamo v termináli. Teraz máme všetko pripravené na pridávanie samotných testov. Nižšie nájdete súbory s priloženým projektom.

V ďalšej lekcii, Testovanie v JavaScripte - Dokončenie testy a best practices , si ukážeme tvorbu unit testov.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 24x (12.57 MB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Predchádzajúci článok
Úvod do testovania v JavaScripte
Všetky články v sekcii
Testovanie v JavaScripte
Preskočiť článok
(neodporúčame)
Testovanie v JavaScripte - Dokončenie testy a best practices
Článok pre vás napísal Filip Zeman
Avatar
Užívateľské hodnotenie:
1 hlasov
Autor se věnuje vývoji aplikací v jazyce C# a Swift jak už ve sféře desktopové, tak mobilní či herní. Jako mladý člověk s nadšením sleduje nové technologie a postupy.
Aktivity