AngularJS Unit Testing: Karma Jasmine Tutorial

Eine der brillantesten Funktionen von Angular.JS ist die Tests Aspekt. Wenn die Entwickler bei Google Bei der Entwicklung von AngularJS wurde stets auf Testbarkeit geachtet 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 GoogleDer erste Schritt zur Verwendung von Karma ist die Installation von Karma. Karma wird über npm installiert (ein Paketmanager zur einfachen Installation von Modulen auf dem lokalen Rechner).

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,

1. npm ist das Befehlszeilendienstprogramm für den Node-Paketmanager, mit dem benutzerdefinierte Module auf jedem Computer installiert werden können.
2. Der Installationsparameter weist das npm-Befehlszeilendienstprogramm an, dass eine Installation erforderlich ist.
3. 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

1. „Ihr Anwendungsname“ – Dies wird durch den Namen Ihrer Bewerbung ersetzt.
2. 'Ihr Anwendungsname'/AngularJS/AngularJS.js' – Dies sagt Karma, dass Ihre Anwendung von den Kernmodulen in AngularJS abhängt
3. „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.
4. Alle Hauptanwendungs- oder Geschäftslogikdateien sind im lib-Ordner Ihrer Anwendung vorhanden.
5. 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

1. Die Funktion „beschreiben“ wird verwendet, um eine Beschreibung des Tests zu geben. In unserem Fall geben wir unserem Test die Bezeichnung „Beispieltest“.
2. 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.
3. 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.

1. Die Ausgabe erfolgt im Karma-Explorer Webstorm. Dieses Fenster zeigt die Ausführung aller Tests, die im Karma-Framework definiert sind.
2. Hier sehen Sie, dass die Beschreibung des durchgeführten Tests angezeigt wird, nämlich „Beispieltest“.
3. Als Nächstes können Sie sehen, dass der Test selbst mit dem Namen „Bedingung ist wahr“ ausgeführt wird.
4. 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

1. Erstellen Sie eine ID-Variable und weisen Sie ihr den Wert 5 zu.
2. 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

1. Erstellen Sie ein AngularJS-Modul namens sampleApp
2. Erstellen Sie einen Controller namens AngularJSController
3. 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:

1. 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.
2. 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.
3. 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.
4. var $scope = {}; Dies ist ein Scheinobjekt, das für das $scope-Objekt erstellt wird.
5. 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
6. 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-Testframework bietet auch die Möglichkeit, benutzerdefinierte Direktiven zu testen. Dies umfasst die Vorlage.URL's, die innerhalb benutzerdefinierter Direktiven 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

1. Erstellen Sie ein AngularJS-Modul namens „sampleApp“.
2. Erstellen Sie eine benutzerdefinierte Direktive mit dem Namen – Guru99
3. 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:

1. beforeEach-Funktion – Diese Funktion wird verwendet, um unser Angular JS-Modul namens „sampleApp“ vor dem Testlauf zu laden.
2. 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.
3. 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.
4. var element = $compile(“Guru99>Guru99>”) – Dies dient der Überprüfung, ob unsere Direktive wie vorgesehen eingefügt wird. Der Name unserer benutzerdefinierten Direktive lautet: Guru99, und wir wissen aus unserem Kapitel über benutzerdefinierte Direktiven, dass die Direktive beim Einfügen in unser HTML als „“ eingefügt wird.Guru99>Guru99>'. Daher wird diese Anweisung verwendet, um diese Überprüfung durchzuführen.
5. 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-Testing-Framework zusammen mit einem Framework namens ProtracTor bietet die Funktionalität, eine Webanwendung von Anfang bis Ende 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.

1. 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.
2. 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.
3. 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"}
			]   });

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

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 Profi-VersiontracDie Tor-Bibliothek kann über npm installiert werden. Dies geschieht durch Ausführen der folgenden Zeile in der Kommandozeile.

"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:

1. Die Browserfunktion wird vom Pro bereitgestellt.tracDie Tor-Bibliothek wird verwendet und setzt voraus, dass unsere AngularJS-Anwendung (mit dem oben gezeigten Code) auf unserer Website läuft. URL – http://localhost:8080/Guru99 /
2. var list=element.all(by.repeater(ptutor in tutorial')); - Diese Codezeile ruft die ng-repeat-Direktive ab, die mit dem Code 'ptutor in tutorial' befüllt wird. element und by.repeater sind spezielle Schlüsselwörter, die von der Bibliothek bereitgestellt werden.tracTor-Bibliothek, die es uns ermöglicht, Details der ng-repeat-Direktive zu erhalten.
3. 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, das von [Name des Entwicklers/der Entwicklerin] entwickelt wurde. Google sich.
• 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 ein umfassendes Webtesting wird ein weiteres Framework namens Pro verwendet.tracTor muss über den Node-Paketmanager installiert werden. Dieses Framework bietet spezielle Methoden, mit denen alle Elemente einer HTML-Seite getestet werden können.