Gute Qualität in JavaScript mit Jenkins und PHPStorm/WebStorm
Kommentare

Unit Tests
Für JavaScript existieren mittlerweile mehrere Testframeworks. Fast jede größere Library bringt mittlerweile ihr eigenes Framework mit, beispielsweise qunit von jQuery oder doh von dojo.

Unit Tests

Für JavaScript existieren mittlerweile mehrere Testframeworks. Fast jede größere Library bringt mittlerweile ihr eigenes Framework mit, beispielsweise qunit von jQuery oder doh von dojo. Es gibt allerdings auch unabhängige Testframeworks wie jsTestDriver [4] oder Jasmine [5]. Im Weiteren werden wir uns mit einer Kombination von Jasmine und jsTestDriver beschäftigen. Jasmine dient dabei zur Formulierung der Tests, und jsTestDriver stellt die Infrastruktur zur Integration der Tests in die jeweilige Plattform zur Verfügung. Verbunden werden beide Werkzeuge durch den JasmineAdapter [6], der die Übersetzung der Jasmine-Befehle in den Befehlssatz von jsTestDriver übernimmt.

Das erste Ziel ist die Integration von Jasmine Unit Tests direkt in PHPStorm. Zu diesem Zweck existiert das JSTestDriver Plugin. Ist es installiert, müssen vom Entwickler noch ein paar Voraussetzungen geschaffen werden, damit die Tests ausgeführt werden. Im ersten Schritt werden natürlich der Quellcode, der getestet werden soll, und die Tests benötigt. Hier empfiehlt es sich, beides in getrennten Ordnerstrukturen abzulegen, den Quellcode im Verzeichnis src und die Tests im Verzeichnis spec. Als Nächstes muss eine Konfigurationsdatei für den jsTestDriver erstellt werden. Das ist eine Textdatei, in der angegeben wird, wo die verschiedenen Dateien gefunden werden können. Normalerweise wird sie mit der Endung .jstd versehen, die verdeutlicht, dass es sich hierbei um die Konfiguration des jsTestDrivers handelt:

load:
  - ../jasmine/jasmine.js
  - ../jasmine/JasmineAdapter.js
  - spec/myTest.js
  - src/mySource.js

Nachdem diese Voraussetzungen erfüllt sind, kann man den JsTestDriver Server starten. Dazu öffnet man in PHPStorm das Toolfenster JsTestDriver Server. Hier gibt es zuerst die Möglichkeit, über ein grünes Pfeilsymbol den Server zu starten. Danach kann man auf eines oder mehrere der fünf angezeigten Browsersymbole klicken, um den jeweiligen Browser beim jsTestDriver zu registrieren und später die Tests auf diesem Browser auszuführen. Der letzte Schritt besteht schließlich in der eigentlichen Ausführung der Tests. Hierfür wählt man im Kontextmenü der .jstd-Datei den Punkt RUN ‚….JSTD‘ aus. Der Testablauf wird in einem separaten Run-Tool-Fenster ausgegeben, wo man über Erfolg oder Fehlschlag der verschiedenen Tests informiert wird. Durch die Kombination von Jasmine und jsTestDriver besteht für den Entwickler die Möglichkeit, die erstellten Tests zu gruppieren, sie sehr häufig ablaufen zu lassen und dabei sofort die Rückmeldung zu erhalten, ob die Tests erfolgreich waren. Diese leichtgewichtige Ausführung und die schnelle Rückmeldung sind die Voraussetzung für Programmiertechniken wie beispielsweise Test-driven Development (TDD), wo zuerst der Test und danach dann der zugehörige Quellcode erstellt wird.

