Testování

Nastavení

Testování aplikací v Mithril.js je poměrně jednoduché. Nejjednodušší způsob, jak začít, je s ospec, mithril-query a JSDOM. Instalace těchto nástrojů je snadná: otevřete terminál a spusťte tento příkaz.

npm install --save-dev ospec mithril-query jsdom

Jejich nastavení je také jednoduché a vyžaduje několik krátkých kroků:

1. Přidejte "test": "ospec" do vašich npm skriptů v souboru package.json. Bude to vypadat přibližně takto (může obsahovat i další pole relevantní pro váš projekt):

{
  "name": "my-project",
  "scripts": {
    "test": "ospec --require ./test-setup.js"
  }
}

2. Vytvořte soubor pro nastavení, test-setup.js, který vypadá takto:

var o = require('ospec');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM('', {
  // Abychom mohli získat `requestAnimationFrame`
  pretendToBeVisual: true,
});

// Nastavte globální proměnné, které Mithril.js potřebuje k fungování. První dvě proměnné jsou navíc často
// užitečné právě pro testy.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// Načtěte Mithril.js, abyste ověřili jeho správné fungování.
require('mithril');

// A nyní se ujistěte, že JSDOM se uzavře, když testy skončí.
o.after(function () {
  dom.window.close();
});

3. Vytvořte komponentu, například src/my-component.js, která vypadá takto:

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', vnode.attrs.text);
    },
  };
}

module.exports = MyComponent;

4. A nakonec vytvořte testovací soubor, například src/tests/my-component.js, který vypadá takto:

var mq = require('mithril-query');
var o = require('ospec');

var MyComponent = require('../my-component.js');

o.spec('MyComponent', function () {
  o('things are working', function () {
    var out = mq(MyComponent, { text: 'What a wonderful day to be alive!' });
    out.should.contain('day');
  });
});

Jakmile máte vše nastaveno, spusťte tento příkaz ve stejném terminálu, ve kterém jste vše instalovali.

npm test

Za předpokladu, že máte vše správně nastaveno, měli byste obdržet výstup, který vypadá nějak takto:

––––––
All 1 assertions passed in 0ms

Doporučené postupy

Testování je ve většině případů poměrně přímočaré. Každý test se obvykle skládá ze tří částí: nastavení stavu, spuštění kódu a kontrola výsledků. Při testování je ale třeba mít na paměti několik věcí, abyste dosáhli co nejlepších výsledků a ušetřili si spoustu času.

1. V první řadě je vhodné psát testy co nejdříve v procesu vývoje. Nemusíte je psát okamžitě, ale alespoň je pište souběžně s psaním kódu. Pokud něco nefunguje tak, jak jste si mysleli, strávíte tak 5 minut zjišťováním, co se děje, namísto 5 dnů o 6 měsíců později, když se snažíte vydat ten úžasný nápad na aplikaci, který je nyní zcela nefunkční. Chcete se takové situaci vyhnout.

2. Testujte API, testujte chování, ale netestujte implementaci. Pokud potřebujete otestovat, zda se při určité akci spustí událost, je to v pořádku a můžete to udělat. Ale netestujte celou strukturu DOM ve svém testu. Nechcete se dostat do situace, kdy musíte přepsat 5 různých testů jen proto, že jste přidali jednoduchou třídu související se stylem. Také nechcete přepisovat všechny testy jen proto, že jste do objektu přidali novou metodu instance.

3. Nebojte se opakování a abstrahujte pouze tehdy, když doslova děláte totéž desítky až stovky krát ve stejném souboru, nebo když explicitně generujete testy. V běžném kódu je dobré oddělit opakující se logiku (více než 2-3 opakování) a abstrahovat ji do funkce. Při testování vám ale i přes opakující se logiku redundance pomáhá s kontextem při řešení problémů s testy. Pamatujte: testy jsou specifikace, nikoli běžný kód.

Jednotkové testování

Jednotkové testování izoluje části aplikace, obvykle jeden modul, ale někdy i jednu funkci, a testuje je jako samostatnou "jednotku". Kontroluje, zda při daném konkrétním vstupu a počátečním stavu generuje požadovaný výstup a vedlejší účinky. Může to znít složitě, ale slibuji, že to tak není. Zde je několik jednotkových testů pro operátor + v JavaScriptu, které se používají pro čísla:

o.spec('addition', function () {
  o('works with integers', function () {
    o(1 + 2).equals(3);
  });

  o('works with floats', function () {
    // Jo, díky IEEE-754 floating point za to, že jsi divný.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

Stejně jako můžete jednotkově testovat jednoduché věci, můžete testovat i komponenty Mithril.js. Předpokládejme, že máte tuto komponentu:

// MyComponent.js
var m = require('mithril');

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', [
        vnode.attrs.type === 'goodbye' ? 'Goodbye, world!' : 'Hello, world!',
      ]);
    },
  };
}

module.exports = MyComponent;

Můžete snadno vytvořit několik jednotkových testů pro tuto komponentu.

var mq = require('mithril-query');
var MyComponent = require('./MyComponent');

o.spec('MyComponent', function () {
  o("says 'Hello, world!' when `type` is `hello`", function () {
    var out = mq(MyComponent, { type: 'hello' });
    out.should.contain('Hello, world!');
  });

  o("says 'Goodbye, world!' when `type` is `goodbye`", function () {
    var out = mq(MyComponent, { type: 'goodbye' });
    out.should.contain('Goodbye, world!');
  });

  o("says 'Hello, world!' when no `type` is given", function () {
    var out = mq(MyComponent);
    out.should.contain('Hello, world!');
  });
});

Z testů je patrné, jak má komponenta fungovat, a komponenta tak skutečně funguje.