Wie führt man Angular Unit Tests durch und warum?

Das Testen jeder Funktion (auch als Einheit bezeichnet) ist entscheidend, um sicherzustellen, dass jede Funktion im Programm wie geplant funktioniert. Beim Testen ist die Bewertung einer bestimmten Funktion im Vergleich zu einem ganzen Programm von Anfang bis Ende ziemlich unterschiedlich. An dieser Stelle kommt Unit Testing ins Spiel.

Angular ist ein Open-Source-, TypeScript-basiertes JavaScript-Framework. Da JavaScript eine leistungsstarke Programmiersprache ist, die zum Erstellen von Online-Apps verwendet wird, ist es wichtig zu verstehen, wie man Komponententests in JavaScript durchführt. In diesem Artikel wird untersucht, wie diese Tests durchgeführt werden, was zu verwenden ist und warum.

Was ist eckig?

Moderne Websites verwenden die Computersprache JavaScript (JS), die zahlreiche interaktive Elemente bietet, die Verbrauchern vertraut sind. Webentwickler verlassen sich häufig auf clientseitige JavaScript-Frameworks, um die Funktionalität zu gewährleisten und sicherzustellen, dass Websites und Online-Ressourcen ordnungsgemäß funktionieren.

Angular ist eine Technologie, die die Mittel zum Entwickeln einer Webanwendung bereitstellt, beim Design hilft und den zugrunde liegenden Code organisiert. Im Jahr 2010 veröffentlichte Google das JavaScript-Framework AngularJS. Es enthält eine Funktion, die Entwicklern die Erstellung umfangreicher Single-Page-Apps erleichtert. Der Name nachfolgender Versionen von AngularJS wird zu Angular abgekürzt.

Bedeutende Organisationen haben Angular zum Erstellen von Anwendungen verwendet, von denen einige zu Mainstream-Marken geworden sind. Wie zum Beispiel-

• Google Mail
• Youtube-TV
• Paypal
• Wix WebApps
• Microsoft-Web
• Upwork
• Freelancer

Warum sollten Sie Angular Apps testen?

Die Validierung einer Angular-Codebasis Funktion für Funktion ist der effektivste Ansatz, um die Codequalität zu verbessern, weniger Fehler in der Produktion und weniger toten Code zu haben, die Wartungskosten zu minimieren und ein schnelleres Refactoring und sogar Upgrades durchzuführen, ohne dass Inkonsistenzen das gesamte System beschädigen.

Es mag zunächst langsam erscheinen, aber es zahlt sich auf lange Sicht aus. Während des gesamten Entwicklungsprozesses werden Fehler identifiziert und behoben. Das Verfahren zum Debuggen wurde verbessert. Wenn ein bestimmter Test fehlschlägt, ist es einfach, genau festzustellen, was nicht wie geplant funktioniert. Und während insbesondere die testgetriebene Entwicklung und Unit-Tests komplizierter erscheinen, nutzen sie neue Möglichkeiten Testautomatisierungsplattformen und Best Practices können den gesamten Prozess erheblich vereinfachen und automatisieren.

Was ist Unit-Testing?

Unit-Tests sind eine der Methoden des automatisierten Testens. Unit-Tests testen winzige Teile einer Anwendung in völliger Isolation und vergleichen ihr tatsächliches Verhalten mit dem beabsichtigten Verhalten. Der Ausdruck „vollständige Isolation“ bezieht sich auf die Tatsache, dass Unit-Testing-Winkelanwendungen nicht mit externen Abhängigkeiten wie Datenbanken, dem Dateisystem oder HTTP-Diensten verknüpft sind. Dadurch werden Unit-Tests zuverlässiger und schneller, da sie nicht mehr aufgrund von Schwierigkeiten mit externen Diensten fehlschlagen.

Unit-Tests werden mit Code erstellt. Unit-Tests können Sie sich als kleine Programme vorstellen, die Ihre Anwendung testen, indem sie mit kleinen Abschnitten interagieren. Jeder Einheitentest ist vergleichbar mit der Beschreibung oder Veranschaulichung, wie eine Einheit unter bestimmten Umständen funktioniert. Durch die Durchführung der Reihe von Tests können Entwickler sofortiges erhalten, nachdem sie eine Codebasis geändert haben.

Warum sollten Sie Angular Unit Tests durchführen?

