Testgetriebene Entwicklung mit Javascript

Das Testen von Javascriptdatein ist bislang immer mühselig, da jeder Browser Javascript anders implementiert hat. Deswegen musste bislang in jedem Browser einzeln alle Funktionalitäten getestet werden. Testgetriebene Entwicklung kann hier jedoch Abhilfe schaffen, indem diese Tests automatisiert werden.

Im folgenden stelle ich euch 3 Test-Frameworks vor, die die testgetriebene Entwicklung ermöglichen, wobei ich bei allen darauf eingehen möchte, wie diese installiert werden und deren Tests geschrieben werden.

 

Testgetriebene Entwicklung

Testgetriebene Entwicklung beschreibt eine herangehensweise in der Programmierung. Der Ansatz ist, dass man zuerst Tests schreibt und dann so entwickelt, dass diese Tests immer wahr bleiben. Die Testgetriebene Entwicklung hat somit den Vorteil, dass die Tests automatisch durchgeführt werden und man nicht mehr als per Hand testen muss.

 

QUnit

QUnit ist das erste der 3 Test-Frameworks, welches die testgetriebene Entwicklung unterstützt. Ursprünglich war QUnit fest in JQuery integriert und wurde erst 2008 aus JQuery ausgegliedert. Mitlerweile kann QUnit als eigenständiges Javascript-Framework genutzt werden. Die Tests können im Browser gestartet werden, indem man die eine HTML-Datei öffnet.

Installation:

  1. Javascript und CSS von QUnit downloadentestgetriebene Entwicklung im Anwendungsfall: QUnit
  2. HTML-Dokument erstellen, welches folgende Dateien einbindet:
    1. CSS- und Javascript von QUnit
    2. Javascript, das man testen möchte
    3. Javascript, in dem die Tests stehen

Aufbau der Tests

In QUnit besteht ein Test immer aus einem Aufruf der test-Funktion, welche 2 Parameter erwartet. Der erste Parameter ist eine kurze Beschreibung des Tests. Der zweite Parameter ist eine Callback-Funktion, welche die eigentliche Testlogik enthält. Desweiteren können die Tests gruppiert werden, indem man die module-Funktion über dem Testblock aufruft. Die module-Funktion erwartet dabei als Parameter eine Bezeichnung der Testgruppe. Optional kann man als zweiten Parameter ein Objekt mit den Schlüsseln setup und teardown übergeben, welches dazu dient die Testumgebung für den Test vorzubereiten(setup) bzw. wieder zu leeren(teardown).

 

Jasmine

Das zweite Javascript-Framework, um testgetriebene Entwicklung in Javascript umzusetzen, heißt Jasmine. Auch in Jasmine kann man direkt im Browser testen, indem man die SpecRunner.html öffnet.

Installation:testgetriebene Entwicklung im Anwendungsfall: Jasmine

  1. Standalone-Release downloaden und entpacken
  2. SpecRunner.html anpassen, indem man die eigenen Javascript-Datein einbindet

 

Aufbau der Tests

Tests werden durch das Aufrufen der it-Funktion definiert, welche 2 Parameter erwartet. Dabei erwartet die it-Funktion die selben Parameter wie die test-Funktion von QUnit. Das heißt, dass der erste Parameter ein String ist, welcher den Test beschreibt, und der zweite Parameter ist eine Callback-Funktion, welche die Testlogik beinhaltet. Auch in Jasmine kann man die Tests gruppieren. Diese Testgruppen(TestSuites) können mit Hilfe der describe-Funktion realisiert werden. Diese Funktion erwartet als ersten Parameter eine Bezeichnung der Testgruppe. Der zweite Parameter ist eine Callback-Funktion, welche die einzelnen Aufrufe der it-Funktion enthält.

 

JsTestDriver

Unter den 3 beschriebenen Javascript-Frameworks ist JsTestDriver das einzige, dass man nicht direkt im Browser testen kann. Auch ist JsTestDriver das einzige dieser Frameworks, wel

ches nicht in Javascript entwickelt wurde sondern in Java. Da die Ausführung der Tests etwas umständlicher ist, erkläre ich zusät

