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
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
Ein typisches laufendes Framework erfordert in Karma normalerweise eine karma.conf.js. Der darin enthaltene Code ist wie folgt:
});
};
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 Chinesischjasmine 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
foo = 0;
foo = 1;
});
foo = 0;
});
Expect(foo).toEqual(1);
});
Expect(foo).toEqual(1);
Expect(true).toEqual(true);
});
});
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:
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
aufzurufenModul 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
}));
1.angular.mock.inject Diese Methode befindet sich ebenfalls im Fenster-Namespace und ist sehr praktisch, um
aufzurufeninject wird verwendet, um das oben konfigurierte ng-Modul einzufügen, das in seiner Testfunktion aufgerufen wird:
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里控制器的单元测试
定义一个简单的控制器
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() {
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里指令的单元测试
定义一个简单的指令
app.directive('aGreatEye', function () {
zurück {
einschränken: 'E',
ersetzen: true,
Vorlage: '
然后我们编写一个简单的测试脚本
// 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("
// 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里的过滤器单元测试
定义一个简单的过滤器
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
