Lekce 2 - Testování v JavaScriptu - Úvod do unit testů
V minulé lekci, Úvod do testování v JavaScriptu, jsme si udělali poměrně solidní úvod do problematiky. Také jsme si uvedli v-model, který znázorňuje vztah mezi jednotlivými výstupy fází návrhu a příslušnými testy.
Testujeme funkčnost
Testy tedy píšeme vždy na základě návrhu, nikoli implementace. Jinými slovy, děláme je na základě očekávané funkčnosti. Ta může být buď přímo od zákazníka (a to v případě akceptačních testů) nebo již od programátora (architekta), kde specifikuje jak se má která metoda chovat. Dnes se budeme věnovat právě těmto testům, kterým říkáme jednotkové (unit testy) a které testují detailní specifikaci aplikace, tedy její třídy.
Pamatujte, že nikdy nepíšeme testy podle toho, jak je něco uvnitř naprogramované! Velmi jednoduše by to mohlo naše myšlení svést jen tím daným způsobem a zapomněli bychom na to, že metodě mohou přijít třeba i jiné vstupy, na které není vůbec připravená. Testování s implementací ve skutečnosti vůbec nesouvisí, vždy testujeme zda je splněno zadání.
Jaké třídy testujeme
Unit testy testují jednotlivé metody ve třídách. Pro jistotu zopakuji, že nemá valný smysl testovat jednoúčelové metody např. v modelech, které např. pouze něco vybírají z databáze. Abychom byli konkrétnější, nemá smysl testovat metodu jako je tato:
function VlozPolozku(nazev, cena) { var rs = new ActiveXObject("ADODB.Recordset"); rs.Open(`${nazev} - ${cena} `, rs); }
Metoda přidává položku do databáze. Typicky je použita jen v nějakém formuláři a pokud by nefungovala, zjistí to akceptační testy, jelikož by se nová položka neobjevila v seznamu. Podobných metod je v aplikaci hodně a zbytečně bychom ztráceli čas pokrýváním něčeho, co snadno pokryjeme v jiných testech.
Unit testy nalezneme nejčastěji u knihoven, tedy nástrojů, které programátor používá na více místech nebo dokonce ve více projektech a měly by být 100% funkční. Možná si vzpomenete, kdy jste použili nějakou knihovnu, staženou např. z GitHubu. Velmi pravděpodobně u ní byly také testy. Pokud např. píšeme aplikaci, ve které často potřebujeme nějaké matematické výpočty, např. faktoriály a další pravděpodobnostní funkce, je samozřejmostí vytvořit si na tyto výpočty knihovnu a je velmi dobrý nápad pokrýt takovou knihovnu testy.
Příklad
Jak asi tušíte, my si podobnou třídu vytvoříme a zkusíme si ji otestovat. Abychom se nezdržovali, vytvořme si pouze jednoduchou kalkulačku, která bude umět:
- sčítat
- odčítat
- násobit
- dělit
Vytvoření projektu
V praxi by ve třídě byly nějaké složitější výpočty, ale tím se
zde zabývat nebudeme. Vytvořme si nový soubor index.html a do
něj si přidejme následující řádky:
<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 další soubor 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
Prvně potřebujeme něco, co nám testy umí spustit a zobrazit nám
výsledky. K tomuto využijeme populární knihovnu Jest. V
tomto článku budu pracovat s vývojovým prostředím Visual Studio Code. Jest
nainstalujeme využitím terminálu, který lze zobrazit klávesovou zkratkou
Ctrl + ; ve VS Code. Do terminálu napíšeme
npm install --save-dev jest a počkáme na dokončení procesu.
Psaní testů
Abychom mohli začít testovat, musíme si vytvořit nový soubor ve stejném adresáři, jako je náš skript script.js. Pokud jste sem přišli po absolvování kurzu JavaScript debuggování, je to pro vás známá věc. Soubor tedy pojmenujeme stejně, akorát k němu přidáme koncovku čili script.test.js. Jest podle koncovky automaticky rozezná, že se jedná o soubor pro testy. Prvně funkce musíme v nově vytvořeném souboru importovat:
const {Soucet, Rozdil, Soucin, Podil} = require('./script');
Funkce musíme také exportovat. Přidejme si na konec souboru script.js tyto řádky kódu:
exports.Soucet = Soucet;
exports.Rozdil = Rozdil;
exports.Soucin = Soucin;
exports.Podil = Podil;
Jako část nastavení si vytvoříme soubor package.json a vložíme do něho následující:
{ "scripts": { "test": "jest" } }
To nám umožní testy spouštět přímo v terminálu. Nyní máme vše připraveno k přidávání samotných testů. Níže najdete soubory s přiloženým projektem.
V další lekci, Testování v JavaScriptu - Dokončení testů a best practices, si ukážeme tvorbu unit testů.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 27x (12.57 MB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