zlich, wie man Tests mit dem JsTestDriver ausführt.

testgetriebene Entwicklung im Anwendungsfall: JsTestDriver

Installation

  1. Jar-Datei downloaden
  2. im selben Ordner wie die Jar-Datei, folgende Ordner/Datein erstellen
    1. Ordner mit zu testenden Quellcode
    2. Ordner mit den Tests
    3. Konfigurationsdatei im YAML-Format

Aufbau der Tests

Tests beginnen mit Hilfe der TestCase-Funktion. Diese erwartet als Parameter den Namen der TestSuite und liefert ein Objekt zurück, in dessen Prototypen man die Testmethoden einhängt. Der Name der Testmethode/n muss imme mit „test“ beginnen, da der Test erkannt wird. Zusätzlich können eine setUp und eine tearDown-Methode eingehängt werden, welche die Testumgebung vorbereitet bzw. wieder leert.

 

Ausführung der Tests

Anders als in QUnit und Jasmine ist es in JsTestDriver nicht möglich eine HTML-Datei zu öffnen und so zu überprüfen ob alles funktioniert. Beim JsTestDriver muss man dagegen mit der Kommandozeile des Betriebssystems zuerst in den Ordner gehen, wo die Jar-Datei liegt und muss dann folgenden Befehl eingeben:         java -jar JsTestDriver.jar –port <port>

Danach muss man sich mit allen zu testenden Browsern auf den Server connecten, indem man in der Addresszeile der Browser    localhost:<port>/capture    eingibt.

Anschließend kann man in einem weiteren Konsolenfenster den Test starten, indem man folgenden Befehl wieder in dem selben Ordner wie oben eingibt: Java -jar JsTestDriver.jar –tests all

 

Fazit

Um die testgetriebene Entwicklung in Javascript umzusetzen, gibt es diverse Test-Frameworks, jedoch haben alle ihre Vor- und Nachteile. JsTestDriver eignet sich hervorragend um verschiedene Browser gleichzeitig zu testen, da man immer nur einen Befehl per Konsoleneingabe ausführen muss und auf einen Blick sehen kann, auf welchem mit dem Server verbundenen Browser ein Test fehlgeschlagen ist oder alle funktionieren. Jedoch haben QUnit und Jasmine den Vorteil, dass die Ausgabe übersichtlicher ist und man bereits auf einem Blick sehen kann, ob ein Test fehlgeschlagen ist, da diese rot hinterlegt werden.

 

Quelle: PHPMagazin Ausgabe 03.13

3 responses on “Testgetriebene Entwicklung mit Javascript

  1. Marcel Borchardt Post author

    Guten Tag Herr Obermaier,

    die detailierten Infos zu diesem Blog-Beitrag habe ich der Ausgabe 03.13 des PHP-Magazins entnommen.
    Wie du schon sagst, führt das Framework die von dir geschriebenen Tests aus und ist dabei sehr zuverlässig, sofern die Tests alle möglichen Fehler abdecken.
    Jasmine und QUnit arbeiten dabei direkt in dem Browser und müssen diesen daher nicht emulieren.
    Beim JsTestDriver müssen sich die zu testenden Browser auf dem Server connecten. Diese warten dann auf weitere Anweisungen vom Server. Wenn die Test dann gestartet werden, werden die Javascript-Datein in den verbundenen Browsern geladen und ausgeführt. Die Ergebnisse werden dann zum Server gesendet und dort verarbeitet. Die Browser werden also auch hier nicht emuliert, sondern arbeiten die Tests alleine ab.

    Ich hoffe ich konnte dir helfen.

    Mit freundlichen Grüßen
    Marcel Borchardt

  2. Gerhard Obermaier

    Servus Marcel,
    den Ansatz finde ichl nicht uninteressant. Zwei Fragen habe ich dazu.
    1. In welcher Ausgabe des PHP Magazins stehen denn die detaillierteren Infos?
    2. Wie zuverlässig funktioniert das mit dem Crossbrowser Testing? Schreibe ich einen Test und dann führt das Framework den in verschiedenen Browsern aus? Wenn ja, werden dabei die Browser emuliert? Das führt ja dann meistens zu weiteren Problemen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.