Wenn das NG-Projekt immer größer wird, werden Unit-Tests auf die Tagesordnung gesetzt. Manchmal testet das Team zuerst die Funktion und testet dann später das Funktionsmodul . Heute werde ich hauptsächlich über die Verwendung von Karma und Jasmin sprechen, um Unit-Tests des NG-Moduls durchzuführen.

Was ist Karma?

Karma ist ein Unit-Test-Laufkontroll-Framework, das die Ausführung von Unit-Tests in verschiedenen Umgebungen wie Chrome, Firfox, PhantomJS usw. ermöglicht. Das Test-Framework unterstützt Jasmine, Mocha, Qunit und ist ein NPM-Modul, das NodeJS als Umgebung verwendet .

Es wird empfohlen, den Parameter ----save-dev zu verwenden, um testbezogene NPM-Module zu installieren, da dies mit der Entwicklung zusammenhängt. Im Allgemeinen benötigen Sie zum Ausführen von Karma nur die folgenden zwei NPM-Befehle

Code kopieren Der Code lautet wie folgt:

npm install karma --save-dev

npm install karma-junit-reporter --save-dev

Bei der Installation von Karma werden einige häufig verwendete Module automatisch installiert. Bitte beachten Sie das peerDependencies-Attribut der Datei package.json im Karma-Code

Code kopieren Der Code lautet wie folgt:

„peerDependencies“: {

„karma-jasmine“: „~0.1.0“,

„karma-requirejs“: „~0.2.0“,

„karma-coffee-preprocessor“: „~0.1.0“,

„karma-html2js-preprocessor“: „~0.1.0“,

„karma-chrome-launcher“: „~0.1.0“,

„karma-firefox-launcher“: „~0.1.0“,

„karma-phantomjs-launcher“: „~0.1.0“,

„karma-script-launcher“: „~0.1.0“

}

Ein typisches laufendes Framework erfordert in Karma normalerweise eine karma.conf.js. Der darin enthaltene Code ist wie folgt:

Code kopieren Der Code lautet wie folgt:

module.exports = function(config){
config.set({
//Das Basisverzeichnis in den Dateien unten
basePath: '../',
// JS-Informationen, die in die Testumgebung geladen werden müssen
Dateien: [
„app/bower_components/angular/angular.js“,
        'app/bower_components/angular-route/angular-route.js',
       'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/**/*.js',
      'test/unit/**/*.js'
],
// Ob Änderungen in den oben genannten Dateien automatisch überwacht und Tests automatisch ausgeführt werden sollen
autoWatch: wahr,
// Anwendungstest-Framework
Frameworks: ['jasmine'],
//Welche Umgebung zum Testen des Codes verwendet werden soll, hier ist Chrome`
Browser: ['Chrome'],
// Verwendete Plug-Ins, wie Chrome-Browser und Jasmin-Plug-In
Plugins: [
             'karma-chrome-launcher',
             'karma-firefox-launcher',
             'Karma-Jasmin',
            'karma-junit-reporter'
],
// Ausgabe von Testinhalt und Modulname für den Export
Reporter: ['progress', 'junit'],
//Legen Sie die Informationen für die Ausgabe der Testinhaltsdatei fest
JunitReporter: {
Ausgabedatei: 'test_out/unit.xml',
Suite: 'Einheit'
}

});
};

Hier ist zu beachten, dass die meisten der oben genannten Plug-Ins nicht separat installiert werden müssen, da sie bei der Installation von Karma bereits installiert werden. Nur das Karma-Junit-Reporter-Export-Plug-In muss separat installiert werden. Ich möchte mehr über die Konfiguration erfahren. Klicken Sie hier

Das war's für Karma. Klicken Sie hier

Was ist Jasmin

Jasmine ist ein verhaltensgesteuertes Entwicklungsframework zum Testen von JavaScript-Code. Es erfordert kein DOM und verfügt über eine saubere, offensichtliche Syntax, sodass Sie problemlos Tests schreiben können 🎜>

Das Obige ist die Erklärung in der offiziellen Jasmin-Dokumentation. Unten finden Sie eine einfache Übersetzung auf Chinesisch

jasmine ist ein Testframework für die verhaltensgesteuerte Entwicklung. Es ist nicht auf ein JS-Framework oder DOM angewiesen. Es ist eine sehr saubere und benutzerfreundliche API-Testbibliothek.

Das Folgende ist ein einfaches Beispiel, um seine Verwendung zu veranschaulichen

Definieren Sie einen Testdateibefehl als test.js

Code kopieren Der Code lautet wie folgt:

beschreiben("Eine Spezifikation (mit Auf- und Abbau)", function() {
var foo;
beforeEach(function() {

foo = 0;
foo = 1;
});

afterEach(function() {

foo = 0;
});

it("ist nur eine Funktion, kann also jeden Code enthalten", function() {

Expect(foo).toEqual(1);
});

it("kann mehr als eine Erwartung haben", function() {

Expect(foo).toEqual(1);
Expect(true).toEqual(true);
});
});

