Heute möchte ich über das Thema Mocking unter Javascript schreiben. Wie schon bei den Testing Frameworks, gibt es auch einige Mocking Frameworks. Ich habe mich wieder über TestDrivenWebsites inspirieren lassen und mich für JsMockito entschieden, welcher ein Klon vom entsprechenden JMock für Java ist. Ich setze in diesem Artikel voraus, das JsTestDriver installiert und einsatzbereit, da JsMockito integriert wird.

Dieses mal hatte ich es aber nicht so einfach, bis ich die ersten funktionierenden Beispiele hatte. Folgend liste ich die wichtigsten Quellen auf, auf welchen ich Beispiele für JsMockito gefunden habe:

• JsMockito Homepage
• Sourcen auf Github
• JsMockito API

Da in den kurz gehaltenene Beispielen die Benennung der Variablen vielleicht nicht immer Ideal gewesen ist (vorallem beim Function Mocking), dauerte es eine Weile, bis ich begriffen hatte, wie das Mocking anzuwenden ist. Ich versuche darum nochmals ein Beispiel durchzuspielen und auf die wichtigsten Punkte einzugehen.

Installation

Es müssen die Sourcen von JsHamcrest (JsMockito baut auf JsHamcrest auf) und JsMockito heruntergeladen und über die JsTestDriver.conf eingebunden werden.

Danach folgt die Integration in JsTestDriver mittels

JsHamcrest.Integration.JsTestDriver();
JsMockito.Integration.JsTestDriver();

Das wärs schon, JsMockito sollte nun einsatzbereit sein.

Mocken von Objekten

Ich arbeite momentan an einem Projekt, bei dem loose Kopplung von Objekten und Funktionen nicht existiert. Sprich, es werden neue Instanzen ohne Dependency Injection erzeugt. Somit wird das Mocken noch um einiges erschwert.

Ich möchte nun anhand eines Beispiel zeigen, wie man die Abhängigkeiten mocken kann.

myapp = {
    Greeter: {
        greet: function(name){
           return "Hello " + name + "!";
        },
        goodbye: function(name){
            return "Bye " + name + "!";
        }
    }
};

Ich habe ein Objekt Greeter mittels Object Literals erzeugt.

Nun folgt der Test Code.

TestCase("GreeterTest", {
    setUp: function() {
        //tmp backup, because myapp.Greeter is global and the mock
        //is overwriting the methods i mock
        this.tmpObjectGreeter = myapp.Greeter;
    },

    testMockupObjectGreeter: function(){
        //prepare an object for mocking - some stubbing functions will be added
        //to the object
        myapp.Greeter = mock(myapp.Greeter);
        //if i call greet() - return value = "Hello Mockito"
        //else nothing is happening to other functions in the object
        //same behaviour as before the mock
        when(myapp.Greeter).greet().thenReturn("Hello Mockito!");

        assertEquals("", "Hello Mockito!", myapp.Greeter.greet("Mr. Johnson"));
        assertEquals("", "Bye Mr. Johnson!", myapp.Greeter.goodbye("Mr. Johnson"));
    },

    tearDown: function() {
        //Restore myapp.Greeter to original
        myapp.Greeter = this.tmpObjectGreeter;
    }
});

Da ich beim mocken das real existierende globale Objekt Greeter verändere, muss ich Greeter im setUp zwischenspeichern und beim tearDown wieder in den Originalzustand zurückversetzen. Wie schon im letzten Artikel über JsTestDriver erwähnt, werden veränderte Objekte, Funktionen und Variablen nicht mehr in den Originalzustand zurückversetzt, wenn die Tests erneut aufgerufen werden.

testMockupObjectGreeter zeigt nun auf, wie man ein Objekt mocken kann. Der wichtigste Teil ist die Zeile mit when()… Hier kann definiert werden, welche Funktionen im Objekt gemockt werden sollen und wie der Mock beim Aufruf reagieren soll. thenReturn ist der einfachste Fall. Hier wird definiert, dass egal wie greet() aufgerufen wird, immer “Hello Mockito!” zurückgegeben wird.

Dieses when/then Konstrukt ist sehr mächtig. Man kann beliebige Dinge zurückgeben – primitive Datentypen, Funktionen, Objekte usw.

Im zweiten Teil werde ich auf das mocken von globalen Funktionen eingehen und noch ein bisschen mehr über die Möglichkeiten mit when/then aufzeigen.

Da ich mich momentan sehr für Qualität in der Softwareentwicklung interessiere, darf das Unit Testing natürlich nicht fehlen. Mit PHPUnit konnte ich nun schon einige sehr positive Erfahrungen machen. Da auch viele PHP Projekte mit Javascript arbeiten, suchte ich deshalb auch nach einen Testwerkezeug für JS.
Auf der Webseite Test Driven Websites bin ich auf einen schönen Javascript Unit Testing Framework Vergleich gestossen. Der Favorit war ganz klar JsTestDriver und nach einigem weiteren Surfen im Netz, hat sich für mich dieser Eindruck bestätigt. Da es sehr viele Test Frameworks für Javascript gibt, habe ich den allgemeinen Eindrücken im Netz einfach vertraut und mich für JsTestDriver entschieden.

Highlights von JsTestDriver

• xUnit konformer Syntax (sprich, der Syntax lehnt sich an PHPUnit oder Junit an)
• Die Tests benötigen kein HTML File, wie in anderen JS Testframeworks
• Client/Server Architektur für Tests (Das Prinzip ist ähnlich wie bei Selenium) -> Der Test-Server muss somit nicht lokal laufen
• Durch die Client/Server Architektur können mehrere Browser gleichzeitig getestet werden
• Plugin für Eclipse und IntelliJ IDEA – bei jedem Save werden die Tests automatisch durchgeführt
• Plugin Architektur – JsTestDriver bietet Plugins um andere Unit Testing Frameworks oder auch Mocking Frameworks zu integrieren
• Problemlos in Continuous Integration Prozess integrierbar

Stolpersteine

• JsTestDriver besitzt keine Möglichkeit zu mocken (ok, alle anderen JS Frameworks auch nicht). Es kann aber problemlos ein Mocking Framework eingebunden werden
• Achtung bei globalen Variablen/Funktionen/Objekte – werden die globalen Variablen beim Testdurchlauf überschrieben, haben sie beim nächsten Durchlauf immer noch den überschriebenen Wert. Dies gilt so lange, bis entweder der Server neu gestartet wird, oder das Source File, wo die Variable deklariert wurde verändert wird. Der Grund ist Performance: Der Server cacht alle .js Dateien und lädt sie nur neu, wenn eine Datei auch verändert wurde.

Installation

Auf der JsTestDriver Homepage, wird sehr einfach beschrieben, wie man das Framework installieren und konfigurieren kann.
Auf der Homepage von James Carr erfährt man weitere nette Details über JsTestDriver.

Code Example

TestCase("MyTestCase", {
    setUp: function() {
        //...
    },

    testAssertionWithMessage: function() {
        assertTrue("this is not true", false);
    },

    testAssertionWithoutMessage: function() {
        var actual = 5;
        assertEqual(5, actual);
    },

    tearDown: function() {
        //...
    }
};

Fazit

JsTestDriver ist für mich absolut empfehlenswert. Ich konnte mich dank den PHPUnit Kenntnissen sehr rasch im Framework zurechtfinden und hatte schon nach kurzer Zeit die ersten Tests geschrieben. Die grössten Vorteile sind für mich: CI, erweiterbar mit anderen Frameworks, Multibrowsertesting