Lorsque le projet NG devient de plus en plus grand, les tests unitaires doivent être mis à l'ordre du jour. Parfois, l'équipe prend d'abord les tests, certains implémentent les fonctions d'abord, puis testent des modules fonctionnels. Cela présente ses propres avantages et inconvénients. Aujourd'hui, nous parlons principalement de l'utilisation du karma et du jasmin pour effectuer des tests unitaires des modules NG.
Qu'est-ce que le karma
Karma est un cadre de contrôle des tests d'unité d'unité, fournissant des tests unitaires en cours d'exécution dans différents environnements, tels que Chrome, Firfox, Phantomjs, etc. Le cadre de test prend en charge Jasmine, Mocha, Qunit, et est un module NPM avec NodeJS comme environnement.
Il est recommandé d'utiliser le paramètre ---- Enregistrer-DEV lors de l'installation et du test des modules NPM associés, car cela est lié au développement. Généralement, si vous exécutez le karma, seules les deux commandes NPM suivantes sont nécessaires.
La copie de code est la suivante:
NPM Installer Karma --Save-Dev
NPM Installer Karma-Junit-Reporter --Save-Dev
Lors de l'installation de Karma, certains modules couramment utilisés seront automatiquement installés. Reportez-vous à la propriété PeerDependces du fichier package.json dans le code Karma.
La copie de code est la suivante:
"PeerDependances": {
"Karma-Jasmine": "~ 0.1.0",
"karma-requirejs": "~ 0.2.0",
"Karma-Coffee-Preprocessor": "~ 0.1.0",
"karma-html2js-préprocessor": "~ 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"
}
Ensuite, un cadre en cours d'exécution typique nécessite généralement un fichier de configuration. En karma, il peut s'agir d'un karma.conf.js. Le code à l'intérieur est un style Nodejs. Un exemple courant est le suivant:
La copie de code est la suivante:
module.exports = fonction (config) {
config.set ({
// Le répertoire de base dans les fichiers suivants
Basepath: '../',
// JS Informations qui doivent être chargées dans l'environnement de test
Fichiers: [
'app / bower_components / angular / angular.js',
'app / bower_components / angular-rote / angular-route.js',
'app / bower_components / angular-mocks / angular-mocks.js',
'app / js / ** / *. js',
'Test / Unit / ** / *. JS'
],
// s'il faut écouter automatiquement les modifications dans le fichier ci-dessus, exécuter automatiquement le test
Autowatch: vrai,
// Framework de test d'application
frameworks: ['jasmin'],
// Quel environnement utiliser pour tester le code? Voici Chrome`
Browsers: ['chrome'],
// plugins utilisés, tels que le navigateur chrome et les plug-ins jasmine
Plugins: [
«Karma-chrome-launcher»,
«Karma-Firefox-Launcher»,
'Karma-Jasmine',
«Karma-junit-reporter»
],
// la sortie du contenu de test et le nom du module utilisé pour exporter
Reporteurs: [«Progress», «Junit»],
// Définit les informations du fichier de contenu de test de sortie
Junitreporter: {
OutputFile: 'test_out / unit.xml',
Suite: 'unité'
}
});
};
Lorsque vous devez faire attention à cela, la plupart des plug-ins ci-dessus n'ont pas besoin d'être installés séparément, car ils ont été installés lors de l'installation du karma. Seuls les plug-ins d'exportation Karma-Junit-Reporter doivent être installés séparément. Si vous souhaitez en savoir plus sur les fichiers de configuration, cliquez ici
C’est tout au sujet du karma. Si vous voulez en savoir plus, cliquez ici
Qu'est-ce que le jasmin
Jasmine est un cadre de développement axé sur le comportement pour tester le code JavaScript. Cela ne dépend d'aucun autre framework JavaScript. Il ne nécessite pas de DOM. Et il a une syntaxe propre et évidente afin que vous puissiez facilement écrire des tests.
Ce qui précède est l'explication de celui-ci dans le document officiel du jasmin, et ce qui suit est une simple traduction en chinois
Jasmine est un cadre de test axé sur le comportement qui ne s'appuie sur aucun cadre JS et DOM. Il s'agit d'une bibliothèque d'essai API très propre et amicale.
Voici un exemple simple pour illustrer son utilisation
Définissez une commande de fichier de test comme test.js
La copie de code est la suivante:
décrire ("une spécification (avec configuration et déchirure)", fonction () {
var foo;
AVANTEACH (fonction () {
foo = 0;
foo + = 1;
});
aftereach (function () {
foo = 0;
});
il ("est juste une fonction, donc il peut contenir n'importe quel code", function () {
attendre (foo) .toequal (1);
});
it ("peut avoir plus d'une attente", function () {
attendre (foo) .toequal (1);
attendre (vrai) .toequal (true);
});
});
L'exemple ci-dessus vient du site officiel. Voici seulement quelques API importantes. Pour plus d'utilisation, veuillez cliquer ici
1. Premièrement, tout cas de test est défini par la fonction décrite. Il a deux paramètres. Le premier est utilisé pour décrire le contenu central global du test, et le deuxième paramètre est une fonction, qui écrit un code de test réel.
2. Il est utilisé pour définir une seule tâche de test spécifique, et il a également deux paramètres. Le premier est utilisé pour décrire le contenu de test, et le deuxième paramètre est une fonction, qui stocke certaines méthodes de test.
3. Attendez-vous à ce que ce soit utilisé pour calculer la valeur d'une variable ou d'une expression, puis de la comparer avec la valeur attendue ou de faire d'autres événements.
4.Avant, AferEach et AfterEach sont principalement utilisés pour faire certaines choses avant et après l'exécution de la tâche de test. L'exemple ci-dessus est de modifier la valeur de la variable avant l'exécution, puis de réinitialiser la valeur de la variable une fois l'exécution terminée.
Enfin, la portée de la fonction décrite est accessible dans les sous-fonctions, tout comme ce qui précède accède à la variable FOO
Si vous souhaitez exécuter l'exemple de test ci-dessus, vous pouvez l'exécuter via Karar. L'exemple de commande est le suivant:
La copie de code est la suivante:
Karma Start Test / Karma.conf.js
Ensuite, nous nous concentrerons sur les tests unitaires des contrôleurs, des instructions et des modules de service dans NG.
Tests unitaires pour NG
En raison du cadre de Ng lui-même, les modules sont chargés et instanciés via DI, donc afin de faciliter la rédaction de scripts de test avec le jasmin, le fonctionnaire fournit une classe d'outils de test angulaire.js pour fournir une définition du module, un chargement, une injection, etc.
Parlons de certaines méthodes courantes dans NG-Mock
1.angular.mock.module Cette méthode est également dans l'espace de noms de fenêtre, qui est très pratique à appeler.
Le module est utilisé pour configurer les informations du module injectées par la méthode Inject. Les paramètres peuvent être des chaînes, des fonctions et des objets. Ils peuvent être utilisés comme les suivants.
La copie de code est la suivante:
AVANT ENQUÊTE (module ('myApp.filters'));
AVANT ENCH (Module (fonction ($ fournis) {
$ fournis.value ('version', 'test_ver');
}));
Il est généralement utilisé dans la méthode Aveloweach, car cela peut garantir que la méthode d'injecte peut obtenir la configuration du module lors de l'exécution de la tâche de test.
1.angular.mock.inject Cette méthode est également dans l'espace de noms de fenêtre, qui est très pratique à appeler.
L'inject est utilisé pour injecter le module NG configuré ci-dessus. Il est appelé dans la fonction de test de celui-ci. Les exemples d'appels courants sont les suivants:
La copie de code est la suivante:
angular.module («myapplicationmodule», [])
.Value ('mode', 'app ")
.Value ('version', 'v1.0.1');
décrire ('myapp', function () {
// Vous devez charger des modules que vous souhaitez tester,
// il charge uniquement le module "ng" par défaut.
AVANT ENQUÊTE (Module («MyApplicationModule»));
// inject () est utilisé pour injecter des arguments de toutes les fonctions données
it ('devrait fournir une version', inject (fonction (mode, version) {
attendre (version) .toequal ('v1.0.1');
attendre (mode) .toequal ('app ");
}));
// La méthode de l'injection et du module peut également être utilisée à l'intérieur de l'IT ou avanteach
il ('devrait remplacer une version et tester la nouvelle version est injectée', function () {
// module () prend des fonctions ou des chaînes (alias modules)
module (fonction ($ fournis) {
$ fournis.value ('version', 'remplacé'); // remplace la version ici
});
inject (fonction (version) {
attendre (version) .toequal ('remplacé');
});
});
});
Ce qui précède est quelques exemples d'injects fournis par le fonctionnaire, et le code est facile à comprendre. En fait, Inject est une instance d'injection de dépendance intégrée créée à l'aide de la méthode Angular.inject. L'injection de module est alors la même que le traitement de dépendance dans les modules NG ordinaires.
Après avoir brièvement introduit NG-Mock, nous rédigerons un test unitaire simple à l'aide de contrôleurs, d'instructions et de filtres.
Test unitaire du contrôleur
Définir un contrôleur simple
La copie de code est la suivante:
var myApp = angular.module ('myApp', []);
MyApp.Controller ('MyController', Function ($ Scope) {
$ scope.spices = [{"name": "pasilla", "épic": "doux"},
{"Name": "Jalapeno", "épic": "chaud chaud chaud!"},
{"Name": "Habanero", "Spiccial": "Lava Hot !!"}];
$ scope.pice = "Hello Feenan!";
});
Ensuite, nous écrivons un script de test
La copie de code est la suivante:
décrire ('MyController Function', function () {
décrire ('myController', function () {
Var $ Scope;
AVANT ENQUÊTE (module ('myApp'));
AVANT ENCHAT (Inject (Fonction ($ Rootscope, $ Controller) {
$ scope = $ rootscope. $ new ();
$ contrôleur ('myController', {$ scope: $ scope});
}));
il ('devrait créer un modèle "Spices" avec 3 épices', function () {
attendre ($ scope.spices.length) .tobe (3);
});
il ('devrait définir la valeur par défaut de Spice', function () {
Attendez-vous ($ scope.pice) .tobe («Bonjour les commentaires!»);
});
});
});
Ce qui précède utilise $ Rootscope pour créer une sous -cope, puis transmet ce paramètre dans la méthode de construction du contrôleur $ contrôleur. Enfin, la méthode ci-dessus sera exécutée. Ensuite, nous vérifions si le nombre de tableaux dans la sous -cope et si les variables de chaîne sont égales à la valeur attendue.
Si vous voulez en savoir plus sur le contrôleur dans NG, vous pouvez cliquer ici
Test unitaire des instructions dans NG
Définir une instruction simple
La copie de code est la suivante:
var app = angular.module ('myApp', []);
app.directive ('agreateye', function () {
retour {
restreindre: «e»,
Remplacer: vrai,
Modèle: '<h1> sans couvercle, perdu en flamme, 1 fois </h1>'
};
});
Ensuite, nous écrivons un simple script de test
La copie de code est la suivante:
décrire ('unité de test de grandes citations', function () {
var $ compile;
var $ rootscope;
// Chargez le module MyApp, qui contient la directive
AVANT ENQUÊTE (module ('myApp'));
// Stockage des références à $ Rootscope et $ compile
// donc ils sont disponibles pour tous les tests de ce bloc décrivent
AVANTEACH (inject (fonction (_ $ compilé_, _ $ rootscope _) {
// L'injecteur débasse les soulignements (_) autour des noms de paramètres lors de la correspondance
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}));
il ('remplace l'élément par le contenu approprié', function () {
// compile un morceau de HTML contenant la directive
var element = $ compile ("<a-great-eye> </ a-great-eye>") ($ rootscope);
// tire toutes les montres, de sorte que l'expression de la portée 1 sera évaluée
$ rootscope. $ digest ();
// Vérifiez que l'élément compilé contient le contenu modèle
attendre (élément.html ()). toContain ("sans couvercle, perdu en flamme, 2 fois");
});
});
L'exemple ci-dessus vient de celui officiel, et la commande ci-dessus sera utilisée dans HTML.
La copie de code est la suivante:
<a-great-eye> </ a-great-eye>
Le script de test injecte d'abord deux services $ compile et $ rootscope, l'un est utilisé pour compiler HTML et l'autre est utilisé pour créer une portée. Notez que le _ est utilisé ici. Lorsque le service injecté dans NG est ajouté avant et après, il sera traité par NG. Ces deux services sont stockés dans deux variables internes, afin que les cas de test suivants puissent être appelés.
La méthode $ compile est transmise dans l'instruction d'origine HTML, puis la fonction retournée est transmise dans $ Rootscope, qui complète la liaison de la portée et de la vue. Enfin, appelez $ rootscope. $ Digest pour déclencher toute écoute, garantissant que le contenu du modèle dans la vue est mis à jour
Obtenez ensuite le contenu HTML de l'élément correspondant de l'instruction actuelle et comparez-la avec la valeur attendue.
Si vous voulez en savoir plus sur les instructions de NG, vous pouvez cliquer ici
Test de l'unité de filtre dans NG
Définir un filtre simple
La copie de code est la suivante:
var app = angular.module ('myApp', []);
app.filter ('interpolate', ['version', fonction (version) {
return function (text) {
String de retour (texte) .replace (//% version /% / mg, version);
};
}]);
Ensuite, écrivez un script de test simple
La copie de code est la suivante:
décrire ('filter', function () {
AVANT ENQUÊTE (module ('myApp'));
décrire ('interpolate', function () {
AVANT ENCH (Module (fonction ($ fournis) {
$ fournis.value ('version', 'test_ver');
}));
il ('devrait remplacer la version', inject (function (interpolateFilter) {
attendre (interpolateFilter ('avant% version% après')). toequal ('avant test_ver après');
}));
});
});
Le code ci-dessus configure d'abord le module de filtre, puis définit une valeur de version. Parce que l'interpolate dépend de ce service, injecte enfin le filtre interpolé avec Inject. Notez que le filtre ici doit être suivi du suffixe du filtre et finalement passe dans le contenu texte dans la fonction de filtre à exécuter, et le compare à la valeur attendue.
Résumer
Il y a de nombreux avantages à utiliser des tests pour développer NG, ce qui peut assurer la stabilité du module. Une autre chose est que vous pouvez avoir une compréhension approfondie du mécanisme de fonctionnement interne de NG, il est donc recommandé que les étudiants qui utilisent NG pour se développer soient remplis les tests dès que possible!