Typischerweise erstellen Entwickler zuerst Unit-Tests, gefolgt vom eigentlichen Programmcode. Testgetriebene Entwicklung beschreibt diese Methodik (TDD). In TDD werden die Anforderungen in bestimmte Testfälle umgewandelt, und das Programm wird anschließend erweitert, um die neuen Winkeltests zu bestehen. Unit-Tests ermöglichen das Ändern von Code, ohne die Funktionsweise anderer Units oder des Programms als Ganzes zu beeinträchtigen. Dies spart Ressourcen, indem es für Entwickler einfacher wird, Fehler in dieser Phase zu identifizieren.

Darüber hinaus werden innerhalb von Unit-Testumgebungen die Module eines Produkts voneinander getrennt und haben ihren eigenen Verantwortungsbereich. Unter diesen Umständen sind Tests vertrauenswürdiger, da sie in einem begrenzten Rahmen durchgeführt werden. Aufgrund dieser Stabilität wird der Code auch zuverlässig.

Lassen Sie uns neben den oben genannten Fakten die vielen Vorteile von Unit-Tests untersuchen.

• Unit-Tests helfen dabei, Probleme früher zu lokalisieren und zu lösen. Unternehmen, die Unit-Tests in ihren Entwicklungsprozess integrieren und so früh wie möglich während der Lebensdauer der Software mit dem Testen beginnen, können Probleme schneller finden und beheben.
• Ihre Unit-Test-Suite dient als Sicherheitsnetz für Entwickler. Eine gründliche Suite von Unit-Tests kann als Sicherheitsnetz für Entwickler dienen. Indem sie die Tests regelmäßig ausführen, können sie sicherstellen, dass ihre letzten Änderungen am Code nichts beschädigt haben. Mit anderen Worten, Unit-Tests helfen, Regressionen zu vermeiden.
• Komponententests können helfen, die Qualität des Codes zu verbessern. Dieser Punkt folgt natürlich aus dem vorhergehenden Artikel. Da Unit-Tests als Sicherheitsnetz dienen, sind Entwickler beim Ändern von Code sicherer. Sie können den Code umstrukturieren, ohne sich Sorgen machen zu müssen, dass irgendetwas beschädigt wird, wodurch die Gesamtqualität der Codebasis verbessert wird.
• Unit-Tests können helfen, die Anwendungsarchitektur zu verbessern. Das Hinzufügen von Komponententests zu einer Codebasis weist oft auf ein qualitativ hochwertiges Anwendungsdesign hin. Daher kann die Notwendigkeit, testbaren Code zu erzeugen, ein verbessertes Design motivieren. Deshalb ist TDD (Test Driven Development) so effizient.
• Unit Tests können als Dokumentation genutzt werden. Komponententests bieten Beispiele dafür, wie der zu testende Code verwendet wird. Folglich können Sie sie sich auch als ausführbare Dokumentation oder Spezifikation vorstellen.
• Identifizieren Sie Code-Smells in Ihrer Codebasis. Schwierigkeiten beim Generieren von Komponententests für einen bestimmten Codeabschnitt weisen auf Codegerüche hin, z. B. zu komplizierte Routinen. Wenn die Einfachheit, mit der Unit-Tests zu einer Codebasis hinzugefügt werden können, ein positiver Indikator ist, gilt auch das Gegenteil.

So führen Sie Unit-Tests in Angular durch und testen Angular-Komponenten

Stellen Sie beim Entwerfen von Tests für Komponenten sicher, dass alle diese Verhaltensweisen berücksichtigt werden.

• In der HTML-DOM-Struktur können sie Vorlagen rendern.
• Sie können Daten von ihren übergeordneten Komponenten über Eingänge empfangen und Daten über Ausgänge ausgeben.
• Sie können auf verschiedene Situationen reagieren.
• Sie können mit Einzelhändlern oder Dienstleistern kommunizieren.
• Sie können Daten binden und für den Benutzer editierbar machen.

TestBed einrichten

Angular bietet TestBed zum Testen an, das eine Umgebung schafft, in der Komponenten und Dienste einfach validiert und verifiziert werden können. Es ist wie ein Standard-Angular-Modul, und alle angegebenen Funktionen sind kompiliert. Verwenden Sie die Methode beforeEach, um zu vermeiden, dass Code in jedem Test dupliziert wird.

Testen des DOM

Meistens implementieren Komponentenfunktionen Logik, die die Vorlage widerspiegelt. Mit den Methoden query und queryAll von DebugElement können wir auf den DOM-Baum zugreifen:

• Die Abfrage gibt das erste Element zurück, das einem Kriterium entspricht.
• queryAll gibt ein Array übereinstimmender Einträge zurück 

Auslösende Ereignishandler

