Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

Lekce 2 - Testování v JavaScriptu - Úvod do unit testů Nové

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 3x (12.57 MB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Úvod do testování v JavaScriptu
Všechny články v sekci
Testování v JavaScriptu
Článek pro vás napsal Filip Zeman
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji aplikací v jazyce C# jak už ve sféře desktopové, tak mobilní či herní. Jako mladý člověk s nadšením sleduje nové technologie a postupy.
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!