Unit-Tests mit dem JavaScript-Framework Jasmine

Werkzeuge  –  4 Kommentare

Für nahezu jede wichtige Programmiersprache gibt es Unit-Test-Frameworks. Wer allerdings Anwendungen in JavaScript erstellt, musste lange Zeit auf ein passendes Werkzeug verzichten. Erst in den letzten Jahren kamen entsprechende Tools auf dem Markt, darunter auch Jasmine.

Spätestens seit dem Aufkommen von Frameworks und Bibliotheken wie jQuery, Dojo und MooTools ist die Skriptsprache JavaScript populär wie nie zuvor. Wurde JavaScript früher hauptsächlich für kleine Webspielereien wie Mouse-over-Bildwechsel und teilweise sogar für Formularvalidierungen verwendet, erstellt man heute aufwendige Anwendungen damit. Die Einsatzgebiete für JavaScript reichen mittlerweile von klassischen Webseiten-Anwendungen über den Einsatz von Ajax bis hin zur App-Entwicklung. Solche Programme sind umfangreich zu testen. An der Stelle kommt das Unit Testing ins Spiel. Für JavaScript gibt es seit längerem einige Frameworks für diese Art des Testens. Vertreter sind etwa JsUnit, Enhance JS, JSpec und eben das in diesem Artikel genauer unter die Lupe genommene Jasmine.

Jasmine ist ein BDD-Framework (Behaviour-driven Development), speziell für JavaScript entwickelt. Das Framework ist Nachfolger von JsUnit, einer direkten Adaption von JUnit. JsUnit lief allerdings ausschließlich im Browser, was die Flexibilität der Tests einschränkte. Voraussetzung für einen Test im Browser war und ist die Einbettung des zu prüfenden JavaScript-Codes in die HTML-Seite. Das ist aber ein entscheidender Nachteil, da es mittlerweile zahlreiche Anwendungsfälle gibt, bei denen JavaScript unabhängig vom HTML-Code läuft. So wurde aus dem JsUnit-Projekt Jasmine, das unabhängig vom Browser einsetzbar ist, obgleich es sich auch für Tests im Browser eignet. Aber serverseitige Laufzeitumgebungen sind ein durchaus typisches Einsatzgebiet von Jasmine.

Das Framework benötigt für die Ausführung der Tests kein DOM (Domain Object Model), weswegen es sich beispielsweise mit Node.js verwendet lässt. Für den Zweck gibt es ein Modul: jasmine-node wird mit npm install jasmine-node -g installiert und lässt sich über jasmine-node beziehungsweise node lib/jasmine-node/cli.js einsetzen. Über die verfügbaren Argumente lassen sich die Tests spezifizieren.

Let me introduce ...

Der Schnelltest im Browser (Abb. 1)

Der einfachste Weg zum Ausführen von Jasmine-Spezifikationen (Specs) stellt der Test im Browser dar. Dazu trägt man die Specs in die im Framework-Umfang enthaltene SpecRunner.html ein. Die Seite muss man dann nur noch im Browser öffnen. Um Jasmine direkt im Browser zu verwenden, erstellt man innerhalb seines Projekts eine spec und ein spec/jasmine-Verzeichnis. Der Inhalt des extrahierten jasmine-Verzeichnis wird in eben jenes spec/jasmine-Verzeichnis kopiert. Anschließend erstellt man den Test-Runner. Es lohnt sich, auf die SpecRunner.html und ihren Quellcode einen genauen Blick zu werfen. Denn die Datei ist das Herzstück der Testumgebung, zumindest dann, wenn Jasmine im Browser zum Einsatz kommt.

<link rel="stylesheet" type="text/css" href="lib/jasmine-1.2.0/jasmine.css">

Die CSS-Dateien dienen ausschließlich der Optik. Entscheidende Bedeutung kommt den Skript-Elementen zu, die die Jasmine-Applikation folgendermaßen einbinden:

<script type="text/javascript" src="lib/jasmine-1.2.0/
jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.2.0/
jasmine-html.js"></script>

Anschließend folgen die Source- und die Spec-Dateien.

<!-- include source files here... -->
<script type="text/javascript" src="spec/calc.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="src/calcspec.js"></script>

Spec enthält die Test-Definition.

describe 'Calc', ->
it 'Addition zweier positiver Zahlen', ->
calculator = new Calculator()
result = calculator.add 5, 7
expect(result).toBe 13
it 'Subtraktion zweier positiver Zahlen', ->
calculator = new Calculator()
result = calculator.subtract 20, 5
expect(result).toBe 15

Um den Test aufzurufen, muss man jetzt nur noch die SpecRunner.html im Browser ausführen.