JavaScript testgetrieben entwickeln mit QUnit
Kommentare

Den Testcode könnten wir jetzt einfach in einen Skriptblock in der Datei unittest.html schreiben. Das würde aber auf die Dauer sehr unübersichtlich und schwer wartbar werden. Deshalb werden wir hierfür

Den Testcode könnten wir jetzt einfach in einen Skriptblock in der Datei unittest.html schreiben. Das würde aber auf die Dauer sehr unübersichtlich und schwer wartbar werden. Deshalb werden wir hierfür ein neues .js File einbinden, in das wir den Testcode schreiben. Und da wir schon dabei sind, füge ich gleich noch vier weitere JavaScript-Dateien ein, die später unseren Anwendungscode enthalten sollen und bei Verwendung später noch erläutert werden. Wie im Kasten „Rahmenbedingungen“ beschrieben, werde ich auch auf das jQuery-Framework zurückgreifen, das ich bei dieser Gelegenheit auch gleich noch mit einbinde (Listing 2).

Listing 2: Erweiterung von unittest.html
    ...
  
        ...
              
  ...

Jetzt können wir uns überlegen, was unser erster Test prüfen soll. Wie wäre es mit dem Anlegen einer To-do-Liste mit einem Namen? Was nun folgt, ist nicht schwer. Wir schreiben einen ersten Test, der fehlschlägt. Das fällt deshalb nicht schwer, weil wir noch keinen anderen Code geschrieben haben bisher. Aber zuallererst: Wie sieht ein Test in QUnit aus? Ganz einfach:

test("title", function(){}); 

In Listing 3 ist der erste Unit Test zu sehen.

Listing 3: Unser erster QUnit-Test
test( "BusinessClass TodoList Konstruktor Test", function() {
    //Initialisierung des Tests
    var name = "Allgemein";
    var todoList = new TodoList(name);
    
    //Durchführung des Tests (Auswertung der Annahmen)
    ok(name == todoList.listname, "Der Name des erzeugten Objekts muss dem Konstruktornamen entsprechen");
});

Im Initialisierungsblock wird die Variable name mit dem Namen der zu erzeugenden To-do-Liste initialisiert und eine neue To-do-Liste mit diesem Objekt erzeugt. Im Unit Testing arbeitet man mit Annahmen (engl. assertions), in diesem Beispiel wird mit der Annahmefunktion ok gearbeitet, die als erstes Argument einen booleschen Ausdruck erwartet, der, wenn true, die Annahme erfüllt. Als zweites Argument folgt eine Nachricht, die zusammen mit dem Ergebnis der Annahme ausgegeben wird. Das Ergebnis dieses Tests sehen wir in Abbildung 3. Wir können anhand der Farbe erkennen, dass der Test fehlgeschlagen ist. Die Fehlermeldung TodoList is not defined gibt uns bereits einen guten Anhaltspunkt, warum der Test fehlgeschlagen ist. Der nächste kleine Schritt ist es, den Test erfolgreich durchlaufen zu lassen, indem wir den fehlenden Code implementieren.

Abb. 3: Der erste Test schlägt fehl

Themen der folgenden Seiten:

  • To-do-Liste
  • Testen des Mockups
  • Persistenz
  • deep Equal
  • Änderungen an „unittest.html“
  • DOM-Manipulation
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -