Introducere în testarea unității AngularJS
Folosind AngularJS puteți construi interfețe uimitoare de utilizator, dar când complexitatea proiectului dvs. crește, testarea unității devine o parte importantă. Pentru a îmbunătăți calitatea codului, testarea este foarte importantă. În testarea unității, testăm o funcționalitate a componentelor în mod izolat, fără niciun fel de resurse externe, de exemplu DB, fișiere etc. Testele unității sunt ușor de scris și mai rapid în execuție. În testarea unităților, nu testăm funcționalitatea unei aplicații, deci o încredere scăzută. AngularJS constă din diferite blocuri de construcții precum servicii, componente, directive etc. Pentru fiecare dintre ele, trebuie să scriem cazuri de testare separate.
Fundamentele testării unităților
- Trebuie să urmăm practicile de codificare curate.
- Aplicați aceleași principii ca și codul funcțional.
- Cazurile de testare sunt o funcție / metodă mică de 10 linii sau mai puțin.
- Utilizați o convenție de denumire adecvată.
- Au o singură responsabilitate, adică testează un singur lucru.
Instrumente de testare AngularJS
1) Iasomie
Cadrul de dezvoltare pentru testarea codului javascript. Oferă funcții care ajută la structurarea cazurilor de testare. Pe măsură ce proiectele devin complexe și testele cresc, păstrarea lor bine structurată și documentată este importantă, iar Jasmine ajută la realizarea acestui lucru. Pentru a utiliza Jasmine cu Karma, folosiți testul karma-iasomie.
2) Karma
Un alergător de teste pentru scrierea și rularea testelor unității în timp ce dezvoltă aplicația AngularJS Crește productivitatea dezvoltatorilor. Acesta va genera un server web care încarcă codul aplicației și execută cazurile de testare.
Este o aplicație NodeJS instalată prin npm / fire. Poate fi configurat pentru a rula cu diverse browsere pentru a vă asigura că aplicația funcționează pe toate browserele disponibile.
3) Angular-Mocks
AngularJS oferă modulul ngMock, care ne oferă teste de tipar. Acestea sunt utilizate pentru a injecta și a batjocori serviciile AngularJS în testele unității.
Configurare mediu
- Instalați NodeJS pe sistemul dvs. (Https://nodejs.org/en/download/).
- Instalați orice IDE (cum ar fi codul VS, paranteze etc.).
- Creați un director gol (testarea unității $ mkdir) în directorul dvs.
- Deschideți folderul de testare a unității din IDE. Apoi deschideți terminalul (prompt de comandă) în folderul de testare a unității.
- În terminal urmează comenzile de mai jos una câte una:
Creați pachet.json:
npm initInstall Angular:
npm i angular –saveInstall Karma:
npm i -g karma –save -devInstall Jasmine:
npm i karma-iasomie iasomie-salvare -devInstalați unghiuri unghiulare:
npm i angular-mocks -save -devInstall Karma Chrome browser:
npm i karma-crom-lansator - salvare-dev - Creați două dosare numite aplicație și teste în folderul de testare a unității.
- Creați karma.config.js. În terminal, dați mai jos comanda:
karma init
Îți va pune un set de întrebări. Selectați răspunsurile de mai jos pentru aceasta.
-> Selectați cadrul de testare ca Jasmine.
-> Selectați Chrome ca browser.
-> Specificați calea pentru fișierele dvs. js și spec. (App / * js și teste / *. Spec.js)
-> După alte câteva întrebări, se va face.
-> Deschide fișierele karma.config.js și calea și plugin-urile așa cum se arată mai jos. Mai jos este fișierul 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
))
)
Folderul structurat după acești pași ar trebui să fie ca mai jos:
Exemplu cu Implementare
Testarea unui filtru
Filtrele sunt metode care schimbă datele într-un format care poate fi citit de oameni. În acest modul, vom crea un filtru și scrie teste de unitate pentru acel filtru și vom verifica dacă funcționează așa cum este de așteptat.
paşi:
Creați un fișier numit filter.js în folderul aplicației.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Acum, să scriem cazurile testului unității pentru a verifica dacă filtrul funcționează așa cum este de așteptat sau nu.
Metode cadru Jasmine
- Descrieți (): definește un set de teste - un grup de teste conexe.
- Acesta (): definește o specificație sau un test.
- Așteptați-vă (): ia o valoare reală ca parametru și este înlănțuit cu o funcție de matcher.
- Funcția matcher: ia valoarea de așteptat ca parametri. Este responsabil de raportarea către Jasmine dacă așteptarea este adevărată sau falsă.
Exemplu:
toBe ('valoare'), toContain ('valoare'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Creați un fișier numit filter.spec.js în folderul teste.
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
));
));
));
Pentru a rula testul, dați mai jos comanda în terminalul folderului de testare a unității.
Karma începe
sau puteți seta „karma start” în scriptul de testare package.json și dați mai jos comanda.
test npm
Aceasta va deschide browserul Chrome.
Ieșire în terminal:
Testarea unui controler și service
AngularJS menține logica separată de stratul de vedere, ceea ce face testerele și serviciile ușor de testat.
paşi:
1. Creați un fișier numit controller.js în folderul aplicației.
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. Creați un fișier numit controller.spec.js în folderul teste.
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);
));
));
Ieșire în terminal:
Concluzie
Aplicațiile AngularJS sunt compuse din module. La nivel de aplicație, acestea sunt module AngularJS. La nivel de modul, acestea sunt servicii, fabrici, componente, directive și filtre. Fiecare dintre ei este capabil să comunice între ei prin intermediul interfeței sale externe. Scrierea de cazuri de testare a unității pentru aplicația dvs. AngularJS grăbește procesul de depanare și dezvoltare.
Articole recomandate
Acesta este un ghid pentru testarea unității AngularJS. Aici discutăm introducerea și fundamentele testării unităților împreună cu instrumentele de testare și exemplul AngularJS cu implementarea. De asemenea, puteți consulta următoarele articole pentru a afla mai multe -
- Cariera în AngularJS
- ReactJs vs AngularJs
- Aplicație unghiulară JS
- Cariera în DevOps