Jasmine JavaScript Test, „toBe || not.toBe“

Wie man Jasmine in eine Webanwendung integriert habe ich im Beitrag JavaScript Test mit Maven und Jasmine erläutert. Jedoch kann man das Testtool nicht nur für Webanwendungen sondern auch für Webseiten mit PHP und JavaScript verwenden.
Für ein aktuelles Projekt habe ich alle meine JavaScript Methoden mit Jasmine Testfälle abgedeckt und konnte so mein refactoring ganz entspannt entgegen sehen.

Jasmine API / Dokumentation

Es gibt eine gute und ausführliche Dokumentation zu Jasmine unter http://jasmine.github.io/ 

Es gilt zu beachten das ab der Version 2.0 eine große Änderung an der API durchgeführt wurde somit ist eine abwärtskompatibilität nicht mehr gegeben.

Download der Standalone Version

Es gibt verschiedene Möglichkeiten Jasmine in ein Projekt zu integrieren, bei einer „einfachen“ Webseite kann man auf die Standalone Version zurückgreifen welche unter https://github.com/jasmine/jasmine/releases zu finden ist.

Nachdem nun die Standalone Version heruntergeladen wurde kann dieses in ein Verzeichnis der Webseite entpackt werden. Die Verzeichnisstruktur könnte etwa so aussehen.

Testwebseite Verzeichnisstruktur
Testwebseite Verzeichnisstruktur

Sollten Sie eine andere Struktur bevorzugen müssen ggf. Links zu Quellcodedateien angepasst werden.

Erster Start der mitgelieferten Testfälle

Der Standalone Version von Jasmine liegen eine Handvoll testfälle bei welche man mit Hilfe der Datei „SpecRunner.html“ aufrufen kann.

Jasmine SpecRunner.html
Jasmine SpecRunner.html

Eigene Testfälle Schreiben

Möchte man nun eigene Testfälle Schreiben so muss nur die Datei „SpecRunner.html“ erweitert werden.
Wenn man die Datei öffnet so erkennt man an den vorhandenen Kommentaren was benötigt wird und wo die Testfälle abgelegt werden müssen / sollten.

Wenn man auf die Source der Webseite verweisen möchte muss man nur den Verzeichnisbaum nach unten navigieren. In meinem Beispiel sieht das folgendermaßen aus :

Nun doch die Datei mit dem Testfall bekannt machen

Und schon kann unser Testset ausgeführt werden.

Jasmine Testset
Jasmine Testset

Aufbau eines Jasmine Testsets

Wie ein Testset aufgebaut ist möchte ich kurz anhand des folgenden Beispiels erklären.

Globale Funktion „descripe“

Ein Testset beginnt immer mit dem Aufruf der globalen Jasmine Funktion „descripe“.
Diese Funktion bekommt 2 Paramater ein String Wert für den Namen oder den Titel und eine eine Funktion welche die Testfälle beinhaltet (welche wiederum Funktionen beinhalten…)

Man man die Testfälle insich verschachteln so das eine Art Baumansicht der Testfälle entsteht.

Globale Funktion „IT“

Die globale Funktion „it“ bekommt auch 2 Parameter welche wieder ein String Wert für den Namen bzw. für dne Titel und eine Funktion wo bei man die Funktion weglassen kann und somit einen Test im Status „Pending“ erzeugt hat aber dazu später mehr.

Testfunktion „EXPECT“

Ein prüfen des zu Erwarteteten Ergebnisses in einem Testfall wird mit der Funktion „expect“ und einem folgenden Matcher gelöst.

Prüfen auf gleichheit mit „toBe“

Mit dem Matcher „toBe“ können 2 Werte mit einander verglichen werden. Die Bedingung gilt als Wahr wenn beide Werte gleich sind.
(Bei Stringwerten wird auf Groß/Kleinschreibung geachtet.)

Prüfen auf Boolean.TRUE mit „.toBeTruthy“

Möchte man eine boolische Variable oder einen Ausdruck prüfen so kann man mit

auf den den positiven Wert prüfen.

Ganze Objekte mit „.toEqual“ prüfen

Da man mit JavaScript auch OOP kann ist es manchmal sinnvoll ganze Objekte zu vergleichen.

Prüfen mit einer „ungleich“ Bedingung – „.not“.

