AngularJS Unit Testing: Karma Jasmine Tutorial

Eine der brillantesten Funktionen von Angular.JS ist der Testaspekt. Als die Entwickler von Google AngularJS entwickelten, haben sie die Tests im Auge behalten und sichergestellt, dass das gesamte AngularJS-Framework testbar ist.

In AngularJS werden Tests normalerweise mit Karma (Framework) durchgeführt. Angular JS-Tests können ohne Karma durchgeführt werden, aber das Karma-Framework verfügt über eine so brillante Funktionalität zum Testen von AngularJS-Code, dass es sinnvoll ist, dieses Framework zu verwenden.

In AngularJS können wir Unit-Tests für Controller und Direktiven separat durchführen.
Wir können auch End-of-End-Tests von AngularJS durchführen, die aus Anwendersicht getestet werden.

In diesem Tutorial lernen Sie:

Einführung und Installation des Karma-Frameworks

Installation von Karma
Konfiguration des Karma-Frameworks

Testen von AngularJS-Controllern
Testen von AngularJS-Anweisungen
End-to-End-Test von AngularJS JS-Anwendungen

Einführung und Installation des Karma-Frameworks

Karma ist ein Testautomatisierungstool, das vom Angular JS-Team bei Google entwickelt wurde. Der erste Schritt zur Verwendung von Karma ist die Installation von Karma. Karma wird über npm installiert (ein Paketmanager, der für die einfache Installation von Modulen auf einem lokalen Computer verwendet wird).

Installation von Karma

Die Installation von Karma über npm erfolgt in zwei Schritten.

Schritt 1) Führen Sie die folgende Zeile in der Befehlszeile aus

npm install karma karma-chrome-launcher karma-jasmine

Worin

npm ist das Befehlszeilenprogramm für den Node Package Manager, mit dem benutzerdefinierte Module auf einem beliebigen Computer installiert werden.
Der Parameter install weist das Befehlszeilenprogramm npm an, dass eine Installation erforderlich ist.
In der Befehlszeile werden 3 Bibliotheken angegeben, die für die Arbeit mit Karma erforderlich sind
- Karma ist die Kernbibliothek, die zu Testzwecken verwendet wird.
- karma-chrome-launcher ist eine separate Bibliothek, mit der Karma-Befehle vom Chrome-Browser erkannt werden können.
- Karma-Jasmin - Hiermit wird Jasmin installiert, ein abhängiger Rahmen für Karma.

Schritt 2) Der nächste Schritt ist die Installation des Karma-Befehlszeilenprogramms. Dies ist erforderlich, um Karma-Zeilenbefehle auszuführen. Das Dienstprogramm für die Karma-Linie wird verwendet, um die Karma-Umgebung zum Testen zu initialisieren.

Um das Befehlszeilenprogramm zu installieren, führen Sie die folgende Zeile in der Befehlszeile aus

npm install karma-cli

worin,

Mit karma-cli wird die Befehlszeilenschnittstelle für karma installiert, mit der die Karma-Befehle in die Befehlszeilenschnittstelle geschrieben werden.

Konfiguration des Karma-Frameworks

Der nächste Schritt besteht darin, Karma zu konfigurieren, was über den Befehl erfolgen kann

"karma -init"

Nachdem der obige Schritt ausgeführt wurde, erstellt karma eine Datei karma.conf.js. Die Datei sieht wahrscheinlich wie das unten gezeigte Snippet aus

files: ['Your application Name'/AngularJS/AngularJS.js','Your application Name'/AngularJS-mocks/AngularJS-mocks.js','lib/app.js','tests/*.js']

Die obigen Konfigurationsdateien teilen der Karma-Laufzeit-Engine die folgenden Dinge mit