Die oben genannten Beispiele stammen von der offiziellen Website. Für weitere Informationen

Klicken Sie hier

1. Zunächst wird jeder Testfall mit der Beschreibungsfunktion definiert, die über zwei Parameter verfügt. Der erste wird verwendet, um den allgemeinen zentralen Inhalt des Tests zu beschreiben, und der zweite Parameter ist eine Funktion, in der sich ein echter Testcode befindet steht

2.Es wird verwendet, um eine einzelne spezifische Testaufgabe zu definieren. Es verfügt außerdem über zwei Parameter. Der erste wird zur Beschreibung des Testinhalts verwendet, und der zweite Parameter ist eine Funktion, die einige Testmethoden speichert

3.expect wird hauptsächlich verwendet, um den Wert einer Variablen oder eines Ausdrucks zu berechnen und ihn dann mit dem erwarteten Wert zu vergleichen oder andere Ereignisse auszuführen

4.beforeEach und afterEach werden hauptsächlich verwendet, um vor und nach der Ausführung der Testaufgabe etwas zu tun. Das obige Beispiel besteht darin, den Wert der Variablen vor der Ausführung zu ändern und den Wert der Variablen nach Abschluss der Ausführung zurückzusetzen

Das Letzte, was ich sagen muss, ist, dass auf den Bereich in der Funktion „beschreiben“ in den Unterfunktionen zugegriffen werden kann, genau wie bei gewöhnlichem JS, genauso wie auf die obige Variable „foo“ zugegriffen wird

Wenn Sie das obige Testbeispiel ausführen möchten, können Sie es über Karar ausführen. Das Befehlsbeispiel lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Karma start test/karma.conf.js

Konzentrieren wir uns auf Unit-Tests von Controllern, Anweisungen und Servicemodulen in ng.

NG-Einheitstests

Aufgrund des Frameworks von ng selbst werden Module über di geladen und instanziiert. Um das Schreiben von Testskripten mit Jasmin zu erleichtern, stellt der Beamte daher eine Testtoolklasse von angle-mock.js zur Verfügung, um Moduldefinitionen bereitzustellen . , Laden, Injektion usw.

Lassen Sie uns über einige gängige Methoden in ng-mock sprechen

1.angular.mock.module Diese Methode befindet sich ebenfalls im Fenster-Namespace und ist sehr praktisch, um

aufzurufen

Modul wird verwendet, um die von der Injektionsmethode eingefügten Modulinformationen zu konfigurieren. Die Parameter können Zeichenfolgen, Funktionen und Objekte sein und können wie folgt verwendet werden

Code kopieren Der Code lautet wie folgt:

beforeEach(module('myApp.filters'));

beforeEach(module(function($provide) { $provide.value('version', 'TEST_VER');

}));

Es wird im Allgemeinen in der beforeEach-Methode verwendet, da dadurch sichergestellt werden kann, dass die Inject-Methode beim Ausführen der Testaufgabe die Modulkonfiguration erhalten kann

1.angular.mock.inject Diese Methode befindet sich ebenfalls im Fenster-Namespace und ist sehr praktisch, um

aufzurufen

inject wird verwendet, um das oben konfigurierte ng-Modul einzufügen, das in seiner Testfunktion aufgerufen wird:

Code kopieren Der Code lautet wie folgt:

angle.module('myApplicationModule', [])
.value('mode', 'app')
.value('version', 'v1.0.1');

beschreiben('MyApp', function() {

    // Sie müssen Module laden, die Sie testen möchten,
    // Es lädt standardmäßig nur das „ng“-Modul.
    beforeEach(module('myApplicationModule'));

    // inject() wird verwendet, um Argumente aller gegebenen Funktionen einzufügen
    it('sollte eine Version bereitstellen', inject(function(mode, version) {
      erwarten(version).toEqual('v1.0.1');
      erwarten(mode).toEqual('app');
    }));

    // Die inject- und module-Methode kann auch innerhalb von it oder beforeEach
verwendet werden     it('sollte eine Version überschreiben und testen, ob die neue Version eingefügt wird', function() {
      // module() akzeptiert Funktionen oder Strings (Modul-Aliase)
      module(function($provide) {
        $provide.value('version', 'overridden'); // Version hier überschreiben
      });

      inject(function(version) {
        erwarten(version).toEqual('overridden');
      });
    });
});

上面是官方提供的一些inject例子,代码很好看懂,其实inject里面就是利用angular.inject方法创建的一个内置的依赖注入实例,然后里面的模块注入跟普通ng模块里的依赖处理是一样的

简单的介绍完ng-mock之后,下面我们分别以控制器,指令,过滤器来编写一个简单的单元测试.

ng里控制器的单元测试

定义一个简单的控制器

复制代码代码如下:

