Einführung in AngularJS Unit Testing

Mit AngularJS können Sie erstaunliche Benutzeroberflächen erstellen, aber wenn die Komplexität Ihres Projekts zunimmt, wird das Testen von Einheiten zu einem wichtigen Teil. Um Ihre Codequalität zu verbessern, ist das Testen sehr wichtig. Beim Komponententest testen wir eine Komponentenfunktionalität isoliert, ohne dass externe Ressourcen, z. B. DB, Dateien usw., erforderlich sind. Komponententests sind einfach zu schreiben und lassen sich schneller ausführen. Beim Unit-Test testen wir nicht die Funktionalität einer App, daher ist das Vertrauen gering. AngularJS besteht aus verschiedenen Bausteinen wie Services, Komponenten, Direktiven usw. Für jeden von ihnen müssen wir separate Testfälle schreiben.

Grundlagen des Unit Testing

  1. Wir müssen saubere Codierungspraktiken befolgen.
  2. Wenden Sie dieselben Prinzipien an wie der Funktionscode.
  3. Testfälle sind eine kleine Funktion / Methode mit 10 Zeilen oder weniger.
  4. Verwenden Sie eine geeignete Namenskonvention.
  5. Sie haben nur eine einzige Verantwortung, dh sie testen nur eine Sache.

AngularJS-Testwerkzeuge

1) Jasmin

Entwicklungsframework zum Testen von Javascript-Code. Es bietet Funktionen zur Strukturierung von Testfällen. Da die Projekte komplexer werden und die Anzahl der Tests zunimmt, ist es wichtig, sie gut strukturiert und dokumentiert zu halten, und Jasmine hilft dabei, dies zu erreichen. Um Jasmine mit Karma zu verwenden, verwenden Sie den Karma-Jasmin-Testläufer.

2) Karma

Ein Testläufer zum Schreiben und Ausführen von Komponententests während der Entwicklung einer AngularJS-Anwendung. Es erhöht die Produktivität der Entwickler. Es wird ein Webserver erzeugt, der den Anwendungscode lädt und die Testfälle ausführt.
Es ist eine NodeJS-Anwendung, die über npm / yarn installiert wird. Es kann so konfiguriert werden, dass es mit verschiedenen Browsern ausgeführt wird, um sicherzustellen, dass die Anwendung auf allen verfügbaren Browsern funktioniert.

3) Angular-Mocks

AngularJS stellt das ngMock-Modul zur Verfügung, mit dem wir Mock-Tests durchführen können. Sie werden zum Injizieren und Verspotten von AngularJS-Diensten in Komponententests verwendet.

Umgebungs-Setup

  1. Installieren Sie NodeJS auf Ihrem System. (https://nodejs.org/en/download/).
  2. Installieren Sie eine beliebige IDE (wie VS-Code, Klammern usw.).
  3. Erstellen Sie einen leeren Ordner ($ mkdir unit testing) in Ihrem Verzeichnis.
  4. Öffnen Sie den Unit-Test-Ordner in Ihrer IDE. Öffnen Sie dann das Terminal (Eingabeaufforderung) in Ihrem Gerätetestordner.
  5. Befolgen Sie im Terminal nacheinander die folgenden Befehle:
    Erstellen Sie package.json:
    npm initInstall Angular:
    npm i angle –saveInstall Karma:
    npm i -g karma –save -devInstall Jasmine:
    npm i karma-jasmine jasmine-core –save -devInstall Eckige Mocks:
    npm i angle-mocks –save -devInstalliere den Karma Chrome Browser:
    npm i Karma-Chrome-Launcher-Save-Dev
  6. Erstellen Sie zwei Ordner mit dem Namen "App" und testen Sie im Unit-Test-Ordner.
  7. Erstellen Sie karma.config.js. Geben Sie im Terminal den folgenden Befehl ein:
    Karma Init
    Es wird Ihnen eine Reihe von Fragen stellen. Wählen Sie die unten stehenden Antworten dafür.
    -> Wählen Sie das Testframework als Jasmine aus.
    -> Wählen Sie Chrome als Browser.
    -> Geben Sie den Pfad für Ihre js und spec-Dateien an (app / * js und tests / *. Spec.js)
    -> Nach ein paar weiteren Fragen wird es gemacht.
    -> Öffnen Sie die karma.config.js-Dateien sowie den Pfad und die Plugins wie unten gezeigt. Unten ist die Datei karma.config.js.

// Karma configuration
module.exports = function(config) (
config.set((
// base path is used to resolve all patterns
basePath: '',
plugins:('karma-jasmine', 'karma-chrome-launcher'),
frameworks: ('jasmine'),
// list of files to load in the browser
files: (
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*.spec.js'
),
// list of files to exclude
exclude: (),
preprocessors: (),
reporters: ('progress'),
// server port
port: 9876,
// enable / disable colors in output
colors: true,
logLevel: config.LOG_INFO,
// enable / disable watch mode for files
autoWatch: true,
browsers: ('Chrome'),
singleRun: false,
// how many browser should start simultaneous
concurrency: Infinity
))
)

Der Ordner, der nach diesen Schritten strukturiert ist, sollte wie folgt aussehen:

Beispiel mit Implementierung

Filter testen

Filter sind Methoden, mit denen Daten in ein für Menschen lesbares Format umgewandelt werden. In diesem Modul erstellen wir einen Filter und schreiben Unit-Tests für diesen Filter und prüfen, ob er wie erwartet funktioniert.
Schritte:

Erstellen Sie eine Datei mit dem Namen filter.js im App-Ordner.

filter.js

angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))

