Tests unitaires AngularJS : tutoriel Karma Jasmine

L'une des fonctionnalités les plus brillantes d'Angular.JS est la Tests aspect. Lorsque les développeurs de Google ont développé AngularJS, ils ont gardé les tests à l'esprit et se sont assurés que l'ensemble du framework AngularJS était testable.

Dans AngularJS, les tests sont normalement effectués à l'aide de Karma (framework). Les tests Angular JS peuvent être effectués sans Karma, mais le framework Karma possède une fonctionnalité si brillante pour tester le code AngularJS qu'il est logique d'utiliser ce framework.

• Dans AngularJS, nous pouvons effectuer Tests unitaires séparément pour les contrôleurs et les directives.
• Nous pouvons également effectuer des tests de fin de fin d'AngularJS, qui testent du point de vue de l'utilisateur.

Introduction et installation du framework Karma

Le karma est un outil d'automatisation des tests créé par l'équipe Angular JS de Google. La première étape pour utiliser Karma consiste à installer Karma. Karma est installé via npm (qui est un gestionnaire de packages utilisé pour faciliter l'installation de modules sur une machine locale).

Installation de Karma

L'installation de Karma via npm se fait en deux étapes.

Étape 1) Exécutez la ligne ci-dessous à partir de la ligne de commande

npm install karma karma-chrome-launcher karma-jasmine

Où,

1. npm est l'utilitaire de ligne de commande du gestionnaire de packages de nœuds utilisé pour installer des modules personnalisés sur n'importe quelle machine.
2. Le paramètre install indique à l'utilitaire de ligne de commande npm que l'installation est requise.
3. Il existe 3 bibliothèques spécifiées dans la ligne de commande qui sont nécessaires pour travailler avec Karma.
• karma est la bibliothèque principale qui sera utilisée à des fins de tests.
• karma-chrome-launcher est une bibliothèque distincte qui permet aux commandes karma d'être reconnues par le navigateur Chrome.
• karma-jasmine – Ceci installe jasmine qui est un framework dépendant de Karma.

Étape 2) L'étape suivante consiste à installer l'utilitaire de ligne de commande karma. Ceci est requis pour exécuter les commandes de la ligne karma. L'utilitaire karma line sera utilisé pour initialiser l'environnement karma à des fins de test.

Pour installer l'utilitaire de ligne de commande, exécutez la ligne ci-dessous à partir de la ligne de commande

npm install karma-cli

où,

karma-cli est utilisé pour installer l'interface de ligne de commande pour karma qui sera utilisée pour écrire les commandes karma dans l'interface de ligne de commande.

Configuration du framework Karma

L'étape suivante consiste à configurer le karma, ce qui peut être effectué via la commande

"karma –init"

Une fois l'étape ci-dessus exécutée, karma créera un fichier karma.conf.js. Le fichier ressemblera probablement à l'extrait ci-dessous

files: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Les fichiers de configuration ci-dessus indiquent au moteur d'exécution Karma les éléments suivants :

1. « Nom de votre candidature » – Celui-ci sera remplacé par le nom de votre application.
2. »Nom de votre application'/AngularJS/AngularJS.js' – Cela indique au karma que votre application dépend des modules de base d’AngularJS
3. 'Nom de votre application'/AngularJS-mocks/AngularJS-mocks.js' – Cela indique à Karma d'utiliser la fonctionnalité de test unitaire pour AngularJS à partir du fichier Angular.JS-mocks.js.
4. Tous les principaux fichiers d'application ou de logique métier sont présents dans le dossier lib de votre application.
5. Le dossier tests contiendra tous les tests unitaires.

Pour vérifier si le karma fonctionne, créez un fichier appelé Sample.js, insérez le code ci-dessous et placez-le dans le répertoire de test.

describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

Le code ci-dessus a les aspects suivants