var myApp = angle.module('myApp',[]);

    myApp.controller('MyController', function($scope) {
      $scope.spices = [{"name": "pasilla", "spiciness": "mild"},
                       {"name": "Jalapeno", "spiciness": "heiß, heiß, heiß!"},
                       {"name": "habanero", "spiciness": "LAVA HOT!!"}];
      $scope.spice = "Hallo Feenan!";
});

然后我们编写一个测试脚本

复制代码代码如下:

beschreiben('myController function', function() {

beschreiben('myController', function() {
var $scope;

beforeEach(module('myApp'));

    beforeEach(inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();
      $controller('MyController', {$scope: $scope});
    }));

    it('sollte ein „Gewürze“-Modell mit 3 Gewürzen erstellen‘, Funktion() {
      erwarten($scope.spices.length).toBe(3);
    });

    it('sollte den Standardwert von Spice festlegen', function() {
      erwarten($scope.spice).toBe('hello feenan!');
    });
});

});

上面利用了$rootScope来创建子作用域, 然后把这个参数传进控制器的构建方法$controller里去, 最终会执行上面的控制器里的方法,然后我们检查子作用域里的数组数量以及字符串变量是否跟期望的值相等.

想要了解更多关于ng里的控制器的信息,可以点击这里

ng里指令的单元测试

定义一个简单的指令

复制代码代码如下:

var app = angle.module('myApp', []);

app.directive('aGreatEye', function () {
    zurück {
        einschränken: 'E',
        ersetzen: true,
        Vorlage: '

deckellos, in Flammen gehüllt, 1 Mal

'
};
});

然后我们编写一个简单的测试脚本

复制代码代码如下:

beschreiben('Unit testet tolle Zitate', function() {
var $compile;
var $rootScope;

// Laden Sie das myApp-Modul, das die Direktive enthält
beforeEach(module('myApp'));

    // Referenzen auf $rootScope und $compile speichern
    // damit sie für alle Tests in diesem Beschreibungsblock verfügbar sind
    beforeEach(inject(function(_$compile_, _$rootScope_){
      // Der Injektor entpackt beim Abgleich die Unterstriche (_) um die Parameternamen herum
      $compile = _$compile_;
      $rootScope = _$rootScope_;
    }));

    it('Ersetzt das Element durch den entsprechenden Inhalt', function() {
        // Kompiliere ein Stück HTML, das die Direktive enthält
        var element = $compile("")($rootScope);
        // Alle Uhren auslösen, sodass der Bereichsausdruck 1 ausgewertet wird
        $rootScope.$digest();
        // Überprüfen Sie, ob das kompilierte Element den Vorlageninhalt enthält
        Expect(element.html()).toContain("ohne Deckel, in Flammen gehüllt, 2 Mal");
    });
});

上面的例子来自于官方提供的,最终上面的指令将会这用在html里使用

复制代码代码如下:

测试脚本里首先注入$compile与$rootScope两个服务,一个用来编译html,一个用来创建作用域用,注意这里的_,默认ng里注入的服务前后加上_时,最后会被ng处理掉的,这两个服务保存在内部的两个变量里,方便下面的测试用例能调用到

$compile方法传入原指令html,然后在返回的函数里传入$rootScope,这样就完成了作用域与视图的绑定,最后调用$rootScope.$digest来触发所有监听, 保证视图里的模型内容得到更新

然后获取当前指令对应元素的html内容与期望值进行对比.

想要了解更多关于ng里的指令的信息,可以点击这里

ng里的过滤器单元测试

定义一个简单的过滤器

复制代码代码如下:

var app = angle.module('myApp', []);

app.filter('interpolate', ['version', function(version) {

    Rückgabefunktion (Text) {

      return String(text).replace(/%VERSION%/mg, version);

    };

  }]);

然后编写一个简单的测试脚本

复制代码代码如下:

beschreiben('filter', function() {
beforeEach(module('myApp'));

beschreiben('interpolieren', Funktion() {

beforeEach(module(function($provide) {
$provide.value('version', 'TEST_VER');
}));

Es('sollte VERSION ersetzen', inject(function(interpolateFilter) {
Expect(interpolateFilter('before %VERSION% after')).toEqual('before TEST_VER after');
}));
});
});

Der obige Code konfiguriert zuerst das Filtermodul, definiert dann einen Versionswert, da Interpolate auf diesem Dienst basiert, und verwendet schließlich Inject, um den Interpolate-Filter einzufügen. Beachten Sie, dass das Filtersuffix hier und schließlich nach dem Filter hinzugefügt werden muss Der Textinhalt wird in der Filterfunktion an Executed übergeben und mit dem erwarteten Wert verglichen.

Zusammenfassung

Die Verwendung von Tests zur Entwicklung von NG kann die Stabilität des Moduls gewährleisten. Ein weiterer Punkt ist, dass es den Studierenden ein tiefgreifendes Verständnis vermitteln kann Wer sich mit ng entwickelt, macht die Tests schnell nach!

Unit-Test-Beispiel in anglejs_AngularJS

deckellos, in Flammen gehüllt, 1 Mal