Roberto’s Blog

QUnit – Javascript Unit Test Framework

Wie Peter Bucher bereits in seinem Eintrag erwähnte, macht es überall dort Sinn Unit Tests einzubauen, wo das Verfahren leicht einzubauen ist, ohne sich dadurch das Leben schwer zu machen.

Nicht nur für Asp.Net, sondern auch für Javascript gibt es diverse Test Suiten.
Nicht gewusst? Na dann wird’s Zeit! Letztendlich ist es nicht schön, wenn auf einer Webseite immer diese lästigen Javascript Fehler auftreten und somit bestimmte Funktionen der Seite nicht mehr funktionieren

In diesem Beitrag wird auf QUnit näher eingegangen. Diese wird bspw. zum Testen des JQuery Frameworks verwendet, ist „easy-to-use“ und kann eigentlich alles, was man von einem einfachen Testing Framework erwartet.

Zum starten braucht es nicht viel: Einfach die qunit.js und qunit.css in eine einfache HTML Seite einbinden und los geht’s!

Im Body Tag der Seite das folgende Element hinzufügen:

<ol id="qunit-tests"></ol>

Wie alles beginnt:

test("Das ist mein erster Test", function () {
    ok(true, "Dieser Test war erfolgreich");
});

Die Ausgabe wird nun wie folgt aussehen:

Das ist mein erster Test (0, 1, 1)

Die Zahlen in den Klammern sagen aus, wie viele von den insgesamt durchgeführten „Assertions“  erfolgreich und fehlerhaft waren:

(Anzahl Fehlgeschlagen, Anzahl Erfolgreich, Anzahl Insgesamt)

Neben der „ok assertion“ gibt es noch zwei weitere: equals und same
Equals ist grundsätzlich nichts anderes als ein Vergleich zweier Werte, die als Parameter der Funktion übergeben werden:

test("Der zweite Test", function () {
    expect(2);
    equals(true, false, "Fehlerhaft");
    equals("Wert", "Wert", "Erfolgreich");
});

Wem jetzt das expect aufgefallen ist, es ist die Anzahl der zu erwartenden Assertions.

Um Objekte zu vergleichen wird die „same“ Funktion angeboten. Hierfür ein einfaches Objekt „User“ mit der Property „Name“

test("Der 'same' Test", function () {
    expect(2);
    var user1 = new User("Name1");
    var user2 = new User("Name2");
    ok(true, "User wurden erstellt");
    same(user1, user2, "user1 und user2 sind identisch");
});
 
Der Test sollte nun eine erfolgreiche und eine fehlgeschlagene Assertion ausgeben, da die User zwar erfolgreich erstellt wurden, aber nicht den gleichen Namen haben.

Zudem bietet QUnit einige Callbacks die überschrieben werden können, wie bspw. log um die Fehler zu loggen, testStart, testDone…

QUnit.log = function(result, message) {
    alert(message);
}

Ein weiterer Punkt bei QUnit ist die Unterteilung in Modulen. Der Aufruf erfolgt über module( name, [lifecycle] ), wobei lifecycle die setup und teardown callbacks darstellt, die bei jedem Test im aktuellen Modul ausgeführt werden. Dies kann verwendet werden, um bspw. bestimmte Test- Daten für jeden Test zu erstellen.

module("Modul abc", {
    setup: function () {
        this.user = new User("TestUser");
    },
    teardown: function () {
        this.user = null;
    }
});

test("User Test", function () {
    expect(1);
    equals(this.user.name, "TestUser");
});

Nun ist Kreativität gefragt! Wie JQuery das macht sieht man bei den Beispielen in der QUnit Dokumentation im unteren Bereich der Seite.

Anbei gibt’s wie immer ein Beispiel dazu!
Viel Spass beim Testen :-)