Lorsque le projet ng devient de plus en plus grand, les tests unitaires seront mis à l'ordre du jour. Parfois, l'équipe testera en premier, et certains implémenteront d'abord la fonction, puis testeront le module fonctionnel plus tard. Cela a ses propres avantages et inconvénients. . Aujourd'hui, je parlerai principalement de Parlons de l'utilisation de karma et de jasmine pour effectuer des tests unitaires du module ng.
.Qu'est-ce que le Karma
Karma est un cadre de contrôle d'exécution de tests unitaires qui permet d'exécuter des tests unitaires 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 utilisant Nodejs comme environnement. .
Il est recommandé d'utiliser le paramètre ----save-dev pour installer les modules npm liés aux tests, car cela est lié au développement. Généralement, pour exécuter karma, vous n'avez besoin que des deux commandes npm suivantes
.
Lors de l'installation de karma, certains modules couramment utilisés seront automatiquement installés. Veuillez vous référer à l'attribut peerDependencies du fichier package.json dans le code karma
.Un framework en cours d'exécution typique nécessite généralement un fichier de configuration. Dans karma, il peut s'agir d'un karma.conf.js. Le code à l'intérieur est dans le style nodejs :
.
});
};
Il convient de noter ici que la plupart des plug-ins ci-dessus n'ont pas besoin d'être installés séparément, car ils ont déjà été installés lors de l'installation de karma. Seul le plug-in d'exportation karma-junit-reporter doit être installé séparément. . Je souhaite en savoir plus sur la configuration. Les informations sur le fichier sont disponibles, Cliquez ici
C'est tout pour le karma. Si vous voulez en savoir plus, Cliquez ici
Qu'est-ce que le jasmin
Jasmine est un framework de développement basé sur le comportement pour tester le code JavaScript. Il ne dépend d'aucun autre framework JavaScript. Il ne nécessite pas de DOM et il a une syntaxe claire et évidente pour que vous puissiez facilement écrire des tests.
Ce qui précède est son explication dans la documentation officielle de Jasmine. Vous trouverez ci-dessous une simple traduction en chinois
.Jasmine est un framework de test pour le développement axé sur le comportement. Il ne repose sur aucun framework js ou DOM. Il s'agit d'une bibliothèque de test très propre et conviviale pour les API.
Ce qui suit est un exemple simple pour illustrer son utilisation
Définissez une commande de fichier de test comme test.js
avantEach(function() {
foo = 0;
foo = 1;
});
aprèsEach(function() {
foo = 0;
});
it("c'est juste une fonction, donc elle peut contenir n'importe quel code", function() {
Attendre(foo).toEqual(1);
});
it("peut avoir plus d'une attente", function() {
Attendre(foo).toEqual(1);
Expect(true).toEqual(true);
});
});
Les exemples ci-dessus proviennent du site officiel. Voici quelques API importantes. Pour plus d'informations, veuillez Cliquez ici
.1. Premièrement, tout cas de test est défini avec la fonction de description, qui a deux paramètres. Le premier est utilisé pour décrire le contenu central général du test, et le deuxième paramètre est une fonction dans laquelle du code de test réel. s'écrit
2.il est utilisé pour définir une seule tâche de test spécifique. Il comporte également deux paramètres. Le premier est utilisé pour décrire le contenu du test et le deuxième paramètre est une fonction qui stocke certaines méthodes de test
.3.expect est principalement utilisé pour calculer la valeur d'une variable ou d'une expression, puis la comparer avec la valeur attendue ou faire d'autres événements
4.beforeEach et afterEach sont principalement utilisés pour faire quelque chose avant et après l'exécution de la tâche de test. L'exemple ci-dessus consiste à modifier la valeur de la variable avant l'exécution, puis à réinitialiser la valeur de la variable une fois l'exécution terminée<.>
La dernière chose à dire est que la portée de la fonction de description est accessible dans les sous-fonctions, tout comme le JS ordinaire, tout comme elle accède à la variable foo ci-dessusSi vous souhaitez exécuter l'exemple de test ci-dessus, vous pouvez l'exécuter via karar. L'exemple de commande est le suivant :
Tests unitaires NG
En raison du framework de ng lui-même, les modules sont chargés et instanciés via di. Par conséquent, afin de faciliter l'écriture de scripts de test avec jasmine, le responsable fournit une classe d'outils de test d'angular-mock.js pour fournir des définitions de modules. , chargement, injection, etc.Parlons de quelques méthodes courantes dans ng-mock
1.angular.mock.module Cette méthode se trouve également dans l'espace de noms de la fenêtre et 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, et peuvent être utilisés comme suit
.
$provide.value('version', 'TEST_VER');
}));
1.angular.mock.inject Cette méthode se trouve également dans l'espace de noms de la fenêtre et est très pratique à appeler
inject est utilisé pour injecter le module ng configuré ci-dessus, qui est appelé dans sa fonction de test. Les exemples d'appels courants sont les suivants :
.
décrire('MonApp', fonction() {
// Vous devez charger les modules que vous souhaitez tester,
// il charge uniquement le module "ng" par défaut.
beforeEach(module('myApplicationModule'));
// inject() est utilisé pour injecter les arguments de toutes les fonctions données
it('devrait fournir une version', inject(function(mode, version) {
attendre(version).toEqual('v1.0.1');
attendre(mode).toEqual('app');
}));
// Les méthodes inject et module peuvent également être utilisées à l'intérieur de it ou beforeEach
it('doit remplacer une version et tester la nouvelle version est injectée', function() {
// module() prend des fonctions ou des chaînes (alias de module)
module (fonction ($ fournir) {
$provide.value('version', 'remplacé'); // remplacer la version ici
});
injecter(fonction(version) {
expect(version).toEqual('overridden');
});
});
});
上面是官方提供的一些inject例子,代码很好看懂,其实inject里面就是利用angular.inject方法创建的一个内置的依赖注入实例,然后里面的模块注入跟普通ng模块里的依赖处理是一样的
简单的介绍完ng-mock之后,下面我们分别以控制器,指令,过滤器来编写一个简单的单元测试.
ng里控制器的单元测试
定义一个简单的控制器
myApp.controller('MyController', function($scope) {
$scope.spices = [{"name": "pasilla", "piquant": "doux"},
{"name": "jalapeno", "piquant": "chaud, chaud, chaud!"},
{"name": "habanero", "piquant": "LAVE CHAUDE !!"}];
$scope.spice = "bonjour feenan !";
});
然后我们编写一个测试脚本
describe('myController', function() {
var $scope;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
$controller('MonContrôleur', {$scope: $scope});
}));
it('devrait créer un modèle "épices" avec 3 épices', function() {
attendre($scope.spices.length).toBe(3);
});
it('doit définir la valeur par défaut de spice', function() {
expect($scope.spice).toBe('bonjour feenan!');
});
});
});
Il s'agit de $rootScope, d'un $controller et d'un $controller.行上面的控制器里的方法,然后我们检查子作用域里的数组数量以及字符串变量是否跟期望的值相等.
想要了解更多关于ng里的控制器的信息,可以点击这里
ng里指令的单元测试
定义一个简单的指令
app.directive('aGreatEye', function() {
revenir {
restreindre : 'E',
remplacer : vrai,
modèle : '
然后我们编写一个简单的测试脚本
// Charge le module myApp, qui contient la directive
beforeEach(module('myApp'));
// Stocker les références à $rootScope et $compile
// ils sont donc disponibles pour tous les tests de ce bloc de description
beforeEach(inject(function(_$compile_, _$rootScope_){
// L'injecteur déroule les traits de soulignement (_) autour des noms de paramètres lors de la correspondance
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Remplace l'élément par le contenu approprié', function() {
// Compilez un morceau de HTML contenant la directive
var element = $compile("
// déclenche toutes les montres, donc l'expression de portée 1 sera évaluée
$rootScope.$digest();
// Vérifiez que l'élément compilé contient le contenu modélisé
expect(element.html()).toContain("sans couvercle, enveloppé de flammes, 2 fois");
});
});
上面的例子来自于官方提供的,最终上面的指令将会这用在html里使用
$compile方法传入原指令html,然后在返回的函数里传入$rootScope,这样就完成了作用域与视图的绑定,最Il s'agit de $rootScope.$digest.的模型内容得到更新
然后获取当前指令对应元素的html内容与期望值进行对比.
想要了解更多关于ng里的指令的信息,可以
ng里的过滤器单元测试
定义一个简单的过滤器
décrire('interpoler', function() {
beforeEach(module(function($provide) {
$provide.value('version', 'TEST_VER');
}));
It('devrait remplacer VERSION', inject(function(interpolateFilter) {
Expect(interpolateFilter('before %VERSION% after')).toEqual('before TEST_VER after');
}));
});
});
Le code ci-dessus configure d'abord le module de filtre, puis définit une valeur de version, car interpolate s'appuie sur ce service, et enfin utilise inject pour injecter le filtre d'interpolation. Notez que le suffixe Filter doit être ajouté après le filtre ici, et enfin. le contenu du texte est transmis à Exécuté dans la fonction de filtre et comparé à la valeur attendue.
Résumé
L'utilisation de tests pour développer NG présente de nombreux avantages. Cela peut garantir la stabilité du module. Un autre point est qu'il peut avoir une compréhension approfondie du mécanisme de fonctionnement interne de ng. Il est donc recommandé aux étudiants. qui développent avec ng rattrapent vite les tests !
Le rôle des serveurs de noms de domaine
Méthode de détection des liens morts d'un site Web
Comment réparer la base de données SQL
Quelles sont les fonctions de fenêtrage ?
Comment utiliser définir
Quel plugin est Composer ?
Tutoriel de création de site Web simple PHP
Comment supprimer des pages vierges dans Word
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
