Exemple de test unitaire dans angulairejs_AngularJS

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
.

Copier le code Le code est le suivant :

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

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

.

Copier le code Le code est le suivant :

"peerDependencies": {
"karma-jasmin": "~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"
>

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 :
.

Copier le code Le code est le suivant :

module.exports = fonction(config){
config.set({
//Le répertoire de base dans les fichiers ci-dessous
basePath : '../',
// Informations JS qui doivent être chargées dans l'environnement de test
fichiers : [
'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'
],
// S'il faut surveiller automatiquement les modifications dans les fichiers ci-dessus et exécuter automatiquement les tests
autoWatch : vrai,
// Framework de test d'applications
cadres : ['jasmin'],
//Quel environnement utiliser pour tester le code, voici chrome`
navigateurs : ['Chrome'],
// Plug-ins utilisés, tels que le navigateur Chrome et le plug-in Jasmine
plugins : [
             'karma-chrome-lanceur',
             'karma-firefox-lanceur',
             'karma-jasmin',
            'karma-junit-reporter'
],
// Sortie du contenu du test et du nom du module pour l'export
Reporters : ['progress', 'junit'],
//Définissez les informations pour la sortie du fichier de contenu de test
JunitReporter : {
Fichier de sortie : 'test_out/unit.xml',
Suite : 'unité'
>

});
};

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

Copier le code Le code est le suivant :

décrire("Une spécification (avec configuration et démontage)", function() {
var foo;

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-dessus

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 :

Copier le code Le code est le suivant :

karma démarre test/karma.conf.js

Concentrons-nous sur les tests unitaires des contrôleurs, des instructions et des modules de service en ng.

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

.

Copier le code Le code est le suivant :

beforeEach(module('myApp.filters'));
beforeEach(module(function($provide) {

$provide.value('version', 'TEST_VER');
}));

Il est généralement utilisé dans la méthode beforeEach, car cela peut garantir que la méthode inject peut obtenir la configuration du module lors de l'exécution de la tâche de test

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 :

.

Copier le code Le code est le suivant :

angulaire.module('monApplicationModule', [])
      .value('mode', 'app')
      .value('version', 'v1.0.1');

  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里控制器的单元测试

定义一个简单的控制器

复制代码 代码如下 :

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

    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 !";
});

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

复制代码 代码如下 :

décrire('fonction monContrôleur', fonction() {

 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里指令的单元测试

定义一个简单的指令

复制代码 代码如下 :

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

app.directive('aGreatEye', function() {
    revenir {
        restreindre : 'E',
        remplacer : vrai,
        modèle : '

sans couvercle, entouré de flammes, 1 fois

'
    };
});

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

复制代码 代码如下 :

décrire('Test unitaire de bonnes citations', function() {
    var $compile;
    var $rootScope;

    // 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("")($rootScope);
        // 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里使用

复制代码 代码如下 :

的_,默认ng里注入的服务前后加上_时,最后会方便下面的测试用例能调用到

$compile方法传入原指令html,然后在返回的函数里传入$rootScope,这样就完成了作用域与视图的绑定,最Il s'agit de $rootScope.$digest.的模型内容得到更新

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

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

点击这里

ng里的过滤器单元测试

定义一个简单的过滤器

复制代码 代码如下 :

var app = angulaire.module('myApp', []);
app.filter('interpolate', ['version', function(version) {
    fonction de retour (texte) {
      return String(text).replace(/%VERSION%/mg, version);
    };
  }]);

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

复制代码 代码如下 :

décrire('filtre', fonction() {
beforeEach(module('myApp'));

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 !