Suche

über alle News und Events

 

Alle News

 

Erfahren Sie mehr über den Erfolgsfaktor...

Weiterlesen

Nordex Energy Customer Success Story: Effiziente...

Weiterlesen

Das klingt perfekt: Einfacher Nachrichten- und...

Weiterlesen

Auf der INTEGRATE 2020 läutet Jon Fancey,...

Weiterlesen

20 Jahre ist es her, dass Dr. Felix Weil, Dr.-Ing....

Weiterlesen

Zunächst sind wir glücklich darüber, dass bislang...

Weiterlesen

Homeoffice, Online-Konferenzen, ein...

Weiterlesen

Digitalisierung in einer virtuellen Welt:...

Weiterlesen

Corona stellt uns vor viele Herausforderungen....

Weiterlesen

Die Herausforderungen zur Integration...

Weiterlesen

Unit-Testing in Angular – Get started

Tests sind in der Softwareentwicklung unumgänglich, dienen der Fehlervermeidung und dem schnelleren Finden von Fehlern in der Software. Angular ist dabei sehr gut vorbereitet, indem es auf verbreitete Standards und Bibliotheken setzt und diese frameworkspezifisch erweitert. Im Folgenden wird näher auf die Unittests in Angular eingegangen.

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:


Dieser quiTeq-Beitrag kommt aus Berlin von Kerstin.

 

Nehmen Sie gerne hier Kontakt zu uns auf

 

© QUIBIQ GmbH · Impressum · Datenschutz