1. La fonction décrire est utilisée pour donner une description du test. Dans notre cas, nous donnons la description « Sample test » à notre test.
2. La fonction 'it' permet de donner un nom au test. Dans notre cas, nous donnons le nom de notre test comme « La condition est vraie ». Le nom du test doit être significatif.
3. La combinaison des mots clés « attendre » et « être » indique quelle est la valeur attendue et réelle du résultat du test. Si la valeur réelle et attendue est la même, le test réussira, sinon il échouera.

Lorsque vous exécutez la ligne suivante à l'invite de commande, elle exécutera le fichier de test ci-dessus

KARMA start

La sortie ci-dessous est extraite de l'EDI Webstorm dans lequel les étapes ci-dessus ont été réalisées.

1. La sortie vient dans l'explorateur Karma dans Webstorm. Cette fenêtre montre l'exécution de tous les tests définis dans le framework karma.
2. Ici, vous pouvez voir que la description du test exécuté est affichée, à savoir « Exemple de test ».
3. Ensuite, vous pouvez voir que le test lui-même qui porte le nom « La condition est vraie » est exécuté.
4. Notez que puisque tous les tests ont l’icône verte « Ok » à côté, ce qui symbolise la réussite de tous les tests.

Test des contrôleurs AngularJS

Le framework de tests karma dispose également de fonctionnalités permettant de tester les contrôleurs de bout en bout. Cela inclut le test de l'objet $scope qui est utilisé dans les contrôleurs.

Regardons un exemple de la façon dont nous pouvons y parvenir.

Dans notre exemple,

Il faudrait d’abord définir un contrôleur. Ce contrôleur effectuerait les étapes mentionnées ci-dessous

1. Créez une variable ID et attribuez-lui la valeur 5.
2. Attribuez la variable ID à l'objet $scope.

Notre test testera l'existence de ce contrôleur et testera également si la variable ID de l'objet $scope est définie sur 5.

Nous devons d’abord nous assurer que les conditions préalables suivantes sont en place

Installez la bibliothèque Angular.JS-mocks via npm. Cela peut être fait en exécutant la ligne ci-dessous dans l'invite de commande

npm install Angular JS-mocks

Ensuite, modifiez le fichier karma.conf.js pour garantir que les bons fichiers sont inclus pour le test. Le segment ci-dessous montre simplement la partie des fichiers de karma.conf.js qui doit être modifiée

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

• Le paramètre 'files' indique essentiellement à Karma tous les fichiers nécessaires à l'exécution des tests.
• Les fichiers AngularJS.js et AngularJS-mocks.js sont requis pour exécuter les tests unitaires AngularJS
• Le fichier index.js va contenir notre code pour le contrôleur
• Le dossier test va contenir tous nos tests AngularJS

Ci-dessous notre code Angular.JS qui sera stocké sous forme de fichier Index.js dans le dossier test de notre application.

Le code ci-dessous fait simplement les choses suivantes

1. Créer un Module AngularJS appelé sampleApp
2. Créez un contrôleur appelé AngularJSController
3. Créez une variable appelée ID, donnez-lui une valeur de 5 et affectez-la à l'objet $scope

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

Une fois le code ci-dessus exécuté avec succès, l'étape suivante consisterait à créer un Cas de test pour garantir que le code a été écrit et exécuté correctement.

Le code de notre test sera celui indiqué ci-dessous.

Le code sera dans un fichier séparé appelé ControllerTest.js, qui sera placé dans le dossier test. Le code ci-dessous fait simplement les choses clés suivantes

