VS Code Plugin zur Erstellung von Angular Unittests

Thorsten Rintelen

Seit über 20 Jahren Software-Developer, Spezialisiert auf Angular, Teamleiter Entwicklung bei der traperto GmbH

TL;TR

Mit der VS Code Erweiterung Angular spec generator nachträglich Unittests generieren.

Unittests

In einer heilen rosaroten Entwicklerwelt werden Unittest vor oder direkt mit dem eigentlich Code geschrieben. Die Unittests sollen, auch wenn es komisch klingt, das eigentliche Entwickeln schneller machen. Fehler und Probleme fallen sofort auf (nicht erst in einer späteren Testphase) und geben dem Entwickler Sicherheit bei einer möglichen Refaktorierung des Codes. Aber die Entwicklerwelt ist leider nicht immer heile und rosarot. Manchmal werden die Unittests aus Zeitgründen hinten angestellt oder gar komplett gestrichen. Aus welchen Gründen auch immer, es kann passieren, dass ein Entwickler nachträglich Unittests schreiben möchte (oder muss?).

Angular schematics

Bei Angular gib es die schematics. Schematics sind ein bisschen mehr als Templates oder Vorlagen. Diese können per ng cli generiert und durch einige Abfragen clever genutzt werden.

Angular bietet zur Generierung von Code schematics an, so können z.B. Komponente, Services o.ä. einfach per cli Befehl generiert werden.

ng generate component <name> // kurz: ng g c <name>

Dies erzeugt in meinem Projekt eine neue Komponente mit allen nötigen Dateien und importiert diese ggf. automatisch im Module. Bei der Generierung von Code über die cli wird auch immer direkt der Unittest für die entsprechende Datei erstellt und soweit wie möglich vorkonfiguriert.

Unittests nachträglich schreiben

Wenn ich allerdings in einem Projekt fertige Komponenten, Servies o.ä. ohne Unittest vorfinde, bietet Angular aktuell nicht die Möglichkeit, nur den Unittest zu generieren. In so einem Fall würde ich in der Regel einen ähnlichen Test suchen, kopieren und entsprechend umschreiben.

Da mir dies auf Dauer zu fehleranfällig und zu aufwendig wurde, habe ich eine Erweiterung für die von mir genutze IDE VS Code geschrieben – den Angular spec generator.

Mit dieser Erweiterung kann in VS Code die gewünschte Angular-Typescript-Datei per Rechtsklick angesprochen werden. Der passende Unittest dazu wird dann automatisch generiert. Dies gilt für die Angular Elemente: 

  • component
  • service
  • guard
  • resolver
  • directive
  • pipe
  • interceptor

Fazit

Unittests sind wichtig. Schreibt Unittests. Für die nachträgliche Generierung in einem Angular Projekt nutzt gerne den Angular spec generator.