Für einen Entwickler ist es nicht sonderlich praktikabel, während der Entwicklung sämtliche Unit Tests eines Projekts ablaufen zu lassen. In einem größeren Projekt kommen schnell mehrere hundert und sogar bis zu Tausenden Unit Tests zusammen. Hier dauert auch ein Testdurchlauf normalerweise länger, was wiederum gegen eine schnelle Rückmeldung gerade beim TDD spricht. Aber auch hierfür gibt es eine Lösung. Die Tests können, wie die übrigen Werkzeuge auch, in die Continuous-Integration-Umgebung integriert werden. Einzige Voraussetzungen, die hierfür zu erfüllen ist, ist eine funktionsfähige Installation des jsTestDrivers auf dem Jenkins Server und ein oder mehrere Browser, die sich beim Server registrieren. Die Installation stellt kein weiteres Problem dar, da der jsTestDriver als .jar-Datei zur Verfügung steht und so sehr einfach über die Kommandozeile ausgeführt werden kann. Idealerweise sollte durch ein init-Script dafür gesorgt werden, dass der jsTestDriver Server immer läuft. Auch die Registrierung der Browser sollte möglichst automatisiert werden. Zur eigentlichen Einbindung der Tests ist, wie bei den bereits vorgestellten Tools auch, nur eine Kommandozeile erforderlich:

java -jar JsTestDriver.jar -config /path/to/config.jstd --tests all --testOutput . --reset

Die .jstd-Datei, die auch schon in PHPStorm verwendet wurde, kann auch hier benutzt werden, sie muss lediglich um die Direktive server: http://localhost:9876 erweitert werden. Sie gibt lediglich an, wo sich der jsTestDriver Server befindet, und dient dazu, dass die Tests korrekt ablaufen können.

jsTestDriver generiert xUnit-kompatible Ausgabe im XML-Format. Das erleichtert die Visualisierung der Ergebnisse, da hier ein Standard-Plug-in von Jenkins, nämlich das xUnit Plugin, verwendet werden kann. Über den ADD-Button in der Konfiguration dieses Plug-ins kann ein neuer Abschnitt vom Typ JUnit hinzugefügt und der Name der Testdateien angegeben werden. Hier ist es auch zulässig, Suchmuster für den Dateinamen wie beispielsweise TEST-Firefox*.xml zu verwenden. Die Ergebnisse der Tests können dann über den Menüpunkt TEST RESULT im jeweiligen Jenkins-Projekt angezeigt werden. Hier erhält man die Informationen, ob ein Test erfolgreich war oder nicht, wie lange er gedauert hat und etliche weitere Informationen. Die Tests sind jeweils in Pakete gruppiert, die die verschiedenen Dateien widerspiegeln. In der nächsten Ebene wird weiter nach Klassen unterschieden und schließlich auf die Ebene der einzelnen Tests gegangen.

Fazit

Neben den vorgestellten Werkzeugen gibt es noch eine Reihe weiterer Hilfsmittel, um die Qualität von JavaScript-Quellcode kontinuierlich zu überwachen und aufgrund der daraus gewonnenen Erkenntnisse auch kontinuierlich zu verbessern. Hierunter fallen beispielsweise die Abdeckung der Software mit Tests, die so genannte „Code Coverage“. Außerdem sind unter anderem Komplexitätsanalysen oder die Suche nach ungenutztem Code in der Anwendung relevant. Ein weiteres Feld der Qualitätssicherung sind Lasttests, die sich ebenfalls in eine Continuous-Integration-Plattform integrieren lassen.

Wichtig ist bei der Qualitätssicherung, dass sich das Entwicklerteam auf einen Standard für die Codequalität einigt und eine gemeinsame Vorgehensweise entwickelt, um möglichst hochwertigen Quellcode zu erstellen. Steht nicht jeder Entwickler im Team hinter diesen Richtlinien, wird es sehr schwer, sie auf mittlere bis lange Frist durchzusetzen. Die Qualitätssicherung in einem Projekt erfordert sehr viel Disziplin und Motivation von allen Beteiligten.

Sebastian Springer arbeitet seit mehreren Jahren beim PHP-Dienstleister Mayflower in München und ist dort derzeit als Projekt-und Teamleiter tätig. Dabei liegt sein Fokus auf der Entwicklung und Qualitätssicherung von dynamischen Webapplikationen mit JavaScript und PHP.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -