Testen

Einrichtung

Das Testen von Mithril.js-Anwendungen ist relativ einfach. Am einfachsten gelingt der Einstieg mit ospec, mithril-query und JSDOM. Die Installation ist unkompliziert: Öffnen Sie ein Terminal und führen Sie diesen Befehl aus.

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

Auch die Einrichtung ist relativ einfach und erfordert nur wenige Schritte:

1. Fügen Sie ein "test": "ospec" zu Ihren npm-Skripten in der package.json-Datei hinzu. Dies könnte dann so aussehen, möglicherweise mit zusätzlichen Feldern, die für Ihr Projekt relevant sind:

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

2. Erstellen Sie eine Setup-Datei, test-setup.js, mit folgendem Inhalt:

var o = require('ospec');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM('', {
  // Damit wir `requestAnimationFrame` erhalten
  pretendToBeVisual: true,
});

// Definieren Sie die globalen Variablen, die Mithril.js benötigt. Die ersten beiden sind oft auch in Tests nützlich.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// Mithril.js einbinden, um den korrekten Ladevorgang zu gewährleisten.
require('mithril');

// Stellen Sie sicher, dass JSDOM beendet wird, wenn die Tests abgeschlossen sind.
o.after(function () {
  dom.window.close();
});

3. Erstellen Sie eine Komponente, zum Beispiel src/my-component.js, die wie folgt aussieht:

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

module.exports = MyComponent;

4. Erstellen Sie schließlich eine Testdatei, zum Beispiel src/tests/my-component.js, die wie folgt aussieht:

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');
  });
});

Sobald Sie alles eingerichtet haben, führen Sie im selben Terminal, in dem Sie alles installiert haben, diesen Befehl aus:

npm test

Wenn Sie alles richtig eingerichtet haben, sollten Sie eine Ausgabe erhalten, die ungefähr so aussieht:

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

Bewährte Verfahren

Das Testen ist in den meisten Fällen unkompliziert. Jeder Test besteht normalerweise aus drei Teilen: Zustand einrichten, Code ausführen, Ergebnisse überprüfen. Es gibt jedoch einige Dinge, die Sie beim Testen beachten sollten, um optimale Ergebnisse zu erzielen und viel Zeit zu sparen.

1. Schreiben Sie Ihre Tests idealerweise so früh wie möglich im Entwicklungsprozess. Sie müssen Ihre Tests nicht sofort verfassen, aber Sie sollten zumindest parallel zum Schreiben des Codes auch die Tests entwickeln. So investieren Sie jetzt 5 Minuten, um Probleme zu beheben, anstatt in sechs Monaten tagelang nach Fehlern in einer spektakulär gescheiterten App-Idee zu suchen. Sie wollen nicht in diese Situation geraten.

2. Testen Sie die API und das Verhalten, aber vermeiden Sie es, die Implementierung direkt zu testen. Wenn Sie testen müssen, ob ein Ereignis ausgelöst wird, wenn eine bestimmte Aktion ausgeführt wird, ist das völlig in Ordnung, und Sie können dies gerne tun. Testen Sie jedoch nicht die gesamte DOM-Struktur in Ihrem Test. Vermeiden Sie es, Teile von mehreren Tests ändern zu müssen, nur weil Sie eine einfache CSS-Klasse hinzugefügt haben. Sie wollen auch nicht alle Ihre Tests umschreiben, nur weil Sie einem Objekt eine neue Instanzmethode hinzugefügt haben.

3. Scheuen Sie sich nicht vor Wiederholungen. Abstrahieren Sie Code nur dann, wenn Sie denselben Codeabschnitt dutzende oder hunderte Male in derselben Datei verwenden oder wenn Sie Tests explizit generieren. Normalerweise ist es im Code eine gute Idee, eine Grenze zu ziehen, wenn Sie dieselbe Logik mehr als 2-3 Mal wiederholen und sie in eine Funktion abstrahieren. Beim Testen hilft Ihnen diese Redundanz jedoch, Kontext bei der Fehlerbehebung von Tests zu geben, auch wenn es viel doppelten Code gibt. Denken Sie daran: Tests sind Spezifikationen, nicht normaler Code.

Unit-Tests

Unit-Tests isolieren Teile Ihrer Anwendung, normalerweise ein einzelnes Modul, aber manchmal sogar eine einzelne Funktion, und testen sie als einzelne "Einheit". Es wird überprüft, ob bei einer bestimmten Eingabe und einem definierten Startzustand die gewünschte Ausgabe und die gewünschten Nebeneffekte erzielt werden. Das mag kompliziert klingen, ist es aber nicht. Hier sind ein paar Unit-Tests für den +-Operator von JavaScript, angewendet auf Zahlen:

o.spec('addition', function () {
  o('works with integers', function () { // Tests für Integer-Addition
    o(1 + 2).equals(3);
  });

  o('works with floats', function () { // Tests für Fließkomma-Addition
    // Ja, danke IEEE-754 Fließkomma fürs Seltsamsein.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

So wie Sie einfache Dinge testen können, können Sie auch Mithril.js-Komponenten mit Unit-Tests testen. Angenommen, Sie haben diese Komponente:

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

Sie könnten leicht ein paar Unit-Tests dafür erstellen.

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

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

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

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

Wie zuvor erwähnt, sind Tests Spezifikationen. Sie können aus den Tests ersehen, wie die Komponente funktionieren soll, und die Komponente tut dies sehr effektiv.