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é 27x (12.57 MB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