Es gibt zwei Möglichkeiten für Tests. Die erste Option besteht darin, die Funktion direkt auszuführen, während die zweite Option, die empfohlen wird, darin besteht, einen Klick auf diese Schaltfläche zu implementieren. Die Verwendung der Trigger-Event-Handler-Eigenschaft von DebugElement vereinfacht dies. Es enthält zwei Argumente: den Namen des Ereignisses und seine Eigenschaften.

Tools für Winkeleinheitentests

Jasmin: Das Jasmine-Testframework kann zum Testen von JavaScript-Code verwendet werden. Insbesondere ist es ein Framework für BDD (Behavior-Driven Development). Aufgrund seiner unkomplizierten Syntax und der Tatsache, dass es kein DOM benötigt oder auf andere Frameworks angewiesen ist, ist Jasmine sofort einsatzbereit. Jasmine ist das standardmäßige Testframework, das das Angular-Handbuch empfiehlt. Die Angular-CLI konfiguriert Jasmine automatisch, sodass Sie es nicht einzeln installieren müssen.

Karma: Das Standard-Testframework von Angular ist Karma. Das Team von AngularJs hat es entwickelt, weil es Schwierigkeiten damit hatte Winkelprüfung mit den damals verfügbaren Werkzeugen. Mit Karma können Sie Ihre Apps auf echten Webbrowsern und Geräten wie Tablets und Mobiltelefonen testen. Es ist auch sehr anungsfähig, da es mit anderen Testframeworks kompatibel ist. Das Standard-Framework von Angular ist Jasmine (das wir gleich besprechen werden), aber Sie können es mit Mocha, QUnit oder anderen ändern. Darüber hinaus ist die Integration mit kontinuierlichen Integrationssystemen wie Travis, Jenkins, CircleCI und Semaphore einfach.

Winkelmesser: Protractor ist ein End-to-End-Testinstrument für Angular-Apps. Es führt Ihre Tests in einem echten Browser aus und repliziert die Interaktion des Benutzers mit Ihrer Anwendung.

Winkel-CLI: Das Angular CLI (Command Line Interface) ist ein Tool, mit dem Angular-Anwendungen erstellt, entwickelt und getestet werden können.

Angular-Unit-Tests Praxisbeispiele

Hier sind einige Dinge, die Sie beim Durchführen von Angular-Unit-Tests beachten sollten:

• Tests sollten schnell und unkompliziert sein, was eine schnellere Ausführung von Testfällen erfordert, da dies das Ziel des Unit-Tests erfüllt. Wenn die eckigen Testfälle zu träge sind, werden Entwickler sie nicht so oft implementieren, wie sie sollten – außerdem sind die Testergebnisse umso präziser, je einfacher die Unit-Testfälle sind.
• Testfälle sollten die Logik der Implementierung nicht wiederholen.
• Die Testergebnisse sind ohne Einwirkung natürlicher Produktionsumgebungen (echte, funktionierende Geräte) weder vorhersagbar noch präzise. Das Verhalten von Testfällen sollte deterministisch sein, solange ihr Code konstant bleibt. Damit die Tests deterministisch bleiben, muss das Qualitätssicherungspersonal sie auf tatsächlichen Browsern und Geräten durchführen, nicht auf Emulatoren und Simulatoren.
• Führen Sie Einheitstests konsequent in einer Sandbox-Umgebung durch und beseitigen Sie alle externen Abhängigkeiten.
• Verwenden Sie Spione aus dem Jasmine-Framework, während Sie Dienstabhängigkeiten testen.
• Beim Testen von Komponenten ist es vorzuziehen, auf das DOM mit debugElement (das eine Abstraktion für die primäre Laufzeitumgebung bereitstellt) statt mit dem nativen Element zuzugreifen.
• Wenn sich Ihre App auf einem Server befindet, verwenden Sie By.css anstelle von queryselector, da letzterer nur für den Browser verfügbar ist.
• Stellen Sie sicher, dass mindestens 80 Prozent des Codes abgedeckt sind.
• Implementieren Sie ein effizientes Namensschema für die Testfälle

Fazit

Unit-Tests sind eine notwendige Form des automatisierten Testens; Einige Experten argumentieren sogar, dass es das Wichtigste ist. Dies steht für alle Programmiersprachen und Plattformen, einschließlich JavaScript. Unabhängig davon, ob Sie JavaScript im Back-End oder in einem Front-End-Framework verwenden oder Vanilla-JavaScript schreiben, Unit-Tests sind erforderlich.

Für jede Art von Tests stehen mehrere Tools zur Verfügung. Wählen Sie ein Gadget wie HeadSpin, das die meisten Vorteile bietet und Ihr Budget für jede Art von Tests erfüllt.