'Name Ihrer Anwendung' - Dies wird durch den Namen Ihrer Anwendung ersetzt.
' Name Ihrer Anwendung' / AngularJS / AngularJS.js ' - Dies teilt dem Karma mit, dass Ihre Anwendung von den Kernmodulen in AngularJS abhängt
'Name Ihrer Anwendung' / AngularJS-mocks / AngularJS-mocks.js ' - Hiermit wird Karma angewiesen, die Unit-Testing-Funktion für AngularJS aus der Datei Angular.JS-mocks.js zu verwenden.
Alle Hauptanwendungs- oder Geschäftslogikdateien befinden sich im lib-Ordner Ihrer Anwendung.
Der Testordner enthält alle Komponententests

Um zu überprüfen, ob Karma funktioniert, erstellen Sie eine Datei mit dem Namen Sample.js, geben Sie den folgenden Code ein und legen Sie sie im Testverzeichnis ab.

describe('Sample test', function() {it('Condition is true', function() {expect('AngularJS').toBe('AngularJS');});});

Der obige Code hat die folgenden Aspekte

Die Beschreibungsfunktion wird verwendet, um eine Beschreibung des Tests zu geben. In unserem Fall geben wir unserem Test die Beschreibung 'Probentest'.
Die 'it'-Funktion wird verwendet, um dem Test einen Namen zu geben. In unserem Fall geben wir den Namen unseres Tests als "Bedingung ist wahr" an. Der Name des Tests muss aussagekräftig sein.
Die Kombination des Schlüsselworts 'expected' und 'toBe' gibt an, wie hoch der erwartete und der tatsächliche Wert des Testergebnisses ist. Wenn der tatsächliche und der erwartete Wert gleich sind, besteht der Test, andernfalls schlägt er fehl.

Wenn Sie die folgende Zeile an der Eingabeaufforderung ausführen, wird die obige Testdatei ausgeführt

KARMA start

Die folgende Ausgabe stammt aus dem IDE-Webstorm, in dem die obigen Schritte ausgeführt wurden.

Die Ausgabe erfolgt im Karma-Explorer in Webstorm. Dieses Fenster zeigt die Ausführung aller Tests, die im Karma-Framework definiert sind.
Hier sehen Sie, dass die Beschreibung des ausgeführten Tests angezeigt wird, nämlich "Beispieltest".
Als nächstes können Sie sehen, dass der Test selbst ausgeführt wird, der den Namen "Bedingung ist wahr" hat.
Beachten Sie, dass neben allen Tests das grüne Symbol "OK" angezeigt wird, das symbolisiert, dass alle Tests bestanden wurden.

Testen von AngularJS-Controllern

Das Karma-Test-Framework bietet auch die Funktionalität, Controller von Ende zu Ende zu testen. Dies umfasst das Testen des $ scope-Objekts, das in Controllern verwendet wird.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

In unserem Beispiel

Wir müssten zuerst einen Controller definieren. Diese Steuerung würde die unten genannten Schritte ausführen

Erstellen Sie eine ID-Variable und weisen Sie ihr den Wert 5 zu.
Weisen Sie dem $ scope-Objekt die ID-Variable zu.

Unser Test testet die Existenz dieses Controllers und prüft auch, ob die ID-Variable des $ scope-Objekts auf 5 gesetzt ist.

Zuerst müssen wir sicherstellen, dass die folgenden Voraussetzungen erfüllt sind

Installieren Sie die Angular.JS-Mocks-Bibliothek über npm. Dies kann durch Ausführen der folgenden Zeile in der Eingabeaufforderung erfolgen

npm install Angular JS-mocks

Als Nächstes müssen Sie die Datei karma.conf.js ändern, um sicherzustellen, dass die richtigen Dateien für den Test enthalten sind. Das folgende Segment zeigt nur den Dateiteil der Datei karma.conf.js, der geändert werden muss
```
files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
```

Der Parameter 'files' teilt Karma grundsätzlich alle Dateien mit, die für die Ausführung der Tests erforderlich sind.
Die Dateien AngularJS.js und AngularJS-mocks.js sind erforderlich, um AngularJS-Komponententests auszuführen
Die Datei index.js enthält unseren Code für den Controller
Der Testordner enthält alle unsere AngularJS-Tests

