JavaScript Unit Tests mit Jasmine und Visual Studio (Resharper oder Cutzpah)


Bisher habe ich Unit Tests nur für .Net (C#) geschrieben, inzwischen nimmt aber auch der Clientseitige Code in Webanwendungen durch Frameworks wie AngularJS immer bessere Strukturen an, die sich ebenfalls sehr gut testen lassen. Außerdem gibt es sehr gute Plugins für Visual Studio (VS) die einem das Ausführen von JavaScript Unit Tests direkt im VS sehr einfach machen, hier war ich positiv überrascht, denn ich hatte mir das Einrichten schwerer vorgestellt.

Als Testframework verwende ich “Jasmine” mit dem sich die JavaScript Unit Tests sehr strukturiert aufbauen lassen. Mit Jasmin lässt sich z.B. testen ob die folgende JavaScript Funktion “calc” (Datei: custom.js) auch beide Zahlen addiert:

function calc() {
    return {
        add: function(a,b) {
            return a + b;
        }
    }
}

Der passende Unit Test mit Jasmine sieht z.B. folgendermaßen aus:

///<reference path="jasmine.js" />
///<reference path="customjs.js" />
describe('Testen der Calc Funktion', function() {
     var calculator;
    //Wird vor jedem Test ausgeführt
    beforeEach(function() {
        calculator = new calc();
    });

    it('2 plus 4 ergibt 6', function() {
        var result = calculator.add(2, 4);
        expect(result).toBe(6);
    });
});

Dabei kann man mit Jasmine die Test sehr einfach strukturieren über die “describe” und “it” Funktionen. Bei beiden Funktionen wird erst ein String übergeben, bei “describe” handelt es sich um die Beschreibung der Kategorisierung der darunterliegenden Tests und bei “it”  um die direkte Beschreibung eines Tests. Ich verweise an dieser Stelle aber am einfachsten auf die Dokumentation von Jasmine 2.2, denn diese ist hervorragend umgesetzt und zeigt alle Funktionen von Jasmine an kurzen und einfachen Beispielen.

Vor dem jeweiligen Test muss noch die Referenz auf die Dateien angegeben werden die für diesen Test benötigt werden. Hier am einfachsten die Daten per Drag und Drop in die Testdatei ziehen und VS legt automatisch die Referenzen an. Wichtig ist außerdem die richtige Reihenfolge der Referenzen. Bei mir habe ich hin und wieder das Problem das die Referenzen absolut eingetragen werden und nicht relativ, wenn hier evtl. jemand die Lösung kennt das der Pfad immer relativ eingetragen wird, würde ich mich über einen Hinweis freuen.

Damit man die JavaScript Unit Tests auch im Visual Studio ausführen kann und die Ergebnisse z.B. auch im Testexplorer angezeigt werden, kenne ich bisher zwei verschiedene Plugins die beide auch unabhängig voneinander funktionieren.

1. Unit Tests mit Resharper

Resharper unterstützt von Haus aus Unit Tests mit dem Jasmine Framework. Dafür muss man nur unter “RESHARPER => Options” die passenden “Unit Testing” Einstellungen vornehmen.

image

Da ich bei mir Jasmine verwende, ist bei mir nur Jasmine ausgewählt. Wenn man nicht möchte das beim Ausführen der Tests immer ein Browserfenster geöffnet wird, kann man PhantomJS verwenden und einfach den Pfad zur “phantomjs.exe” angegeben. Damit werden die Tests dann im Hintergrund ausgeführt ohne zusätzliches Browserfenster.

Hinweis: Bei Resharper ist über dem Test kein Referenz link auf die “Jasmine.js” Datei notwendig. Ich füge ihn aber für IntelliSense immer ein.

Das gute an Resharper ist, das dieser die Tests direkt in der JavaScript Datei erkennt und genau wie bei .NET Tests die Testicons direkt daneben anzeigt.

image

Auch der Testexplorer von Resharper funktioniert mit den JavaScript Unit Tests problemlos und zeigt an welche Tests erfolgreich bzw. fehlgeschlagen sind.

image

2. Unit Tests mit Chutzpah

Bei Chutzpah handelt es sich ebenfalls um eine VS Extension, die aber in diesem Fall kostenlos ist und über “TOOLS => Extensions und Updates…” installiert werden kann.

image

Ich habe bei mir beide Chutzpah Erweiterungen installiert. Damit bekommt man zum einen alle JavaScript Unit Tests auch im VS enthaltenen Testexplorer angezeigt und man kann die Tests von hier aus auch starten.

image

Mit der Context Menü Erweiterung kann man auch direkt über die rechte Maustaste den gerade ausgewählten Test oder für eine ganze Datei die Tests ausführen lassen.

image

Des weiteren ist es möglich den Test im Browser anzuzeigen und direkt im Browser zu debuggen, denn hier wird ein Pfad zu einer lokal erstellten HTML Datei geöffnet die alle wichtigen Verweise und die JavaScript Testfälle enthält. Was ich persönlich sehr cool finde, wenn man doch einmal nicht versteht warum der Test nicht funktioniert kann man hier noch einmal im Detail die aktuellen Objekte überprüfen.

image

Außerdem soll es mit Chutzpah auch möglich sein die JavaScript Unit Tests auf dem Build Server auszuführen, hier habe ich bisher aber keine Erfahrungen sammeln können, aber die beiden folgenden Links helfen euch evtl. weiter:

http://blogs.msdn.com/b/visualstudioalm/archive/2012/07/09/javascript-unit-tests-on-team-foundation-service-with-chutzpah.aspx

http://www.rosher.co.uk/post/Unit-Testing-AngularJS-with-Jasmine-Chutzpah-and-Visual-Studio

Wenn jemand weiß wie man die JavaScript Tests in VS automatisch ausführen lassen kann wenn sich an den Tests oder den Codefiles etwas ändert würde ich mich ebenfalls über einen Link freuen.

Advertisements

Ein Gedanke zu „JavaScript Unit Tests mit Jasmine und Visual Studio (Resharper oder Cutzpah)

  1. Pingback: Unit Test AngularJS directive mit templateUrl in VS und Chutzpah | SquadWuschel's Blog

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s