Tesztelés

Beállítás

A Mithril.js alkalmazások tesztelése viszonylag egyszerű. A legegyszerűbb módja a kezdésnek az ospec, a mithril-query és a JSDOM használata. Ezek telepítése egyszerű: nyisson meg egy terminált, és futtassa ezt a parancsot.

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

A beállítása is viszonylag egyszerű, csupán néhány lépést igényel:

1. Adjon hozzá egy "test": "ospec" sort az npm szkriptjeihez a package.json fájlban. Ez valahogy így fog kinézni, kiegészítve a projektre vonatkozó mezőkkel:

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

2. Hozzon létre egy beállító fájlt test-setup.js néven, amely így néz ki:

var o = require('ospec');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM('', {
  // A `requestAnimationFrame` használatához
  pretendToBeVisual: true,
});

// Töltse ki a globális változókat, amelyekre a Mithril.js-nek szüksége van a működéshez.
// Ezenkívül az első kettő gyakran hasznos a tesztekben.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// A Mithril.js betöltése, hogy megbizonyosodjunk a helyes betöltésről.
require('mithril');

// Végül gondoskodjunk arról, hogy a JSDOM leálljon a tesztek befejeztével.
o.after(function () {
  dom.window.close();
});

3. Hozzon létre egy komponenst, például src/my-component.js néven, amely így néz ki:

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

module.exports = MyComponent;

4. Végül hozzon létre egy tesztfájlt, például src/tests/my-component.js néven, amely így néz ki:

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

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

o.spec('MyComponent', function () {
  o('minden rendben van', function () {
    var out = mq(MyComponent, { text: 'Milyen csodálatos nap ma!' });
    out.should.contain('day');
  });
});

Miután mindezt beállította, ugyanabban a terminálban, ahonnan mindent telepített, futtassa ezt a parancsot:

npm test

Feltéve, hogy mindent megfelelően állított be, valami ilyesmi kimenetet kell kapnia:

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

Bevált gyakorlatok

A tesztelés a legtöbb esetben viszonylag egyszerű. Minden teszt általában három részből áll: állapot beállítása, kód futtatása, eredmények ellenőrzése. De van néhány dolog, amit szem előtt kell tartania a tesztelés során, hogy a lehető legtöbbet hozza ki belőle, és hogy sok időt takarítson meg.

1. Először is, a teszteket a lehető legkorábban érdemes megírni a fejlesztési folyamatban. Nem kell azonnal megírnia a teszteket, de legalább a teszteket a kód írásával párhuzamosan érdemes megírni. Így, ha a dolgok nem úgy működnek, ahogy gondolta, most 5 percet tölt azzal, hogy pontosan tudja, mi történik, ahelyett, hogy 6 hónappal később 5 napot töltene azzal, amikor megpróbálja kiadni azt a csodálatos alkalmazásötletet, amely most látványosan elromlott. Nem akar ilyen helyzetbe kerülni.

2. Tesztelje az API-t, tesztelje a viselkedést, de ne tesztelje a megvalósítást. Ha tesztelnie kell, hogy egy esemény kiváltódik-e, ha egy adott művelet történik, az rendben van, és nyugodtan tegye meg. De ne tesztelje a tesztben a teljes DOM-struktúrát. Nem szeretné, ha 5 különböző teszt egy részét kellene átírnia egy egyszerű stílusosztály hozzáadása miatt. Ahogy azt sem, hogy az összes tesztet át kelljen írnia egy objektum új példánymetódusa miatt.

3. Ne féljen megismételni magát, és csak akkor absztraháljon, ha szó szerint ugyanazt csinálja tízszer vagy százszor ugyanabban a fájlban, vagy ha kifejezetten teszteket generál. Általában a kódban jó ötlet meghúzni egy vonalat, ha ugyanazt a logikát többször, mint 2-3 alkalommal ismétli meg, és egy függvénybe absztrahálja, de amikor tesztel, még akkor is, ha sok a duplikált logika, ez a redundancia segít kontextust adni a tesztek hibaelhárításakor. Ne feledje: a tesztek specifikációk, nem hagyományos kód.

Egységtesztelés

Az egységtesztelés az alkalmazás egyes részeit izolálja, általában egyetlen modult, de néha még egyetlen függvényt is, és egyetlen "egységként" teszteli azokat. Ellenőrzi, hogy egy adott bemenet és kezdeti állapot esetén a kívánt kimenetet és mellékhatásokat okoz-e. Ez bonyolultnak hangzik, de ígérem, nem az. Íme néhány egységteszt a JavaScript + operátorához, számokra alkalmazva:

o.spec('összeadás tesztelése', function () {
  o('egész számokkal működik', function () {
    o(1 + 2).equals(3);
  });

  o('lebegőpontos számokkal működik', function () {
    // Köszönhetően az IEEE-754 lebegőpontos számábrázolás sajátosságainak.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

Ahogy ilyen egyszerű dolgokat is egységtesztelhet, a Mithril.js komponenseket is egységtesztelheti. Tegyük fel, hogy van ez a komponens:

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

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', [
        vnode.attrs.type === 'goodbye' ? 'Viszlát, világ!' : 'Helló, világ!',
      ]);
    },
  };
}

module.exports = MyComponent;

Könnyen létrehozhat néhány egységtesztet ehhez.

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

o.spec('MyComponent', function () {
  o("'Helló, világ!'-ot mond, ha a `type` értéke `hello`", function () {
    var out = mq(MyComponent, { type: 'hello' });
    out.should.contain('Helló, világ!');
  });

  o("'Viszlát, világ!'-ot mond, ha a `type` értéke `goodbye`", function () {
    var out = mq(MyComponent, { type: 'goodbye' });
    out.should.contain('Viszlát, világ!');
  });

  o("'Helló, világ!'-ot mond, ha nincs megadva `type`", function () {
    var out = mq(MyComponent);
    out.should.contain('Helló, világ!');
  });
});

A tesztekből látszik, hogyan kell működnie a komponensnek, és a komponens ezt hatékonyan meg is valósítja.