Archiv für den Monat Februar 2015

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.

Resharper “Code Template” für Lambda Ausdruck “x => x.” erstellen


Wenn ich Lambda Ausdrücke verwende steht am Ende häufig “x=<x.” in der Codezeile. Das nervt auf Dauer doch etwas, vor allem wenn man Unit Tests schreibt und beim Mocken doch sehr oft auf die Lambda “Definition” zurückgreifen muss. Hier hat mir zum Glück Resharper mit seinen Code Templates weitergeholfen, die man selbst beliebig erweitern kann. Denn mit einem Code Template schreibe ich am ende nur noch ein “l” und drücke zweimal die Tab Taste und schon sieht es immer gleich aus “x => x.”.

Dafür muss man einfach in Visual Studio unter “Resharper –> Templates Explorer…” den Template Explorer öffnen und ein neues Template anlegen für C#

image

Im Neuen Template dann einfach die Beschreibung und den ShortCut angeben, sowie das passende Template

image

Wenn man als Lambda Ausdruck den Namen der Variable immer selbst bestimmen möchte dann sollte man als Template eintragen:

$x$ => $x$.

Wenn man aber meist ein und die selbe Variable verwendet z.B. x:

x => x.

als Template eintragen.

Wenn man jetzt irgendwo in C# im Code ein “l” schreibt steht direkt im IntelliSense unser Template zur Verfügung und kann mit “Tab” ausgewählt werden.

image

image 

Eine sehr einfache aber doch sehr effektive Lösung für mein Problem.