Testowanie

Konfiguracja

Testowanie aplikacji w Mithril.js jest stosunkowo proste. Najłatwiej zacząć od ospec, mithril-query i JSDOM. Instalacja tych narzędzi jest prosta: otwórz terminal i uruchom następujące polecenie.

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

Konfiguracja również nie jest skomplikowana i wymaga kilku kroków:

1. Dodaj "test": "ospec" do sekcji scripts w pliku package.json. Powinno to wyglądać podobnie do poniższego przykładu, ewentualnie z dodatkowymi polami specyficznymi dla twojego projektu:

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

2. Utwórz plik konfiguracyjny test-setup.js o następującej zawartości:

var o = require('ospec');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM('', {
  // Umożliwia korzystanie z `requestAnimationFrame`
  pretendToBeVisual: true,
});

// Ustaw zmienne globalne wymagane przez Mithril.js. Dwie pierwsze zmienne są często
// przydatne również w testach.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// Zaimportuj Mithril.js, aby upewnić się, że został załadowany poprawnie.
require('mithril');

// Upewnij się, że JSDOM zostanie zamknięty po zakończeniu testów.
o.after(function () {
  dom.window.close();
});

3. Utwórz komponent, na przykład src/my-component.js, o następującej strukturze:

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

module.exports = MyComponent;

4. Na koniec utwórz plik testowy, na przykład src/tests/my-component.js, o następującej zawartości:

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

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

o.spec('MyComponent', function () {
  o('sprawdza, czy wszystko działa', function () {
    var out = mq(MyComponent, { text: 'What a wonderful day to be alive!' });
    out.should.contain('day');
  });
});

Po skonfigurowaniu wszystkiego, w terminalu, w którym zainstalowano narzędzia, uruchom polecenie:

npm test

Prawidłowa konfiguracja powinna skutkować wyświetleniem następującego wyniku:

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

Najlepsze praktyki

Testowanie jest zazwyczaj proste. Każdy test zwykle składa się z trzech części: ustawienie stanu początkowego, uruchomienie testowanego kodu i sprawdzenie wyników. Należy jednak pamiętać o kilku kwestiach, aby zmaksymalizować efektywność i zaoszczędzić dużo czasu.

1. Przede wszystkim, pisz testy tak wcześnie, jak to możliwe. Nie musisz pisać testów od razu, ale warto pisać testy w miarę pisania kodu. Dzięki temu, jeśli coś nie działa zgodnie z oczekiwaniami, poświęcisz 5 minut na zdiagnozowanie problemu, zamiast 5 dni 6 miesięcy później, kiedy będziesz próbował wdrożyć niesamowity pomysł na aplikację, który okaże się spektakularną porażką. Unikaj tej pułapki.

2. Testuj API i zachowanie, ale nie implementację. Jeśli musisz przetestować, czy zdarzenie jest wywoływane po wystąpieniu określonej akcji, to jest to w porządku. Ale nie testuj całej struktury DOM w swoim teście. Unikaj sytuacji, w której musisz przepisywać fragmenty 5 różnych testów tylko dlatego, że dodałeś prostą klasę CSS. Nie chcesz też przepisywać wszystkich testów tylko dlatego, że dodałeś nową metodę do obiektu.

3. Nie bój się powtórzeń i stosuj abstrakcję tylko wtedy, gdy dosłownie robisz to samo dziesiątki lub setki razy w tym samym pliku, lub gdy jawnie generujesz testy. Zazwyczaj w kodzie dobrym pomysłem jest wprowadzenie abstrakcji, gdy powtarzasz tę samą logikę więcej niż 2-3 razy, ale podczas testowania, nawet jeśli jest dużo zduplikowanej logiki, ta redundancja pomaga w uzyskaniu kontekstu podczas rozwiązywania problemów z testami. Pamiętaj: testy są specyfikacjami, a nie zwykłym kodem.

Testy jednostkowe

Testy jednostkowe izolują części aplikacji, zwykle pojedynczy moduł, ale czasami nawet pojedynczą funkcję, i testują je jako pojedynczą "jednostkę". Sprawdzają, czy dla danego wejścia i stanu początkowego, generuje pożądane wyjście i efekty uboczne. To wszystko może wydawać się skomplikowane, ale obiecuję, że tak nie jest. Oto kilka testów jednostkowych dla operatora + JavaScript, zastosowanego do liczb:

o.spec('dodawanie', function () {
  o('działa z liczbami całkowitymi', function () {
    o(1 + 2).equals(3);
  });

  o('działa z liczbami zmiennoprzecinkowymi', function () {
    // Tak, dziękujemy IEEE-754 za dziwne zachowanie liczb zmiennoprzecinkowych.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

Podobnie jak w przypadku prostych elementów, możesz również testować jednostkowo komponenty Mithril.js. Załóżmy, że masz następujący komponent:

// 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;

Możesz łatwo utworzyć kilka testów jednostkowych dla tego komponentu.

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

o.spec('MyComponent', function () {
  o("wyświetla 'Hello, world!' gdy `type` ma wartość `hello`", function () {
    var out = mq(MyComponent, { type: 'hello' });
    out.should.contain('Hello, world!');
  });

  o("wyświetla 'Goodbye, world!' gdy `type` ma wartość `goodbye`", function () {
    var out = mq(MyComponent, { type: 'goodbye' });
    out.should.contain('Goodbye, world!');
  });

  o("wyświetla 'Hello, world!' gdy nie podano `type`", function () {
    var out = mq(MyComponent);
    out.should.contain('Hello, world!');
  });
});

Testy jasno pokazują, jak powinien działać komponent i czy działa zgodnie z oczekiwaniami.