AngularJS Unit Testing: Karma Jasmine Tutorial

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

In AngularJS erfolgt das Testen normalerweise mit Karma (Framework). 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 ausführen Unit Tests getrennt für Controller und Anweisungen.
Wir können auch End-of-End-Tests von AngularJS durchführen, also Tests aus Benutzerperspektive.

Einführung und Installation des Karma-Frameworks

Karma ist ein Testautomatisierungstool erstellt vom Angular JS-Team bei Google. Der erste Schritt zur Nutzung von Karma ist die Installation von Karma. Karma wird über npm installiert (ein Paketmanager zur einfachen Installation von Modulen auf einem lokalen Computer).

Installation von Karma

Die Installation von Karma über npm erfolgt in einem zweistufigen Prozess.

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

npm install karma karma-chrome-launcher karma-jasmine

Worin,

npm ist das Befehlszeilendienstprogramm für den Node-Paketmanager, mit dem benutzerdefinierte Module auf jedem Computer installiert werden können.
Der Installationsparameter weist das npm-Befehlszeilendienstprogramm an, dass eine Installation erforderlich ist.
In der Befehlszeile werden drei 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, die es ermöglicht, Karma-Befehle vom Chrome-Browser zu erkennen.
karma-jasmine – Dadurch wird Jasmin installiert, ein abhängiges Framework für Karma.

Schritt 2) Der nächste Schritt besteht darin, das Karma-Befehlszeilenprogramm zu installieren. Dies ist für die Ausführung von Karma-Zeilenbefehlen erforderlich. Das Karma-Line-Dienstprogramm 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,

karma-cli wird verwendet, um die Befehlszeilenschnittstelle für Karma zu installieren, die zum Schreiben der Karma-Befehle in die Befehlszeilenschnittstelle verwendet wird.

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 wird wahrscheinlich wie der unten gezeigte Ausschnitt aussehen

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-Runtime-Engine Folgendes mit

„Ihr Anwendungsname“ – Dies wird durch den Namen Ihrer Bewerbung ersetzt.
'Ihr Anwendungsname'/AngularJS/AngularJS.js' – Dies sagt Karma, dass Ihre Anwendung von den Kernmodulen in AngularJS abhängt
„Ihr Anwendungsname“/AngularJS-mocks/AngularJS-mocks.js“ – Dadurch wird Karma angewiesen, die Unit-Testing-Funktionalität für AngularJS aus der Datei Angular.JS-mocks.js zu verwenden.
Alle Hauptanwendungs- oder Geschäftslogikdateien sind im lib-Ordner Ihrer Anwendung vorhanden.
Der Testordner enthält alle Komponententests.

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

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

Der obige Code hat die folgenden Aspekte

Die Funktion „beschreiben“ wird verwendet, um eine Beschreibung des Tests zu geben. In unserem Fall geben wir unserem Test die Bezeichnung „Beispieltest“.
Die Funktion „it“ wird verwendet, um dem Test einen Namen zu geben. In unserem Fall nennen wir unseren Test „Bedingung ist wahr“. Der Name des Tests muss aussagekräftig sein.
Die Kombination der Schlüsselwörter „expect“ und „toBe“ gibt Auskunft über den erwarteten und tatsächlichen Wert des Testergebnisses. Wenn der tatsächliche und der erwartete Wert gleich sind, wird der Test bestanden, andernfalls schlägt er fehl.

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

KARMA start

Die folgende Ausgabe stammt aus der IDE Webstorm in dem die oben genannten Schritte durchgeführt wurden.

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

Testen von AngularJS-Controllern

Das Karma-Test-Framework verfügt auch über die Funktionalität, Controller durchgängig zu testen. Dazu gehört 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,

Zuerst müssten wir einen Controller definieren. Dieser Controller würde die unten aufgeführten Schritte ausführen

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

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

Zunächst müssen wir sicherstellen, dass die folgende Voraussetzung erfüllt ist

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 von 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 wird unseren Code für den Controller enthalten
Der Testordner enthält alle unsere AngularJS-Tests

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

Der folgende Code führt lediglich die folgenden Dinge aus

Erstellen Sie ein AngularJS-Modul namens 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 zu erstellen Testfall um sicherzustellen, dass der Code ordnungsgemäß geschrieben und ausgeführt wurde.

Der Code für unseren Test sieht wie folgt aus.

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