Lassen Sie uns nun die Unit-Testfälle schreiben, um zu überprüfen, ob der Filter wie erwartet funktioniert oder nicht.

Jasmin-Framework-Methoden

  • Describe (): Definiert eine Testsuite - eine Gruppe verwandter Tests.
  • It (): Definiert eine Spezifikation oder einen Test.
  • Expect (): Es wird ein tatsächlicher Wert als Parameter verwendet und mit einer Matcher-Funktion verkettet.
  • Matcher-Funktion: Übernimmt den erwarteten Wert als Parameter. Es ist dafür verantwortlich, Jasmine zu melden, ob die Erwartung wahr oder falsch ist.

Beispiel:

toBe ('value'), toContain ('value'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().

Erstellen Sie eine Datei mit dem Namen filter.spec.js im Ordner tests.

filter.spec.js

//1. Describe the object type
describe('Filters', function () (
//2. Load the Angular App
beforeEach(module('MyApp'));
//3. Describe the object by name
describe('compute', function () (
var compute;
//4. Initialize the filter
beforeEach(inject(function ($filter) (
compute = $filter('compute', ());
)));
//5. Write the test in the it block along with expectations.
it('Should return 0 if input is negative', function () (
const result = compute(-1);
expect(result).toBe(0); //pass
));
it('Should increment the input if input is positive', function () (
const result = compute(1);
expect(result).toBe(2);//pass
//expect(compute(3)).toBe(5);//fail
));
));
));

Geben Sie zum Ausführen des Tests den folgenden Befehl im Unit Testing-Ordner ein.
Karma fängt an
Oder Sie können "karma start" im package.json-Testskript festlegen und den folgenden Befehl eingeben.
npm test

Dadurch wird der Chrome-Browser geöffnet.

Ausgabe im Terminal:

Testen eines Controllers und eines Dienstes

AngularJS trennt die Logik von der Ansichtsebene, sodass Controller und Services einfach zu testen sind.
Schritte:
1. Erstellen Sie eine Datei mit dem Namen controller.js im App-Ordner.

controller.js

var app = angular.module('Myapp', ())
app.service('calcService', (
function()(
function square(o1)(
return o1*o1;
)
return (square:square);
)
));
app.controller('MyController', function MyController($scope) (
$scope.title = "Hello MyController";
$scope.square = function() (
$scope.result = calcService.square($scope.number);
)
));

2. Erstellen Sie eine Datei mit dem Namen controller.spec.js im Ordner tests.

controller.spec.js

describe('MyController', function() (
var controller, scope;
beforeEach(angular.mock.module('Myapp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) (
scope = $rootScope.$new();
controller = $controller('MyController', ( $scope : scope ));
)));
it('Title should be defined', inject(function ($rootScope, $controller) (
expect(scope.title).toBeDefined();
)));
it('Title as Hello MyController', inject(function ($rootScope, $controller) (
expect(scope.title).toEqual('Hello MyController');
)));
));
describe('square', function()(
var calcService;
beforeEach(function()(
module('Myapp');
inject( function($injector)(
calcService = $injector.get('calcService');
));
));
it('should square the number', function()(
var result = calcService.square(3);
expect(result).toBe(9);
));
));

Ausgabe im Terminal:

Fazit

AngularJS-Anwendungen bestehen aus Modulen. Auf Anwendungsebene sind dies AngularJS-Module. Auf Modulebene sind dies Dienste, Fabriken, Komponenten, Anweisungen und Filter. Jeder von ihnen kann über seine externe Schnittstelle miteinander kommunizieren. Das Schreiben von Unit-Testfällen für Ihre AngularJS-Anwendung beschleunigt den Debug- und Entwicklungsprozess.

Empfohlene Artikel

Dies ist eine Anleitung zum Testen von AngularJS-Einheiten. Hier diskutieren wir die Einführung und Grundlagen des Unit-Testens zusammen mit den AngularJS-Testwerkzeugen und dem Implementierungsbeispiel. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. Karriere in AngularJS
  2. ReaktJs gegen AngularJs
  3. Angular JS-Anwendung
  4. Karriere in DevOps

Kategorie:

Software-Entwicklung