1. Fonction beforeEach – Cette fonction est utilisée pour charger notre module AngularJS.JS appelé « sampleApp » avant l'exécution du test. Notez qu'il s'agit du nom du module dans un fichier index.js.
2. L'objet $controller est créé en tant qu'objet maquette pour le contrôleur « Angular JSController » qui est défini dans notre fichier index.js. Dans tout type de test unitaire, un objet fictif représente un objet factice qui sera réellement utilisé pour le test. Cet objet simulé simulera en fait le comportement de notre contrôleur.
3. beforeEach(inject(function(_$controller_) – Ceci est utilisé pour injecter l'objet fictif dans notre test afin qu'il se comporte comme le contrôleur réel.
4. var $scope = {}; Il s'agit d'un objet fictif créé pour l'objet $scope.
5. var contrôleur = $controller('AngularJSController', { $scope: $scope }); – Ici, nous vérifions l'existence d'un contrôleur nommé 'Angular.JSController'. Ici, nous attribuons également toutes les variables de notre objet $scope dans notre contrôleur dans le fichier Index.js à l'objet $scope dans notre fichier de test.
6. Enfin, nous comparons le $scope.ID à 5

describe('AngularJSController', function() {
    beforeEach(module('sampleApp'));

    var $controller;

    beforeEach(inject(function(_$controller_){
              $controller = _$controller_;
    }));

    describe('$scope.ID', function() {
        it('Check the scope object', function() {
            var $scope = {};
            var controller = $controller('AngularJSController', { $scope: $scope });
            expect($scope.ID).toEqual(5);
        });
    });
});

Le test ci-dessus s'exécutera dans le navigateur Karma et donnera le même résultat que celui indiqué dans le sujet précédent.

Test des directives AngularJS

Le framework de tests karma dispose également de fonctionnalités permettant de tester des directives personnalisées. Cela inclut les templateURL qui sont utilisés dans les directives personnalisées.

Regardons un exemple de la façon dont nous pouvons y parvenir.

Dans notre exemple, nous allons d'abord définir une directive personnalisée qui fait les choses suivantes

1. Créez un module AngularJS appelé sampleApp
2. Créez une directive personnalisée avec le nom – Guru99
3. Créez une fonction qui renvoie un modèle avec une balise d'en-tête qui affiche le texte « Ceci est un test AngularJS ».

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

Une fois le code ci-dessus exécuté avec succès, l'étape suivante consisterait à créer un scénario de test pour garantir que le code a été écrit et exécuté correctement. Le code de notre test sera comme indiqué ci-dessous

Le code sera dans un fichier séparé appelé DirectiveTest.js, qui sera placé dans le dossier test. Le code ci-dessous fait simplement les choses clés suivantes

1. Fonction beforeEach – Cette fonction est utilisée pour charger notre module Angular JS appelé « sampleApp » avant l'exécution du test.
2. Le service $compile est utilisé pour compiler la directive. Ce service est obligatoire et doit être déclaré afin qu'Angular.JS puisse l'utiliser pour compiler notre directive personnalisée.
3. Le $rootscope est la portée principale de toute application AngularJS.JS. Nous avons vu l'objet $scope du contrôleur dans les chapitres précédents. Eh bien, l'objet $scope est l'objet enfant de l'objet $rootscope. La raison pour laquelle cela est déclaré ici est que nous apportons une modification à une balise HTML réelle dans le DOM via notre directive personnalisée. Par conséquent, nous devons utiliser le service $rootscope qui écoute ou sait quand un changement se produit à partir d'un document HTML.
4. élément var = $compile(" ») – Ceci est utilisé pour vérifier si notre directive est injectée comme elle le devrait. Le nom de notre directive personnalisée est Guru99, et nous savons grâce à notre chapitre sur les directives personnalisées que lorsque la directive est injectée dans notre code HTML, elle sera injectée sous la forme ' '. Par conséquent, cette déclaration est utilisée pour effectuer cette vérification.
5. expect(element.html()).toContain(« Ceci est un test AngularJS ») – Ceci est utilisé pour indiquer à la fonction expect qu'elle doit trouver l'élément (dans notre cas, la balise div) pour contenir le texte innerHTML de « Ceci est Tests AngularJS ».

describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
   beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
 }));

 it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Le test ci-dessus s'exécutera dans le navigateur Karma et donnera le même résultat que celui indiqué dans le sujet précédent.

Test de bout en bout des applications AngularJS JS

Le framework de test de karma ainsi qu'un framework appelé Protractor ont la fonctionnalité de tester une application Web de bout en bout.

Il ne s'agit donc pas seulement de tester les directives et les contrôleurs, mais également de tester tout ce qui peut apparaître sur une page HTML.

Regardons un exemple de la façon dont nous pouvons y parvenir.

Dans notre exemple ci-dessous, nous allons avoir une application AngularJS qui crée une table de données à l'aide de la directive ng-repeat.

1. Nous créons d’abord une variable appelée « tutoriel » et lui attribuons des paires clé-valeur en une seule étape. Chaque paire clé-valeur sera utilisée comme données lors de l'affichage du tableau. La variable du didacticiel est ensuite affectée à l'objet scope afin qu'il soit accessible depuis notre vue.
2. Pour chaque ligne de données du tableau, nous utilisons la directive ng-repeat. Cette directive parcourt chaque paire clé-valeur dans l'objet de portée du didacticiel à l'aide de la variable ptutor.
3. Enfin, nous utilisons le balise avec les paires clé-valeur (ptutor.Name et ptutor.Description) pour afficher les données du tableau.

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

Une fois le code ci-dessus exécuté avec succès, l'étape suivante consisterait à créer un scénario de test pour garantir que le code a été écrit et exécuté correctement. Le code de notre test sera comme indiqué ci-dessous

Notre test va en fait tester la directive ng-repeat et garantir qu'elle contient 3 lignes de données comme il se doit dans l'exemple ci-dessus.

Nous devons d’abord nous assurer que les conditions préalables suivantes sont en place

Installez la bibliothèque du rapporteur via npm. Cela peut être fait en exécutant la ligne ci-dessous dans l'invite de commande

"npm install protractor"

Le code de notre test sera celui indiqué ci-dessous.

Le code sera dans un fichier séparé appelé CompleteTest.js , qui sera placé dans le dossier test. Le code ci-dessous fait simplement les choses clés suivantes

1. La fonction de navigateur est fournie par la bibliothèque Protractor et suppose que notre application AngularJS (avec le code indiqué ci-dessus) s'exécute sur l'URL de notre site – http://localhost:8080/Guru99/
2. var list=element.all(by.repeater(ptuteur dans le tutoriel')); -Cette ligne de code récupère en fait la directive ng-repeat qui est remplie par le code 'ptutor in tutoriel'. L'élément et by.repeater sont des mots-clés spéciaux fournis par la bibliothèque rapporteur qui nous permettent d'obtenir des détails sur la directive ng-repeat.
3. attendre(list.count()).toEqual(3); – Enfin, nous utilisons la fonction expect pour voir que nous obtenons effectivement 3 éléments renseignés dans notre table à la suite de la directive ng-repeat.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

Le test ci-dessus s'exécutera dans le navigateur Karma et donnera le même résultat que celui indiqué dans le sujet précédent.

Résumé

• Les tests dans AngularJS sont réalisés en utilisant le framework karma, un framework développé par Google lui-même.
• Le framework karma est installé à l'aide du gestionnaire de packages de nœuds. Les modules clés qui doivent être installés pour les tests de base sont karma, karma-chrome-launcher, karma-jasmine et karma-cli.
• Les tests sont écrits dans des fichiers js séparés, normalement conservés dans le dossier test de votre application. L'emplacement de ces fichiers de test doit être mentionné dans un fichier de configuration spécial appelé karma.conf.js. Karma utilise ce fichier de configuration lors de l'exécution de tous les tests.
• Karma peut également être utilisé pour tester les contrôleurs et les directives personnalisées.
• Pour un test Web de bout en bout, un autre framework appelé rapporteur doit être installé via le gestionnaire de packages Node. Ce framework fournit des méthodes spéciales qui peuvent être utilisées pour tester tous les éléments d'une page HTML.