Um eine Bedinung umzukehren d.h. auf Boolean.FALSE oder ein Wert sollt ungleich einem anderen sein, muss nur das Wort „.not“ dem eigentlichen Matcher vorrangestellt werden.

Prüfen mit Regulären ausdrücken „.toMatch“

Was währen Testfälle ohne Reguläre ausdrücke?
Es gibt nur 2 Arten wie man mit einem Regulären Ausdruck eine Bedingung prüfen kann:

Erstens kann man den Regulären ausdruck der Funktion „.toMatch“ mit einem Backslash umgeben übergeben , jedoch ohne Anführungszeichen.

Oder aber ohne die umgebenen Backslashes dafür jedoch mit Anführungszeichen.

Das Ergebnis ist jeweils das gleiche.

Zahlen prüfen

Das Prüfen von Zahlen miteinander kann wiefolgt geschehen.

Array auf Inhalt prüfen mit „.toContain“

Ein Array kann man ganz simple mit dem Matcher „.toContain“ auf seinen Inhalt prüfen.

Ein Testfall / Testset deaktivieren

Möchte man ein bestehenden Testfall oder ein Testset deaktivieren so kann man dieses auf mehrere Arten lösen.

  • „xit“ oder „xdescripe“
  • Aufruf der Funktion pending();

Beide Methoden führen dazu das der Testfall nicht ausgeführt wird, jedoch darf der Testfall keine Syntaktischen Fehler enthalten.

Ein Testfall ohne Funktion definieren

Manchmal hat man Ideen für einen Testfall welche man erstmal beschreiben möchte aber noch nicht genau weiß wie dieser Implementiert werden kann. Dafür kann man den Testfall „it“ anlegen jedoch ohne den Funktionsparameter.

Dieser Testfall wird als „pending“ erkannt und nicht ausgeführt.
Sollte man jedoch den Funktionsparameter ausprogrammieren aber jedoch leer lassen so bekommt man folgende Warnung bei Ausführen des Testsets
„SPEC HAS NO EXPECTATIONS“.

Oberflächentest mit Jasmine und jQuery

JavaScript funktionen können nicht nur „Businesslogik“ erfüllen sondern können auch die Oberfläche einer Webseite manipulieren, dafür kann es sinnvoll sein auch diese Aktionen zu testen.
Für diesen zweck eignet sich das JavaScript Framework jQuery hervorragend da diese die Brücken zwischen den Browserunterschieden sehr gut schließt.

Einbinden von jQuery

Um jQuery in Jasmine Testfälle zu benutzen muss die Datei „jasmine-jquery.js“ aus dem GitHub Repository „velesin/jasmine-jquery“ geladen werden.

Erstellen einer Seite für die Oberflächentest

Da der Testfall für eine bestimmte Komponente einer Webseite ist, sollte diese Komponente welche den Testfall unterliegt in einer HTML Seite bereitgestellt werden.

Jasmine setzt hier auf eine vorgeschriebene Ordnerstruktur für die Ablage der Dateien.

Ordnerstruktur für Jasmine Fixtures
Ordnerstruktur für Jasmine Fixtures

Eine fixture Datei ist sehr minimalistisch aufgebaut, also ohne die Tags „html, head und body“ es werden „nur“ die HTML Komponenten implementiert welche für den Test benötigt werden.

In meinem Fall sieht die Datei wiefolgt aus:

Als „beweis“ das unsere Datei korrekt geladen wurde kann man folgenden Testfall verwenden.

Die Funktion „beforeEach“ führt vor jeder Ausführung eines Testfalls / Testsets eine definierte aktion aus, in diesem Fall ist es das laden der Fixture Datei.

Testen auf gesetzte CSS Klasse

Gegeben ist folgende Klasse welche die CSS Klasse einem HTML Objekt zuordnet.

Wenn nun in dem Testfall das HTML Element durch die oben genannte Klasse manipuliert wird können wir mithilfe „jasmine-jquery.js“ prüfen ob die Style Klasse gesetzt wurde.

Cachen von HTML Objekten

Da wir nun jQuery verwenden können wir die benötigten HTML Elemente in Variablen“cachen“. Dieses wird durch die Zuweisung eines Elementes zu einer Variable gelöst.

Der Hintergrund dieses Cachens von Elementen ist das bei jedem aufruf von $(„#id“) der gesamte DOM nach dem Element durchsucht wird.

Download des Testprojektes für die eigene Verwendung.

Verwandte Beiträge

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*