© Excellent backgrounds/Shutterstock.com
Teil 3: Test und Build

Das Ziel ist das Ziel


Die Entwicklung von Single Page Applications (SPA) stellt den Entwickler vor viele Aufgaben, um eine produktionsreife Applikation zu erhalten. Dabei sollte auch das automatisierte ­Testen nicht zu kurz kommen.

Artikelserie

Teil 1: Authentifizierung und Autorisierung

Teil 2: Wiederverwendbare Pakete

Teil 3: Test und Build

Um aus den einzelnen Dateien eines Angular-Projekts eine lauffähige Software für den Browser zu erhalten, sind einige Schritte notwendig. Für diese Aufgabe eignet sich der Module Bundler webpack [1] besonders gut. Durch einen definierten Einstiegspunkt wie etwa main.ts oder vendor.ts einer typischen Angular-Anwendung löst das Tool alle referenzierten Dateien (Module) durch alle Ebenen auf, die dann verarbeitet, transformiert sowie optimiert und als Bundle bereitgestellt werden.

Durch die Nutzung von Frameworks wie Angular und seiner Konzepte wandert natürlich auch immer mehr Logik in den Clientteil der Applikation. Manuelles Testen reicht nach kurzer Zeit nicht mehr aus, um die fortlaufende Stabilität der eigenen Anwendung zu gewährleisten und deren Komplexität zu kontrollieren. Automatisierte Tests helfen einem jedoch nicht nur dabei, Funktionalität schnell zu prüfen, sie beeinflussen auch positiv die Art, wie Programmcode geschrieben wird. Dieser Artikel beschreibt anhand eines Beispiels [2] den Umgang mit webpack sowie die Nutzung von Karma und Jas­mine, um Unit-Tests zu erstellen und daraus Reports für CI-Umgebungen wie Jenkins zu generieren. Außerdem gehen wir darauf ein, wie diese Tasks über den Node-Package-Manager npm in einen Maven-Build-Prozess integriert werden können, sodass am Ende eine fertige JAR-Datei zur weiteren Verarbeitung vorliegt.

Projekte mit webpack

Als Module werden nicht nur TypeScript-Dateien angesehen, sondern sämtliche Dateien, die über Referenzen erkennbar sind. So kann webpack neben den üblichen, wie etwa import oder require, auch beispielsweise src: url('…') in CSS-Dateien oder <img src="…" /> in HTML auflösen. Damit webpack weiß, wie gefundene Dateien verarbeitet werden müssen, ist es notwendig, so genannte Loader zu definieren. Diese reagieren anhand einer selbst definierten Regex auf passende Dateien.

Oft wird webpack als Task-Runner wie Grunt oder gulp missverstanden. Task-Runner arbeiten konfigurierte Tasks wie das Kopieren oder Komprimieren von Dateien nacheinander ab. Das Gesamtergebnis der einzelnen Tasks ist für den Task-Runner nicht relevant. webpack kann in diesem Zusammenhang als ein Task ang...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang