Wenn das NG -Projekt immer größer wird, muss die Tests in Einheiten auf die Tagesordnung durchgeführt werden. Manchmal wird das Team zuerst die Tests durchführen, einige implementieren zuerst Funktionen und testen dann Funktionsmodule. Dies hat seine eigenen Vor- und Nachteile. Heute sprechen wir hauptsächlich über die Verwendung von Karma und Jasmine, um Unit -Tests von NG -Modulen durchzuführen.
Was ist Karma?
Karma ist ein Einheitstest -Lauf -Steuerungsrahmen, das laufende Unit -Tests in verschiedenen Umgebungen wie Chrom, Firfox, Phantomjs usw. bietet
Es wird empfohlen, den Parameter ---- Save-Dev beim Installieren und Testen der verwandten NPM-Module zu verwenden, da dies mit der Entwicklung zusammenhängt. Wenn Sie Karma ausführen, sind im Allgemeinen nur die folgenden zwei NPM -Befehle erforderlich.
Die Codekopie lautet wie folgt:
NPM CARMA-SAVE-DEV INSTALLIEREN
NPM KARMA-JUNIT-REPORTER-SAVE-DEV INSTALLIEREN
Bei der Installation von Karma werden einige häufig verwendete Module automatisch installiert. Siehe PeerDependencies -Eigenschaft der Paket.json -Datei im Karma -Code.
Die Codekopie lautet wie folgt:
"PeerDependenzen": {{
"Karma-Jasmin": "~ 0,1,0",
"Karma-Requirejs": "~ 0.2.0",
"Karma-Coffee-Präzessor": "~ 0,1,0",
"Karma-html2js-Präzessor": "~ 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"
}
Dann erfordert ein typisches laufendes Framework normalerweise eine Konfigurationsdatei. In Karma kann es ein Karma.conf.js sein. Der Code im Inneren ist ein NodeJS -Stil. Ein häufiges Beispiel ist wie folgt:
Die Codekopie lautet wie folgt:
module.exports = function (config) {
config.set ({
// das grundlegende Verzeichnis in den folgenden Dateien
Basepath: '../',
// JS -Informationen, die in der 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/Einheit/**/*. JS' '
],
// Wenn Änderungen in der obigen Datei automatisch anhören, führen Sie den Test automatisch aus
AutoWatch: Richtig,
// Anwendungstest Framework
Frameworks: ['Jasmine'],
// In welcher Umgebung soll der Code getestet werden? Hier ist Chrome`
Browser: ['Chrome'],
// verwendete Plugins wie Chrombrowser und Jasmine Plug-Ins
Plugins: [
"Karma-chrome-Launcher", "
"Karma-Firefox-Launcher",
'Karma-Jasmin',
"Karma-Junit-Reporter"
],
// Die Ausgabe des Testinhalts und der zum Exportieren verwendete Modulname
Reporter: ['Fortschritt', 'jungit'],
// Legen Sie die Informationen der Ausgabetestinhaltsdatei fest
JUNITREPORTER: {
Ausgabedatei: 'test_out/unit.xml',
Suite: 'Einheit'
}
});
};
Wenn Sie darauf achten müssen, müssen die meisten der oben genannten Plug-Ins nicht separat installiert werden, da sie bei der Installation von Karma installiert wurden. Nur das Karma-Junit-Reporter-Export-Plug-In muss separat installiert werden. Wenn Sie mehr über Konfigurationsdateien erfahren möchten, klicken Sie hier
Das dreht sich alles um Karma. Wenn Sie mehr darüber erfahren möchten, klicken Sie hier
Was ist Jasmine
Jasmine ist ein verhaltensgetriebenes Entwicklungsrahmen zum Testen von JavaScript-Code. Es hängt nicht von anderen JavaScript -Frameworks ab. Es erfordert kein DOM. Und es hat eine saubere, offensichtliche Syntax, damit Sie problemlos Tests schreiben können.
Das obige ist die Erklärung des offiziellen Dokuments von Jasmine, und das Folgende ist eine einfache Übersetzung in Chinesisch
Jasmine ist ein verhaltensgetriebenes Test-Framework, das nicht auf JS-Framework und DOM beruht. Es ist eine sehr saubere und freundliche API -Testbibliothek.
Hier ist ein einfaches Beispiel, um seine Verwendung zu veranschaulichen
Definieren Sie einen Testdateibefehl als test.js
Die Codekopie lautet wie folgt:
beschreiben ("eine Spezifikation (mit Setup und Abtründe)", function () {
var foo;
voran (function () {
foo = 0;
foo += 1;
});
Afterach (function () {
foo = 0;
});
It ("ist nur eine Funktion, so dass es jeden Code enthalten kann", function () {
erwarten (foo). toequal (1);
});
IT ("kann mehr als eine Erwartung haben", function () {
erwarten (foo). toequal (1);
erwarten (wahr) .Toequal (wahr);
});
});
Das obige Beispiel stammt von der offiziellen Website. Hier sind nur einige wichtige APIs. Für weitere Verwendung klicken Sie bitte hier
1. Erstens wird jeder Testfall durch die Beschreibung der Funktion definiert. Es hat zwei Parameter. Der erste wird verwendet, um den gesamten zentralen Inhalt des Tests zu beschreiben, und der zweite Parameter ist eine Funktion, die einen realen Testcode schreibt.
2. Es wird verwendet, um eine einzige spezifische Testaufgabe zu definieren, und es hat auch zwei Parameter. Der erste wird verwendet, um den Testinhalt zu beschreiben, und der zweite Parameter ist eine Funktion, die einige Testmethoden speichert.
3. Erwarten Sie hauptsächlich, um den Wert einer Variablen oder eines Ausdrucks zu berechnen und ihn dann mit dem erwarteten Wert zu vergleichen oder einige andere Ereignisse durchzuführen.
4. Beeeach und nach Afterach werden hauptsächlich dazu verwendet, einige Dinge vor und nach der Ausführung der Testaufgabe zu tun. Das obige Beispiel besteht darin, den Wert der Variablen vor der Ausführung zu ändern und dann den Wert der Variablen nach Abschluss der Ausführung zurückzusetzen.
Schließlich kann in den Teilfunktionen in der Beschreibung in der Beschreibungsfunktion zugegriffen werden, genau wie die oben genannten Zugriff
Wenn Sie das obige Testbeispiel ausführen möchten, können Sie es durch Karar ausführen. Das Befehlsbeispiel lautet wie folgt:
Die Codekopie lautet wie folgt:
Karma Start Test/Karma.Conf.js
Als nächstes konzentrieren wir uns auf Unit -Tests von Controllern, Anweisungen und Servicemodulen in NG.
Unit -Tests für NG
Aufgrund des Rahmens von NG selbst werden die Module durch DI geladen und instanziiert. Um das Schreiben von Testskripten mit Jasmin zu erleichtern, bietet der Beamte eine eckular-mock.js-Testwerkzeugklasse, um Moduldefinition, Beladung, Injektion usw. bereitzustellen.
Sprechen wir über einige gängige Methoden in NG-Mock
1.angular.mock.module Diese Methode befindet sich auch im Fenster -Namespace, der sehr bequem zu rufen ist.
Das Modul wird verwendet, um die von der Injektionsmethode injizierten Modulinformationen zu konfigurieren. Die Parameter können Zeichenfolgen, Funktionen und Objekte sein. Sie können wie folgt verwendet werden.
Die Codekopie lautet wie folgt:
voran (Modul ('MyApp.Filters'));
voran (Modul (Funktion ($ bereitstellen) {
$ cgeben.Value ('Version', 'test_ver');
}));
Es wird im Allgemeinen in der Vorher -Leach -Methode verwendet, da dies sicherstellen kann, dass die Injektionsmethode die Modulkonfiguration bei der Ausführung der Testaufgabe erhalten kann.
1.angular.mock.inject Diese Methode befindet sich auch im Fensternamenspace, der sehr bequem zu rufen ist.
Injektion wird verwendet, um das oben konfigurierte NG -Modul injizieren. Es wird in der Testfunktion von IT aufgerufen. Common Calling Beispiele sind wie folgt:
Die Codekopie lautet wie folgt:
Angular.module ('MyApplicationModule', [])
.Value ('Modus', 'App')
.Value ('Version', 'v1.0.1');
beschreiben ('myapp', function () {
// Sie müssen Module laden, die Sie testen möchten,
// Es wird standardmäßig nur das "NG" -Modul geladen.
voran (Modul ('MyApplicationModule'));
// Inject () wird verwendet, um Argumente aller gegebenen Funktionen zu injizieren
IT ('sollte eine Version angeben', Inject (Funktion (Modus, Version) {
erwarten (Version) .ToEqual ('v1.0.1');
erwarten (modus). toequal ('App');
}));
// Die Injekt- und Modulmethode kann auch innerhalb des IT oder vorab verwendet werden
IT ('sollte eine Version überschreiben und testen, dass die neue Version injiziert wird', function () {
// module () nimmt Funktionen oder Zeichenfolgen (Modul -Aliase) übernommen.
Modul (Funktion ($ bereitgestellt) {
$ cipe.Value ('Version', 'Overdiden'); // Version hier überschreiben
});
Inject (Funktion (Version) {
erwarten (Version). TOEqual ('Overdiden');
});
});
});
Die oben genannten sind einige Injektionsbeispiele vom Beamten, und der Code ist leicht zu verstehen. Tatsächlich ist Inject eine integrierte Abhängigkeitsinjektionsinstanz, die mit der Angular.inject-Methode erstellt wurde. Anschließend entspricht die Modulinjektion der Abhängigkeitsverarbeitung in normalen NG -Modulen.
Nach kurzer Einführung von NG-Mock schreiben wir einen einfachen Unit-Test mit Controllern, Anweisungen und Filtern.
Einheitstest des Controllers
Definieren Sie einen einfachen Controller
Die Codekopie lautet wie folgt:
var myapp = angular.module ('myapp', []);
MyApp.Controller ('MyController', Funktion ($ scope) {
$ scope.sspices = [{"Name": "Pasila", "Schärfe": "mild"},
{"Name": "Jalapeno", "Schärfe": "Heiß heiß!"},
{"Name": "Habanero", "Schärfe": "Lava Hot !!"}];
$ scope.spice = "Hallo Feenan!";
});
Dann schreiben wir ein Testskript
Die Codekopie lautet wie folgt:
beschreiben ('MyController -Funktion', function () {
beschreiben ('MyController', function () {
var $ scope;
voran (Modul ('MyApp');
voran (Inject (Funktion ($ rootscope, $ controller) {
$ scope = $ rootscope. $ new ();
$ controller ('MyController', {$ scope: $ scope});
}));
IT ('sollte "Gewürze" -Modell mit 3 Gewürzen', function () {erstellen
erwarten ($ scope.sspices.length) .tobe (3);
});
It ('sollte den Standardwert von Gewürz festlegen', function () {
erwarten ($ scope.spice) .tobe ('Hallo Feedback!');
});
});
});
Das obige verwendet $ rootscope, um ein Subskope zu erstellen, und übergibt diesen Parameter dann in die Kontrollmethode des Controller $ $ Controller. Schließlich wird die obige Methode ausgeführt. Anschließend prüfen wir, ob die Anzahl der Arrays im Subskope und ob die String -Variablen dem erwarteten Wert gleich sind.
Wenn Sie mehr über den Controller in NG erfahren möchten, können Sie hier klicken
Einheitstest von Anweisungen in NG
Definieren Sie eine einfache Anweisung
Die Codekopie lautet wie folgt:
var app = angular.module ('myapp', []);
app.directive ('agreeateye', function () {
zurückkehren {
einschränken: 'e',
ersetzen: wahr,
Vorlage: '<h1> Deckellos, in Flamme verloren, 1 -mal </h1>' '
};
});
Dann schreiben wir ein einfaches Testskript
Die Codekopie lautet wie folgt:
beschreiben ('Unit -Tests großartige Zitate', function () {
var $ compile;
var $ rootscope;
// Laden Sie das MyApp -Modul, das die Anweisung enthält
voran (Modul ('MyApp');
// Verweise auf $ rootscope und $ compile speichern
// damit sie allen Tests in diesem Beschreibung Block verfügbar sind
voran (inject (function (_ $ compile_, _ $ rootscope _) {
// Der Injektor packt die Unterstriche (_) aus den Parameternamen beim Übereinstimmung aus
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}));
It ('ersetzt das Element durch den entsprechenden Inhalt', function () {
// Kompilieren Sie ein Stück HTML, das die Richtlinie enthält
var element = $ compile ("<a-grat-eye> </a-grat-eye>") ($ rootscope);
// Feuern Sie alle Uhren, sodass der Zielfernrohrausdruck 1 bewertet wird
$ rootscope. $ digest ();
// Überprüfen Sie, ob das kompilierte Element den Vorlageninhalt enthält
erwarten (element.html ()). tocontain ("Deckel, in Flamme verloren, 2 mal");
});
});
Das obige Beispiel stammt vom offiziellen und der obige Befehl wird in HTML verwendet.
Die Codekopie lautet wie folgt:
<a-grat-eye> </a-grat-eye>
Das Testskript injiziert zunächst zwei Dienste $ compile und $ rootscope, einer wird verwendet, um HTML zu kompilieren, und der andere wird verwendet, um den Umfang zu erstellen. Beachten Sie, dass der _ hier verwendet wird. Wenn der in NG injizierte Dienst vor und nachher hinzugefügt wird, wird er von NG verarbeitet. Diese beiden Dienste werden in zwei internen Variablen gespeichert, sodass die folgenden Testfälle aufgerufen werden können.
Die $ Compile -Methode wird in die ursprüngliche HTML -Anweisung übergeben, und dann wird die zurückgegebene Funktion in $ rootScope übergeben, was die Bindung von Umfang und Ansicht vervollständigt. Nennen Sie $ rootscope.
Nehmen Sie dann den HTML -Inhalt des entsprechenden Elements der aktuellen Anweisung und vergleichen Sie ihn mit dem erwarteten Wert.
Wenn Sie mehr über die Anweisungen in NG erfahren möchten, können Sie hier klicken
Filtereinheitstest in NG
Definieren Sie einen einfachen Filter
Die Codekopie lautet wie folgt:
var app = angular.module ('myapp', []);
App.filter ('Interpolat', ['Version', Funktion (Version) {
Rückgabefunktion (Text) {
Return String (Text) .Replace (//%Version/%/mg, Version);
};
}]);
Schreiben Sie dann ein einfaches Testskript
Die Codekopie lautet wie folgt:
beschreiben ('filter', function () {
voran (Modul ('MyApp');
beschreiben ('interpolieren', function () {
voran (Modul (Funktion ($ bereitstellen) {
$ cgeben.Value ('Version', 'test_ver');
}));
IT ("sollte Version ersetzen", Inject (Funktion (InterpolatFilter) {
erwarten (InterpolatFilter ('vor % Version % ig nach'). Toequal ('vor test_ver nach');
}));
});
});
Der obige Code konfiguriert zuerst das Filtermodul und definiert dann einen Versionswert. Da das Interpol von diesem Dienst abhängt, injizieren Sie schließlich den Interpolatfilter mit Injektion. Beachten Sie, dass der Filter hier vom Filtersuffix folgen muss und schließlich den Textinhalt in die Filterfunktion übergeben wird, um es mit dem erwarteten Wert zu vergleichen.
Zusammenfassen
Die Verwendung von Tests zur Entwicklung von NG bietet viele Vorteile, die die Stabilität des Moduls gewährleisten können. Eine andere Sache ist, dass Sie ein umfassendes Verständnis des internen Betriebsmechanismus von NG haben können. Daher wird empfohlen, dass Schüler, die NG zur Entwicklung verwenden, die Tests so schnell wie möglich ausfüllen sollten!