beforeEach-Funktion – Diese Funktion wird verwendet, um unser AngularJS.JS-Modul namens „sampleApp“ vor dem Testlauf zu laden. Beachten Sie, dass dies der Name des Moduls in einer index.js-Datei ist.
Das $controller-Objekt wird als Mockup-Objekt 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(inject(function(_$controller_) – Dies wird verwendet, um das Scheinobjekt in unserem Test einzufügen, damit es sich wie der tatsächliche 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 die Existenz eines Controllers namens „Angular.JSController“. Hier weisen wir auch alle Variablen aus unserem $scope-Objekt in unserem Controller in der Index.js-Datei dem $scope-Objekt in unserer Testdatei zu
Abschließend 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 bestandene Ergebnis wie im vorherigen Thema.

Testen von AngularJS-Direktiven

Das Karma-Test-Framework verfügt auch über die Funktionalität zum Testen benutzerdefinierter Anweisungen. Dazu gehören die TemplateURLs, 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 folgende Dinge tut

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 „This is AngularJS Testing“ anzeigt.

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

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 sieht wie folgt aus

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

beforeEach-Funktion – Diese Funktion wird verwendet, um unser Angular JS-Modul namens „sampleApp“ vor dem Testlauf zu laden.
Der Dienst $compile wird zum Kompilieren der Direktive verwendet. Dieser Dienst ist obligatorisch und muss deklariert werden, damit Angular.JS ihn zum Kompilieren unserer benutzerdefinierten Direktive verwenden kann.
Der $rootscope ist der primäre Bereich 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 dafür, dass dies hier deklariert wird, liegt darin, dass wir über unsere benutzerdefinierte Direktive eine Änderung an einem tatsächlichen HTML-Tag im DOM vornehmen. Daher müssen wir den Dienst $rootscope verwenden, der tatsächlich abhört oder weiß, wann in einem HTML-Dokument Änderungen vorgenommen werden.
var element = $compile(“ “) – Dies wird verwendet, um zu überprüfen, ob unsere Direktive wie vorgesehen injiziert wird. Der Name unserer benutzerdefinierten Direktive ist Guru99, und aus unserem Kapitel über benutzerdefinierte Direktiven wissen wir, dass die Direktive, wenn sie in unseren HTML-Code eingefügt wird, als „ '. Daher wird diese Anweisung verwendet, um diese Prüfung durchzuführen.
expect(element.html()).toContain(“This is AngularJS Testing”) – Dies wird verwendet, um die Expect-Funktion anzuweisen, das Element (in unserem Fall das div-Tag) zu finden, das den innerHTML-Text von „This is“ enthält AngularJS-Tests“.

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 directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

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

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

Es geht also nicht nur um das Testen von Anweisungen und Controllern, sondern auch um das Testen von allem anderen, was auf einer HTML-Seite erscheinen kann.

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

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

Wir erstellen zunächst 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 Scope-Objekt zugewiesen, sodass aus unserer Sicht darauf zugegriffen werden kann.
Für jede Datenzeile in der Tabelle verwenden wir die Direktive ng-repeat. Diese Anweisung durchläuft jedes Schlüssel-Wert-Paar im Tutorial-Bereichsobjekt mithilfe der Variablen ptutor.
Schließlich verwenden wir die Tag zusammen mit den Schlüssel-Wert-Paaren (ptutor.Name und ptutor.Description), um die Tabellendaten anzuzeigen.

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

Unser Test wird tatsächlich die ng-repeat-Direktive testen und sicherstellen, dass sie 3 Datenzeilen enthält, wie es im obigen Beispiel sein sollte.

Zunächst müssen wir sicherstellen, dass die folgende Voraussetzung erfüllt ist

Installieren Sie die Winkelmesserbibliothek über npm. Dies kann durch Ausführen der folgenden Zeile in der Eingabeaufforderung erfolgen

"npm install protractor"

Der Code für unseren Test sieht wie folgt aus.

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

Die Browserfunktion wird von der Protractor-Bibliothek bereitgestellt und setzt voraus, dass unsere AngularJS-Anwendung (mit dem oben gezeigten Code) unter der URL unserer Website läuft – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Diese Codezeile holt eigentlich die ng-repeat-Direktive, die durch den Code „ptutor in tutorial“ gefüllt wird. Das Element und by.repeater sind spezielle Schlüsselwörter, die von der Protractor-Bibliothek bereitgestellt werden und uns ermöglichen, Details der ng-repeat-Direktive abzurufen.
erwarten(list.count()).toEqual(3); – Zuletzt verwenden wir die Expect-Funktion, um zu sehen, dass unsere Tabelle aufgrund der ng-repeat-Direktive tatsächlich mit drei Elementen gefüllt wird.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

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

Zusammenfassung

Das Testen in AngularJS erfolgt mithilfe des Karma-Frameworks, einem Framework, das von Google selbst entwickelt wurde.
Das Karma-Framework wird mit dem Node-Paketmanager installiert. Die wichtigsten Module, die für grundlegende Tests installiert werden müssen, sind Karma, Karma-Chrome-Launcher, Karma-Jasmine und Karma-Cli.
Die Tests werden in separaten JS-Dateien geschrieben, die normalerweise im Testordner Ihrer Anwendung gespeichert sind. Der Speicherort dieser Testdateien muss in einer speziellen Konfigurationsdatei namens karma.conf.js angegeben werden. Karma verwendet diese Konfigurationsdatei bei der Ausführung aller Tests.
Karma kann auch zum Testen von Controllern und benutzerdefinierten Anweisungen verwendet werden.
Für einen End-to-End-Webtest muss ein weiteres Framework namens Protractor über den Node-Paketmanager installiert werden. Dieses Framework stellt spezielle Methoden bereit, mit denen alle Elemente einer HTML-Seite getestet werden können.

Du magst vielleicht:

Einführung und Installation des Karma-Frameworks

Installation von Karma

Konfiguration des Karma-Frameworks

ÄHNLICHE ARTIKEL

Testen von AngularJS-Controllern

Testen von AngularJS-Direktiven

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

Zusammenfassung