Unten finden Sie unseren Angular.JS-Code, der als Datei Index.js im Testordner unserer Anwendung gespeichert wird.

Der folgende Code führt nur die folgenden Dinge aus

Erstellen Sie ein Angular JS-Modul mit dem Namen sampleApp
Erstellen Sie einen Controller namens AngularJSController
Erstellen Sie eine Variable namens ID, geben Sie ihr den Wert 5 und weisen Sie sie dem $ scope-Objekt zu

var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Sobald der obige Code erfolgreich ausgeführt wurde, besteht der nächste Schritt darin, einen Testfall zu erstellen, um sicherzustellen, dass der Code ordnungsgemäß geschrieben und ausgeführt wurde.

Der Code für unseren Test lautet wie unten gezeigt.

Der Code befindet sich in einer separaten Datei namens ControllerTest.js, die im Testordner abgelegt wird. Der folgende Code führt nur die folgenden wichtigen Dinge aus

beforeEach-Funktion - Mit dieser Funktion wird unser AngularJS.JS-Modul namens 'sampleApp' vor dem Testlauf geladen. Beachten Sie, dass dies der Name des Moduls in einer index.js-Datei ist.
Das $ controller-Objekt wird als Modellobjekt für den Controller '' Angular JSController '' erstellt, der in unserer Datei index.js definiert ist. Bei jeder Art von Unit-Test stellt ein Scheinobjekt ein Dummy-Objekt dar, das tatsächlich für den Test verwendet wird. Dieses Scheinobjekt simuliert tatsächlich das Verhalten unseres Controllers.
beforeEach (injizieren (Funktion (_ $ controller_) - Dies wird verwendet, um das Scheinobjekt in unserem Test so zu injizieren, dass es sich wie der eigentliche Controller verhält.
var $ scope = {}; Dies ist ein Scheinobjekt, das für das $ scope-Objekt erstellt wird.
var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Hier prüfen wir, ob ein Controller namens 'Angular.JSController' vorhanden ist. Hier weisen wir auch alle Variablen aus unserem $ scope-Objekt in unserem Controller in der Datei Index.js dem $ scope-Objekt in unserer Testdatei zu
Schließlich vergleichen wir die $ scope.ID mit 5

describe('AngularJSController', function() {beforeEach(module('sampleApp'));var $controller;beforeEach(inject(function(_$controller_){$controller = _$controller_;}));describe('$scope.ID', function() {it('Check the scope object', function() {var $scope = {};var controller = $controller('AngularJSController', { $scope: $scope });expect($scope.ID).toEqual(5);});});});

Der obige Test wird im Karma-Browser ausgeführt und liefert das gleiche Ergebnis wie im vorherigen Thema.

Testen von AngularJS-Richtlinien

Das Karma-Test-Framework bietet auch die Funktionalität zum Testen benutzerdefinierter Anweisungen. Dies schließt die templateURLs ein, die in benutzerdefinierten Anweisungen verwendet werden.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

In unserem Beispiel definieren wir zunächst eine benutzerdefinierte Direktive, die die folgenden Aktionen ausführt

Erstellen Sie ein AngularJS-Modul namens sampleApp
Erstellen Sie eine benutzerdefinierte Direktive mit dem Namen Guru99
Erstellen Sie eine Funktion, die eine Vorlage mit einem Header-Tag zurückgibt, das den Text "Dies ist AngularJS-Test" anzeigt.

var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '
This is AngularJS Testing
'};});

Der Code befindet sich in einer separaten Datei namens DirectiveTest.js, die im Testordner abgelegt wird. Der folgende Code führt nur die folgenden wichtigen Dinge aus

beforeEach-Funktion - Mit dieser Funktion wird unser Angular JS-Modul namens 'sampleApp' vor dem Testlauf geladen.
Der $ compile-Dienst wird zum Kompilieren der Direktive verwendet. Dieser Service ist obligatorisch und muss deklariert werden, damit Angular.JS ihn zum Kompilieren unserer benutzerdefinierten Direktive verwenden kann.
Das $ Rootscope ist der Hauptbereich jeder AngularJS.JS-Anwendung. Wir haben das $ scope-Objekt des Controllers in früheren Kapiteln gesehen. Nun, das $ scope-Objekt ist das untergeordnete Objekt des $ Rootscope-Objekts. Der Grund, warum dies hier deklariert wird, ist, dass wir über unsere benutzerdefinierte Direktive eine Änderung an einem tatsächlichen HTML-Tag im DOM vornehmen. Daher müssen wir den $ Rootscope-Dienst verwenden, der tatsächlich zuhört oder weiß, wann Änderungen innerhalb eines HTML-Dokuments auftreten.
var element = $ compile (" ") - Hiermit wird überprüft, ob unsere Direktive wie gewünscht injiziert wird. Der Name unserer benutzerdefinierten Direktive lautet Guru99, und wir wissen aus unserem Kapitel über benutzerdefinierte Direktiven, dass die Direktive, wenn sie in unseren HTML-Code eingefügt wird, als ' ' eingefügt wird. Daher wird diese Aussage verwendet, um diese Prüfung durchzuführen.
await (element.html ()). toContain ("Dies ist AngularJS-Test") - Dies wird verwendet, um die Expect-Funktion anzuweisen, dass das Element (in unserem Fall das div-Tag) den innerHTML-Text von "This is" enthalten soll AngularJS-Test ".

describe('Unit testing directives', function() {var $compile,$rootScope;beforeEach(module('sampleApp'));beforeEach(inject(function(_$compile_, _$rootScope_){$compile = _$compile_;$rootScope = _$rootScope_;}));it('Check the directive', function() {// Compile a piece of HTML containing the directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

Der obige Test wird im Karma-Browser ausgeführt und liefert das gleiche Ergebnis wie im vorherigen Thema.

End-to-End-Test von AngularJS JS-Anwendungen

Das Karma-Test-Framework bietet zusammen mit einem Framework namens Protractor die Funktionalität, eine Webanwendung durchgängig zu testen.

Es werden also nicht nur Anweisungen und Controller getestet, sondern auch alles andere, was auf einer HTML-Seite angezeigt wird.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

In unserem Beispiel unten haben wir eine AngularJS-Anwendung, die eine Datentabelle mit der Anweisung ng-repeat erstellt.

Wir erstellen zuerst eine Variable namens "Tutorial" und weisen ihr in einem Schritt einige Schlüssel-Wert-Paare zu. Jedes Schlüssel-Wert-Paar wird bei der Anzeige der Tabelle als Daten verwendet. Die Tutorial-Variable wird dann dem Bereichsobjekt zugewiesen, damit aus unserer Sicht darauf zugegriffen werden kann.
Für jede Datenzeile in der Tabelle verwenden wir die Anweisung ng-repeat. Diese Anweisung durchläuft jedes Schlüssel-Wert-Paar im Bereichsobjekt des Lernprogramms mithilfe der Variablen ptutor.
Schließlich verwenden wir das -Tag zusammen mit den Schlüsselwertpaaren (ptutor.Name und ptutor.Description), um die Tabellendaten anzuzeigen.


{{ ptutor.Name }} {{ ptutor.Description }}

AngularJS Unit Testing: Karma Jasmine Tutorial

Inhaltsverzeichnis:

Einführung und Installation des Karma-Frameworks

Installation von Karma

Konfiguration des Karma-Frameworks

Testen von AngularJS-Controllern

Testen von AngularJS-Richtlinien

This is AngularJS Testing

End-to-End-Test von AngularJS JS-Anwendungen