Introduction aux tests unitaires AngularJS

En utilisant AngularJS, vous pouvez créer des interfaces utilisateur incroyables, mais lorsque la complexité de votre projet augmente, les tests unitaires deviennent une partie importante. Pour améliorer la qualité de votre code, les tests sont très importants. Dans les tests unitaires, nous testons une fonctionnalité de composant de manière isolée, sans aucune ressource externe, par exemple une base de données, des fichiers, etc. Les tests unitaires sont faciles à écrire et plus rapides à exécuter. Dans les tests unitaires, nous ne testons pas la fonctionnalité d'une application, d'où une faible confiance. AngularJS se compose de différents blocs de construction comme les services, les composants, les directives, etc. Pour chacun d'eux, nous devons écrire des cas de test distincts.

Principes fondamentaux des tests unitaires

  1. Nous devons suivre des pratiques de codage propres.
  2. Appliquez les mêmes principes que le code fonctionnel.
  3. Les cas de test sont une petite fonction / méthode de 10 lignes ou moins.
  4. Utilisez une convention de dénomination appropriée.
  5. Ils n'ont qu'une seule responsabilité: tester une seule chose.

Outils de test AngularJS

1) Jasmin

Cadre de développement pour tester le code javascript. Il fournit des fonctions qui aident à structurer les cas de test. À mesure que les projets deviennent complexes et que les tests se développent, il est important de les maintenir bien structurés et documentés, et Jasmine aide à y parvenir. Pour utiliser Jasmine avec Karma, utilisez le lanceur de test karma-jasmine.

2) Karma

Un lanceur de test pour écrire et exécuter des tests unitaires lors du développement de l'application AngularJS. Il augmente la productivité des développeurs. Il engendrera un serveur Web qui charge le code d'application et exécute les cas de test.
Il s'agit d'une application NodeJS installée via npm / yarn. Il peut être configuré pour s'exécuter sur différents navigateurs afin de garantir que l'application fonctionne sur tous les navigateurs disponibles.

3) Angular-Mocks

AngularJS fournit le module ngMock, qui nous donne des tests simulés. Ils sont utilisés pour injecter et simuler les services AngularJS dans les tests unitaires.

Configuration de l'environnement

  1. Installez NodeJS sur votre système. (https://nodejs.org/en/download/).
  2. Installez n'importe quel IDE (comme le code VS, les supports, etc.).
  3. Créez un dossier vide ($ mkdir unit testing) dans votre répertoire.
  4. Ouvrez le dossier des tests unitaires dans votre IDE. Ouvrez ensuite le terminal (invite de commande) dans votre dossier de test unitaire.
  5. Dans le terminal, suivez les commandes ci-dessous une par une:
    Créez package.json:
    npm initInstall Angular:
    npm i angular –saveInstall Karma:
    npm i -g karma –save -devInstall Jasmine:
    npm i karma-jasmine jasmine-core –save -devInstall Angular mocks:
    npm i angular-mocks –save -devInstall Karma Chrome browser:
    npm i karma-chrome-launcher –save-dev
  6. Créez deux dossiers nommés comme application et tests dans le dossier de tests unitaires.
  7. Créez karma.config.js. Dans le terminal, donnez la commande ci-dessous:
    karma init
    Il vous posera une série de questions. Sélectionnez les réponses ci-dessous.
    -> Sélectionnez le framework de test comme Jasmine.
    -> Sélectionnez Chrome comme navigateur.
    -> Spécifiez le chemin de vos fichiers js et spec (app / * js et tests / *. Spec.js)
    -> Après quelques questions, ce sera fait.
    -> Ouvrez les fichiers karma.config.js et le chemin et les plugins comme indiqué ci-dessous. Vous trouverez ci-dessous le fichier karma.config.js.

// Karma configuration
module.exports = function(config) (
config.set((
// base path is used to resolve all patterns
basePath: '',
plugins:('karma-jasmine', 'karma-chrome-launcher'),
frameworks: ('jasmine'),
// list of files to load in the browser
files: (
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*.spec.js'
),
// list of files to exclude
exclude: (),
preprocessors: (),
reporters: ('progress'),
// server port
port: 9876,
// enable / disable colors in output
colors: true,
logLevel: config.LOG_INFO,
// enable / disable watch mode for files
autoWatch: true,
browsers: ('Chrome'),
singleRun: false,
// how many browser should start simultaneous
concurrency: Infinity
))
)

Le dossier structuré après ces étapes devrait être comme ci-dessous:

Exemple avec implémentation

Test d'un filtre

Les filtres sont des méthodes qui transforment les données en un format lisible par l'homme. Dans ce module, nous allons créer un filtre et écrire des tests unitaires pour ce filtre et vérifier s'il fonctionne comme prévu.
Pas:

Créez un fichier nommé filter.js dans le dossier de l'application.

filter.js

angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))

