Dank dem Angular CLI ist das Setup ein Kinderspiel. Wird ein neues Angular-Projekt über das Angular CLI erstellt, wird die Testumgebung bereits konfiguriert sowie die bewährte Kombination aus Jasmine als Testframework und Karma als Testrunner installiert. Jasmine bietet dabei einem Entwickler alles, was er zum Testen braucht, während das Testframework Mocka zum Beispiel nur die Basics abdeckt.

Die Testausführung erfolgt über die Kommandozeile via ng test. Möchte man die Codeabdeckung in der Power Shell angezeigt bekommen, kann die Option --code-coverage hinzugefügt werden. Weitere nützliche Optionen können in der Dokumentation von Angular.io nachgeschlagen werden (https://angular.io/cli/test).

Tests in Jasmine beinhalten grundlegende Elemente, die in Tabelle 1 näher beschrieben sind.
Tabelle 1: grundlegende Bestandteile eines Unittests in Jasmine

Die Vorbereitung der Testumgebung gestaltet sich teilweise etwas aufwendig, da man alles, was Angular einem sonst abnimmt, selbst ausführen muss. Sobald aber die Testumgebung steht, sind die einzelnen Komponenten in Angular relativ einfach getestet. Abbildung 1 zeigt eine vorbereitete Testumgebung zum Testen einer Toolbox-Komponente.

Die Umgebung wird in der beforeEach()-Methodevon Jasmine vorbereitet, sodass jeder Test in einer sauberen Umgebung läuft. Diese Methode wird zweimal aufgerufen. Einmal, um mit Hilfe der configureTestingModule-Methode das Testmodul zu erstellen. Dies ist ein asynchroner Prozess, weshalb er im async-Helper von Angular gekapselt wird. Noch einmal wird beforeEach() aufgerufen, um mit Hilfe der createComponent-Methode die Komponente zu erzeugen. Die createComponent-Methode gibt eine sogenannte ComponentFixture zurück, über die man mit der componentInstance-Eigenschaft Zugriff auf die Komponente bekommt. Durch den detectChanges()-Aufruf auf die ComponentFixture wird das Data Binding zwischen Komponentenklasse und Template aktiviert.




 

Abbildung 1: Vorbereitete Testumgebung

Wird in der Komponente ein Service via dependency injection eingebunden muss dieser auch vor jedem Test definiert und im TestBed injected werden. Hierzu schafft ein Stub Abhilfe, mit dem die Methoden des Service imitiert werden. In der configureTestigModule-Methode des TestBed wird dieser ServiceStub unter providers anstelle des echten Service eingebunden.

Mit diesem Setup können nun die Eigenschaften und Methoden der Komponente getestet werden und weitere Tests geschrieben werden.

Als Fazit lässt sich sagen, dass das Angular CLI bereits gute Templates liefert und die Arbeit erleichtert. Wenn man eine Weile damit gearbeitet hat, lassen sich auch die Fehler schnell finden und beheben. Dennoch wäre beim Erstellen umfangreicher Service-Stubs noch mehr Hilfestellung wünschenswert.

Quellen:

• https://entwickler.de/online/javascript/angular-testing-579793020.html
• https://angular.de/artikel/angular-testing/
• https://raygun.com/blog/mocha-vs-jasmine-chai-sinon-cucumber/
• https://angular.io/cli/test

Dieser quiTeq-Beitrag kommt aus Berlin.