JavaScript asyncrone Testfälle mit Mockjax und Jasmine erstellen

Sobald man sich im Internet befindet wird man merken das die Testfälle etwas anders „gestrickt“ werden müssen, zbsp. wenn man auf die Antwort warten muss.
Das testen von Asyncronen Funktionen möchte ich gerne in diesem Tutorial beschreiben.

Mocken von Ajax Request für Testzwecke

Durch die Same Origin Regel ist es nicht möglich vom lokalen Computer, Scripte aus dem Internet zu benutzen, jedoch möchten wir gerne unsere Methoden Testen dafür gibt es die Möglichkeit Funktionen zu Mocken d.h. zu simulieren.

Für diesen Testfall benutze ich Mockjax welches einfach zu implementieren und noch einfacher zu benutzen ist.

Jasmine Testprojekt

Als Projekt verwende ich das Testprojekt aus dem Tutorial
Jasmine JavaScript Test, „toBe || not.toBe“ wieder.

Aufbau eines Mock Objektes

Ein einfaches Mock Objekt von Mockjax ist wiefolgt aufgebaut :

AttributErläuterungWerte
urlDie Adresse welche simuliert werden soll, diese muss auf eine reale Datei/ Adresse zeigen.login.php
dataTypeDer Datentyp des Rückgabe wertes, bei Text kann dieses Attribut weg gelassen werden‚json‘, ‚html‘, ‚xml‘
responseTimeAntwortzeit in Millisekunden1000
responseTextAntwort des MockObjektes‚Hello World‘
{say: ‚Hello World!‘}

Es gibt noch weitere Attribute welche auf der GitHub Seite vom Mockjax Plugin beschrieben werden.

Einbinden von Mockjax

Für das Mocken wir „nur“ die JavaScript Datei „jquery.mockjax.min.js“ mit

in die Datei „SpecRunner.html“ eingebunden. Es ist darauf zu achten das dieses nach dem einbinden von jQuery geschieht.

Einen Callback simulieren

Um einen einfachen Callback zu simulieren kann man folgenden Code verwenden.

Wenn man nun ein Ajax Request auf die Adresse „login.php“ erstellt wird unser Mockobjekt ausgeführt.

Wenn man diese Funktion aus einer HTML Seite aufruft dann erhält man folgende Ausgabe auf der Konsole.

FireBug Konsolenausgabe
FireBug Konsolenausgabe

Als ersten Eintrag sieht man das gemockte Objekt mit seinen Attributen und nach kurzer Zeit (1sek.) erscheint der Wert „Hello World!“.

Besonderheit beim Attribut URL

Das Attribut ‚URL‘ sollte unique d.h. einzigartig sein, denn wenn man 2x das gleiche Mockobjekt jedoch mit unterschiedlichen datenTypen oder Rückgabe werte erstellt so wird immer das erste erstellte Objekt gefunden und benutzt.

Hier ein Beispiel:

Durch dieses Beispiel wird deutlich warum das URL Attribut unique sein muss denn woher soll der Ajax aufruf wissen welches Objekt jetzt aufgerufen werden soll?

Mögliche Rückgabewerte eines Mockobjektes

Es ist nicht nur möglich einfache Werte wie „Hello World!“ zurück zu geben sondern auch komplexe Objekte wie ein JSON, HTML oder XML Objekt.
Für das Mocken von XML Objekten wird ein das XML DOM Plugin benötigt.

Datentyp Text

Der einfachste Datentyp ist Text.

Datentyp JSON

Ein JSON Objekt, ist ein Objekt mit Key Value paaren. Ein Mockobjekt mit einem Rückgabewert für ein JSON  Objekt könnte etwa so aussehen:

Datentyp HTML

Der Datentyp HTML kann eine komplexte oder einfache HTML Struktur zurück liefern.

Datentyp XML

Ähnlich wie beim HTML kann auch XML eine Struktur zurück liefern jedoch wird für diesen Datentyp ein extra Plugin benötigt.

Erstellen eines asyncronen Testfalls mit Jasmine

Da wir jetzt mit Mockjax uns Objekte mocken (simulieren) können, wollen wir nun ein asyncronen Testfall erstellen.

Zu allererst müssen wir mit der Funktion „beforeEach“ unsere asyncrone Funktion aufrufen. Nachdem aufrufen der Funktion wird ein Timeout („setTimeout“) gesetzt, in diesem Beispiel sind es 2 Sekunden. Ist der Timeout erfolgt so wird die Funktion „done();“ aufgerufen somit ist der Timeout erfolgreich abgehandelt und es wird der eigentliche Testfall aufgerufen in welchem wir auf das erwartete Ergebnis prüfen.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.