Maintenant, écrivons les cas de tests unitaires pour vérifier si le filtre fonctionne comme prévu ou non.

Méthodes du framework Jasmine

  • Describe (): il définit une suite de tests - un groupe de tests associés.
  • It (): définit une spécification ou un test.
  • Expect (): il prend une valeur réelle comme paramètre et il est enchaîné avec une fonction matcher.
  • Fonction Matcher: prend la valeur attendue comme paramètres. Il est responsable de signaler à Jasmine si l'attente est vraie ou fausse.

Exemple:

toBe ('value'), toContain ('value'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().

Créez un fichier nommé filter.spec.js dans le dossier tests.

filter.spec.js

//1. Describe the object type
describe('Filters', function () (
//2. Load the Angular App
beforeEach(module('MyApp'));
//3. Describe the object by name
describe('compute', function () (
var compute;
//4. Initialize the filter
beforeEach(inject(function ($filter) (
compute = $filter('compute', ());
)));
//5. Write the test in the it block along with expectations.
it('Should return 0 if input is negative', function () (
const result = compute(-1);
expect(result).toBe(0); //pass
));
it('Should increment the input if input is positive', function () (
const result = compute(1);
expect(result).toBe(2);//pass
//expect(compute(3)).toBe(5);//fail
));
));
));

Pour exécuter le test, donnez la commande ci-dessous dans le terminal du dossier de tests unitaires.
Début du karma
ou vous pouvez définir «karma start» dans le script de test package.json et donner la commande ci-dessous.
test npm

Cela ouvrira le navigateur Chrome.

Sortie dans le terminal:

Test d'un contrôleur et d'un service

AngularJS garde la logique distincte de la couche de vue, ce qui rend les contrôleurs et les services faciles à tester.
Pas:
1. Créez un fichier nommé controller.js dans le dossier de l'application.

controller.js

var app = angular.module('Myapp', ())
app.service('calcService', (
function()(
function square(o1)(
return o1*o1;
)
return (square:square);
)
));
app.controller('MyController', function MyController($scope) (
$scope.title = "Hello MyController";
$scope.square = function() (
$scope.result = calcService.square($scope.number);
)
));

2. Créez un fichier nommé controller.spec.js dans le dossier tests.

controller.spec.js

describe('MyController', function() (
var controller, scope;
beforeEach(angular.mock.module('Myapp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) (
scope = $rootScope.$new();
controller = $controller('MyController', ( $scope : scope ));
)));
it('Title should be defined', inject(function ($rootScope, $controller) (
expect(scope.title).toBeDefined();
)));
it('Title as Hello MyController', inject(function ($rootScope, $controller) (
expect(scope.title).toEqual('Hello MyController');
)));
));
describe('square', function()(
var calcService;
beforeEach(function()(
module('Myapp');
inject( function($injector)(
calcService = $injector.get('calcService');
));
));
it('should square the number', function()(
var result = calcService.square(3);
expect(result).toBe(9);
));
));

Sortie dans le terminal:

Conclusion

Les applications AngularJS sont composées de modules. Au niveau de l'application, ce sont des modules AngularJS. Au niveau du module, ce sont les services, les usines, les composants, les directives et les filtres. Chacun d'eux est capable de communiquer entre eux via son interface externe. L'écriture de cas de tests unitaires pour votre application AngularJS accélère votre processus de débogage et de développement.

Articles recommandés

Ceci est un guide pour les tests unitaires AngularJS. Nous discutons ici de l'introduction et des principes fondamentaux du test unitaire ainsi que des outils de test AngularJS et de l'exemple avec la mise en œuvre. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Carrière à AngularJS
  2. ReactJs vs AngularJs
  3. Application JS angulaire
  4. Carrière dans DevOps

Catégorie:

Développement de logiciels