Kategorien
Javascript testen mit QUnit und Sinon.JS
Gastartikel von Markus Frühauf.
Ich bin 25 Jahre und seit über 7 Jahren im Webbereich tätig, davon 3 Jahre Perl und 4 Jahre jQuery, jQueryUI und php, Anfangs mit dem Framework von phpBB und seit zwei Jahren mit dem Zend-Framework (in mehreren Projekten / Firmen). Ich entwickle Webanwendungen von der Datenbank bis zum Frontend.
Vor kurzem war ich auf der IPC11 in Mainz, dort hatte ich mir den Beitrag Javascript Testing angeschaut, dieser war extrem interessant für mich, da ich schon länger auf der Suche bin nach Unittesting für jQuery und Javascript war.
Dort hab ich ganz klein nebenbei das Mocking Framework Sinon.JS auf geschnappt. Dies war sozusagen das letzte Puzzelstück für meine Unittests, was ich gesucht hab. Sinon.JS kann Mocking, Spyes, Stubs und noch mehr. Dann hat PHPGangsta in seinem Linkpool Sinon.JS verlinkt, er hat es auch auf der IPC11 auf geschnappt.
Mittlerweile hab ich schon die ersten Gehversuche mit Sinon.JS gemacht, aber das Mocking wollte nur mit Requests funktionieren welche per POST abgeschickt wurden. Das war nur ein halber Sieg, da Daten laden per GET nicht funktionieren wollte. Zu dem Problem mit GET komme ich etwas weiter unten im Artikel.
Da ich regelmäßig den Blog von Michael lese hab ich ihn bezüglich Sinon.JS angeschrieben. Von ihm hab ich dann die Antwort bekommen, er hat mit Frontend nicht viel am Hut und kann mir nicht weiter helfen, aber ich könnte einen Blog Artikel schreiben, welchen er für mich veröffentlicht. Ok die Idee war gut, aber ich hatte mittlerweile den Ehrgeiz es selber herauszufinden wieso GET nicht will.
Google war mir in diesem Fall kein so guter Freund, aber ich hatte Ehrgeiz und mit etwas Hirn hab ich das Problem gelöst. Aber die Idee darüber einen Blogartikel zu schreiben war mir immer noch im Kopf, also hab ich gesagt, ich schreib einen, vielleicht bekomme ich somit ein paar neue Ideen.
Die Lösung für mein Problem war:
Ich hatte $.Ajax so konfiguriert das es, wenn es Daten per GET vom Server holt, diese nirgendwo gecacht werden.
$.ajaxSetup({
cache: false
});
Bei Sinon.JS muss man die komplette URL angeben oder mit Regex anpassen, diese hat in meinem Fall zwar immer gepasst, aber ich hatte vergessen, dass jQuery bei Cache: false einen Timestamp als GET Parameter anhängt. Während eines QUnit-Tests ist dieser Timestamp immer 0.
So genug geschrieben jetzt zum Code: http://jsfiddle.net/RMrSt/13/
Ich hab den Code sehr schön dokumentiert, damit jeder sich dort zurecht findet.
- TestModul-A: Ist ein QUnit-Test um einen einfachen Taschenrechner zu testen, dort wird Stub von Sinon.JS verwendet um zu Prüfen ob bei einer Division durch 0 ein Alert erzeugt wurde.
- TestModul-B: Geht davon aus das ein Backend das Ergebnis als JSON Object zurückgibt.
Und das schöne ist man kann die QUnit-Tests relativ einfach in Jenkins einbinden.
Ich hab dazu PhantomJS verwendet. Eine sehr gute Anleitung um PhantomJS unter Jenkins einzurichten ist in diesem noch relative neuem Blogbeitrag beschrieben.
Ein ganz großes Problem das ich dort entdeckt hab und noch keine Lösung habe: PhantomJS kann nur ein Success oder Failed zurückgeben. Dies macht es dann sehr mühsam den fehlgeschlagenen Test zu finden.
Ich hab bei uns im Jenkins Server die Javatestes noch um jslint4Java erweitert, dieses sucht Codefehler so wie es phpLint für PHP macht.
Jetzt möchte ich den Jenkins noch mit dem Closure Compiler erweitern, welcher Javascript Code schön klein macht und damit die Ladezeiten verringert werden.
Fazit:
- Es ist relativ leicht ein QUnit-Test zu machen, da QUnit die Syntax von jQuery verwendet.
- Wenn einmal ein Test geschrieben ist, kann man an der Funktion bauen und man kann sich sicher sein das die Funktion noch wie vorher funktioniert
Noch ein paar Fragen an euch Leser:
- Testet überhaupt wer sein Javascript?
- Wie lasst ihr automatisiert euer Javascript Testen?
Alternatives Mocking Tool für jQuery / Javascript ist jQuery-Mockjax.
Alternatives Modul für Jenkins um QUnit Tests anzubinden wäre der JsTestDriver, mit welchem ich noch keine Erfahrungen gesammelt hab.
Ich hoffe euch hat dieser kleine (mit etwas mehr Code) Beitrag gefallen.
Markus Frühauf
Ähnliche Artikel:
