L'une des fonctionnalités les plus brillantes d'Angular.JS est l'aspect Test. Lorsque les développeurs de Google ont développé AngularJS, ils ont gardé à l'esprit les tests 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 a une fonctionnalité si brillante pour tester le code AngularJS, qu'il est logique d'utiliser ce framework.
- Dans AngularJS, nous pouvons effectuer des 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.
Dans ce didacticiel, vous apprendrez-
- Introduction et installation du framework Karma
- Installation de Karma
- Configuration du framework Karma
- Test des contrôleurs AngularJS
- Test des directives AngularJS
- Test de bout en bout des applications AngularJS JS
Introduction et installation du framework Karma
Karma est un outil d'automatisation des tests créé par l'équipe Angular JS de Google. La première étape pour utiliser Karma est d'installer Karma. Karma est installé via npm (qui est un gestionnaire de paquets utilisé pour une installation facile des 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ù
- 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.
- Le paramètre install indique à l'utilitaire de ligne de commande npm que l'installation est requise.
- Il y a 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 test.
- karma-chrome-launcher est une bibliothèque séparée qui permet aux commandes karma d'être reconnues par le navigateur Chrome.
- karma-jasmine - Cela installe jasmine qui est un cadre dépendant de Karma.
Étape 2) L'étape suivante consiste à installer l'utilitaire de ligne de commande karma. Ceci est nécessaire pour exécuter les commandes de la ligne karma. L'utilitaire de ligne karma sera utilisé pour initialiser l'environnement karma pour les tests.
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 fait 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 de code 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 de karma les choses suivantes
- «Nom de votre application» - Ce nom sera remplacé par le nom de votre application.
- ' Nom de votre application' / AngularJS / AngularJS.js ' - Cela indique au karma que votre application dépend des modules de base dans AngularJS
- '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.
- Tous les fichiers principaux de l'application ou de la logique métier sont présents dans le dossier lib de votre application.
- Le dossier tests contiendra tous les tests unitaires
Pour vérifier si 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 présente les aspects suivants
- La fonction de description est utilisée pour donner une description du test. Dans notre cas, nous donnons la description «Test d'échantillon» à notre test.
- La fonction 'it' est utilisée pour 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.
- La combinaison des mots-clés «expect» et «toBe» indique 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, il exécutera le fichier de test ci-dessus
KARMA start
La sortie ci-dessous est tirée de l'IDE Webstorm dans lequel les étapes ci-dessus ont été effectuées.
- La sortie est fournie dans l'explorateur Karma de Webstorm. Cette fenêtre montre l'exécution de tous les tests qui sont définis dans le framework karma.
- Ici, vous pouvez voir que la description du test exécuté est affichée, qui est "Test d'échantillon".
- Ensuite, vous pouvez voir que le test lui-même qui porte le nom "La condition est vraie" est exécuté.
- Notez que puisque tous les tests ont l'icône verte "Ok" à côté, qui symbolise que tous les tests ont réussi.
Test des contrôleurs AngularJS
Le cadre de test de karma a également la fonctionnalité 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
- Créez une variable ID et attribuez-lui la valeur 5.
- 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 la condition préalable suivante est 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 vous assurer que les bons fichiers sont inclus pour le test. Le segment ci-dessous montre juste les fichiers faisant partie de karma.conf.js qui doivent être modifiés
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 de 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 de test de notre application.
Le code ci-dessous fait simplement les choses suivantes
- Créez un module Angular JS appelé sampleApp
- Créez un contrôleur appelé AngularJSController
- Créez une variable appelée ID, donnez-lui la valeur 5 et affectez-la à l'objet $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});
Une fois que le code ci-dessus est exécuté avec succès, l'étape suivante consiste à créer un scénario de test pour s'assurer 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é ControllerTest.js, qui sera placé dans le dossier de test. Le code ci-dessous fait simplement les choses clés suivantes
-
Fonction beforeEach - Cette fonction est utilisée pour charger notre module AngularJS.JS appelé 'sampleApp' avant le test. Notez qu'il s'agit du nom du module dans un fichier index.js.
-
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 toute sorte 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.
-
beforeEach (inject (function (_ $ controller_) - Ceci est utilisé pour injecter l'objet simulé dans notre test afin qu'il se comporte comme le contrôleur réel.
-
var $ scope = {}; Il s'agit d'un objet simulé en cours de création pour l'objet $ scope.
-
var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Ici, nous vérifions l'existence d'un contrôleur nommé 'Angular.JSController'. Ici, nous affectons également toutes les variables de notre objet $ scope dans notre contrôleur dans le fichier Index.js à l'objet $ scope dans notre fichier test
-
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 la rubrique précédente.
Test des directives AngularJS
Le cadre de test de karma a également la fonctionnalité de tester des directives personnalisées. Cela inclut les templateURL qui sont utilisées 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
- Créez un module AngularJS appelé sampleApp
- Créez une directive personnalisée avec le nom - Guru99
- Créez une fonction qui renvoie un modèle avec une balise d'en-tête qui affiche le texte «Ceci est AngularJS Testing».
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: 'This is AngularJS Testing
'};});
Une fois que le code ci-dessus est exécuté avec succès, l'étape suivante consiste à créer un scénario de test pour s'assurer 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 de test. Le code ci-dessous fait simplement les choses clés suivantes
-
Fonction beforeEach - Cette fonction est utilisée pour charger notre module Angular JS appelé 'sampleApp' avant le test.
-
Le service $ compile est utilisé pour compiler la directive. Ce service est obligatoire et doit être déclaré pour qu'Angular.JS puisse l'utiliser pour compiler notre directive personnalisée.
-
Le $ rootscope est la principale portée 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.
-
var element = $ compile ("
-
expect (element.html ()). toContain ("This is AngularJS Testing") - Ceci est utilisé pour indiquer à la fonction expect qu'elle doit trouver l'élément (dans notre cas la balise div) contenant le texte innerHTML de "This is Test 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 directivevar element = $compile("")($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 la rubrique précédente.
Test de bout en bout des applications AngularJS JS
Le cadre de test de karma avec un cadre appelé Protractor a 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 aussi 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.
- 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.
- 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.
- Enfin, nous utilisons la balise
avec les paires valeur / clé (ptutor.Name et ptutor.Description) pour afficher les données de la table. {{ ptutor.Name }} {{ ptutor.Description }}