© saicle/Shutterstock.com
Setup und Testen von AngularJS-Applikationen

Dschungelkönig


AngularJS wurde mit einem Fokus auf Testbarkeit entwickelt. Das bedeutet nicht nur, dass Ihnen das Framework bei der Erstellung von Tests nicht im Weg steht, sondern Sie sogar bei der Formulierung von Tests unterstützt. In der Realität sieht es allerdings eher traurig aus, wenn es um gut getestete AngularJS-Applikationen oder gar testgetriebene Entwicklung mit AngularJS geht. Deswegen wollen wir das Dickicht des Testdschungels etwas lichten.

Dieser Artikel soll etwas Licht ins Dunkel bringen und Sie motivieren, Tests für Ihre Applikation zu schreiben. Das bedeutet eigentlich gar nicht so viel Aufwand und gibt Ihnen Sicherheit und eine gute Ausgangslage für eine Erweiterung oder Veränderung Ihrer Applikation.

Wo liegt das Problem?

Anfänglich ist es sehr einfach, mit AngularJS vorzeigbare Ergebnisse zu liefern. Sie generieren die HTML-Struktur der Seite, erstellen ein Modul für die Applikation und schreiben den ersten Controller. Dann noch schnell die Daten per $http, ngResource oder Restangular vom Server geholt und per ng-repeat dargestellt. Ein Formular zum Anlegen und Bearbeiten der Daten und schon steht der erste Prototyp. Dann kommen noch ein paar Erweiterungen hinzu, hier noch eine Idee ausprobiert, ein neuer Service eingefügt, der einen Teil der Businesslogik enthält, und schon haben Sie eine nette kleine Applikation. In der ganzen Euphorie ist eins allerdings auf der Strecke geblieben: die Tests. Das Fehlen von Tests hat meist gute Gründe – zum Beispiel bedeutet das Schreiben von Tests Aufwand. Schreiben Sie also einen oder mehrere Tests oder lassen Sie die Energie lieber in das noch nicht so komplexe Feature laufen? Außerdem testen Sie gerade zu Beginn der Entwicklung keine Systemkomponenten wie $http oder ng-repeat.

Das mag stimmen, allerdings müssen Sie rechtzeitig den Absprung schaffen und damit beginnen, Tests zu schreiben, denn je länger Sie damit warten, desto aufwändiger wird es, sie in die Applikation zu integrieren. Irgendwann verlassen Sie den von AngularJS vorgegebenen Pfad und müssen eigene Logik implementieren. Spätestens, wenn Sie mit der Erstellung von Services beginnen oder komplexere Routinen in Ihren Controller einbauen, benötigen Sie Tests. Sobald Sie anfangen, zwischen verschiedenen Komponenten zu kommunizieren, wird die Situation noch unübersichtlicher, denn eine Änderung in einem Controller oder Service kaskadiert durch die halbe Applikation und ruft dabei unvorhergesehenes Verhalten hervor. Dabei steigt das Risiko, dass sich Fehler in Ihre Applikation einschleichen, stetig. Wann ist also der richtige Zeitpunkt, und wie beginnt man am besten mit dem Testen?

Wie unterstützt AngularJS die Erstellung von Tests?

Schon bei der initialen Entwicklung haben die Entwickler von AngularJS viel Wert auf Testbarkeit gelegt. Das macht sich am deutlichsten bemerkbar, wenn Sie einen Blick auf die Struktur des Frameworks und die Art und Weise, wie eine Applikation gebaut wird, werfen.

Der Schlüssel zur Testbarkeit von AngularJS liegt in der losen Kopplung der einzelnen Komponenten. Sie bauen eine Applikation nicht in einem großen Block und auch nicht in einem etwas kleineren Block pro Feature, sondern strukturieren die Applikation in kleine Einheiten, die über definierte Schnittstellen miteinander kommunizieren. Diese Struktur ermöglicht den Umgang mit Abhängigkeiten, sodass Sie immer nur eine Einheit testen können und sich keine Gedanken über den Rest Ihrer Applikation machen müssen. Als Hilfestellung bietet Ihnen AngularJS einen Dependency-Injection-Mechanismus, bei dem Sie lediglich angeben müssen, welche Komponenten Sie benötigen. AngularJS stellt Ihnen diese dann zur Verfügung. Jede Abhängigkeit kann in einem Test durch ein Test-Double ersetzt werden, bei dem Sie bestimmen können, wie es sich im Testszenario verhalten soll. Funktionieren sämtliche Einheiten Ihrer Applikation für sich genommen, bildet dies eine solide Basis für die gesamte Applikation, die Sie im nächsten Schritt dann in Ihrer Gesamtheit testen sollten. Aber dazu später mehr.

Zunächst erfahren Sie mehr darüber, was Sie tun müssen, um Ihre Testumgebung aufzusetzen, und wie Sie die einzelnen Komponenten, also Controller, Services, Filter und Direktiven, testen können.

Setup

Wann schreiben Sie Tests? Entweder wenn Sie merken, dass Sie in wirklichen Schwierigkeiten stecken und Ihre Applikation langsam aber sicher beginnt, auseinander zu brechen oder wenn das Testen einfach ist und keine sonderliche Hürde bedeutet. Die erste Situation ist zugegebenermaßen recht unangenehm und eigentlich auch schon viel zu spät, denn Sie sollten nie in eine solche Lage geraten. Aus diesem Grund sollten Sie sich eine Umgebung schaffen, in der Sie von Ihrem Framework und den eingesetzten Entwicklungswerkzeugen unterstützt werden, sodass Ihnen die Erstellung der Tests leicht von der Hand geht.

Eine Testumgebung für AngularJS besteht normalerweise aus AngularJS und drei zusätzlichen Komponenten: Karma, Jasmine und angular-mocks.

Karma: Grundsätzlich benötigen Sie Karma nicht, um Ihre AngularJS-Applikation zu testen. Karma stellt die Infrastruktur für Ihre Tests zur Verfügung. Es handelt sich dabei um ein Framework, das in Node. js geschrieben ist und das dazu dient, verschiedene Browser zu registrieren und die Tests auf diesen auszuführen. Die einzige Voraussetzung für die Ausführung von Karma ist das Vorhandensein von Node.js auf Ihrem System. Karma ist modular aufgebaut, sodass Sie selbst über den genauen Aufbau Ihrer Infrastruktur entscheiden können. Folgende Schritte müssen Sie durchführen, um Karma auf Ihrem System zu installieren:

  • npm install karma: Dieses Kommando installiert das Karma-Basissystem im node_modules-Verzeichnis Ihrer Applikation. Sie können Ihre Tests über den Befehl ./node_modules/karma/bin/karma start ausführen.

  • npm install karma-jasmine: Karma ist lediglich eine Infrastrukturkomponente. Damit Sie Ihre Tests schreiben können, benötigen Sie ein Testframework wie zum Beispiel Jasmine oder Mocha. karma-jasmine ist der Adapter für das Jasmine-Testframework, der dazu dient, die in Jasmine verfassten Tests auf die Infrastruktur umzusetzen und in den registrierten Browsern auszuführen.

  • npm install karma-chrome-launcher: Auch wenn es um die zu startenden Browser geht, macht Ihnen Karma keine Vorgaben. Das bedeutet allerdings, dass Sie die verschiedenen Launcher, die sich um das Starten der Browser kümmern, selbst installieren müssen. Möchten Sie zum Beispiel Chrome verwenden, müssen Sie den karma-chrome-launcher installieren.

  • npm install –g karma-cli: Das karma-cli-Paket ist wiederum optional und für Entwickler gedacht, denen das Startkommando zu lang ist. Das global (-g) installierte Paket sorgt dafür, dass Sie Ihre Tests einfach über den Befehl karma start ausführen können.

Bis auf das letzte können alle diese Kommandos mit der Option --save-dev installiert und so die Abhängigkeiten in die Paketdefinition aufgenommen werden.

Jasmine: Durch die Installation von Karma und den entsprechenden Plug-ins wird automatisch auch Jasmine installiert. Sollten Sie sich allerdings gegen Karma als Infrastrukturkomponente entscheiden, können Sie Jasmine auch einfach auf der Produktseite [1] herunterladen. Die wichtigsten Funktionen von Jasmine finden Sie in Tabelle 1.

Methode

Bedeutung

Describe("name", function)

Definiert eine Testsuite. Sie können mehrere Testsuites parallel oder ineinander geschachtelt definieren. Eine Testsuite gruppiert Tests, die ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang