Uvod u AngularJS ispitivanje jedinica
Korištenjem AngularJS-a uspjeli ste izgraditi nevjerojatna korisnička sučelja, ali kada se složenost vašeg projekta poveća, testiranje jedinice postaje važan dio. Da biste poboljšali kvalitetu koda, testiranje je vrlo važno. Kod testiranja jedinica, testiramo funkcionalnost komponente izolirano, bez ikakvih vanjskih izvora, primjerice DB, datoteka, itd. Jedinstveni testovi se lako pišu i brži su u izvršavanju. U jedinstvenom testiranju ne testiramo funkcionalnost aplikacije, prema tome niska pouzdanost. AngularJS se sastoji od različitih građevnih blokova kao što su usluge, komponente, direktive itd. Za svaki od njih trebamo napisati zasebne ispitne slučajeve.
Osnove ispitivanja jedinice
- Moramo slijediti čiste postupke kodiranja.
- Primijenite iste principe kao i funkcionalni kod.
- Test slučajevi su mala funkcija / metoda od 10 linija ili manje.
- Koristite ispravnu konvenciju o imenovanju.
- Imaju samo jednu odgovornost, tj. Testiraju samo jednu stvar.
Alati za ispitivanje AngularJS
1) Jasmin
Razvojni okvir za testiranje JavaScript koda. Pruža funkcije koje pomažu u strukturiranju testnih slučajeva. Kako su projekti složeni i testovi rastu, važno je održavati ih dobro strukturiranim i dokumentiranim, a Jasmine pomaže da se to postigne. Da biste Jasmin koristili s Karmom, koristite karma-jasmin test trkač.
2) Karma
Ispitni pokretač za pisanje i pokretanje testova jedinice tijekom razvoja AngularJS aplikacije. Povećava produktivnost programera. Potaknut će web poslužitelj koji učitava aplikacijski kod i izvršava testne slučajeve.
To je NodeJS aplikacija instalirana putem npm / pređe. Može se konfigurirati za pokretanje na različitim preglednicima kako bi se osiguralo da aplikacija radi na svim dostupnim preglednicima.
3) Ugaono-ružni
AngularJS pruža ngMock modul, koji nam daje ismijavajuće testove. Koriste se za ubrizgavanje i ismijavanje AngularJS usluga u jedinicama ispitivanja.
Postavljanje okoliša
- Instalirajte NodeJS na svoj sustav. (Https://nodejs.org/en/download/).
- Instalirajte bilo koji IDE (poput VS koda, zagrade i sl.).
- Napravite praznu mapu (testiranje $ mkdir jedinice) u vašem direktoriju.
- Otvorite mapu za testiranje jedinice u IDE. Zatim otvorite terminal (naredbeni redak) unutar mape za testiranje jedinice.
- U terminalu slijedi sljedeće naredbe jednu za drugom:
Kreirajte package.json:
npm initInstall Angular:
npm i kutno –uštedi Instalirajte Karmu:
npm i -g karma –sava -dev instalirajte jasmin:
npm i karma-jasmin jasmin-jezgra –sava -devInstall Angular ruga:
npm i angular-mocks –save -devInstaliraj Karma Chrome preglednik:
npm i karma-krom-bacač –sava-dev - Stvorite dvije mape nazvane app i testovi unutar mape za testiranje jedinice.
- Napravite karma.config.js. U terminalu dajte naredbu ispod:
karma init
Postavit će vam set pitanja. Odaberite odgovore u nastavku.
-> Odaberite okvir za testiranje kao Jasmine.
-> Odaberite Chrome kao preglednik.
-> Navedite put za svoje js i spec datoteke (app / * js i testovi / *. Spec.js)
-> Nakon još nekoliko pitanja, to će se učiniti.
-> Otvorite karma.config.js datoteke i put i dodatke kao što je prikazano u nastavku. Ispod je karma.config.js datoteka.
// 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
))
)
Mapa strukturirana nakon ovih koraka trebala bi biti sljedeća:
Primjer s provedbom
Ispitivanje filtra
Filtri su metode koje mijenjaju podatke u ljudski čitljiv format. U ovom ćemo modulu stvoriti filtar i napisati testove jedinice za taj filtar i provjeriti radi li on kao što se očekivalo.
koraci:
Napravite datoteku s imenom filter.js u mapi aplikacije.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
E sad, napišemo jedinice testnih slučajeva kako bismo provjerili radi li filtar kako se očekuje ili ne.
Jasmine Okvirne metode
- Opišite (): Definira test skup - skupinu povezanih ispitivanja.
- It (): Definira specifikaciju ili test.
- Očekujte (): Uzima stvarnu vrijednost kao parametar i veže ga funkcijom podudarnosti.
- Matcher funkcija: Uzima očekivanu vrijednost kao parametre. Odgovorno je prijaviti Jasmine ako je očekivanje istinito ili netočno.
Primjer:
toBe ('vrijednost'), toContain ('vrijednost'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Napravite datoteku s imenom filter.spec.js u mapi s testovima.
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
));
));
));
Za pokretanje testa dajte naredbu ispod na terminalu jedinice za testiranje jedinice.
Karma početak
ili možete postaviti "karma start" u script.json test skripti i dati naredbu ispod.
npm test
Otvorit će se Chrome preglednik.
Izlaz u terminalu:
Ispitivanje kontrolera i servisa
AngularJS drži logiku odvojenom od sloja prikaza, što kontrolerima i uslugama omogućuje jednostavno testiranje.
koraci:
1. Napravite datoteku s imenom controller.js u mapi aplikacije.
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. Napravite datoteku pod nazivom controller.spec.js u mapi s testovima.
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);
));
));
Izlaz u terminalu:
Zaključak
AngularJS aplikacije sastoje se od modula. Na razini aplikacije, to su AngularJS moduli. Na razini modula to su usluge, tvornice, komponente, direktive i filtri. Svaki od njih sposoban je međusobno komunicirati putem svog vanjskog sučelja. Pisanje testnih slučajeva za vašu aplikaciju AngularJS ubrzava postupak uklanjanja pogrešaka i razvoja.
Preporučeni članci
Ovo je vodič za testiranje AngularJS jedinice. Ovdje raspravljamo o uvođenju i osnovama testiranja jedinica zajedno s AngularJS alatima za testiranje i primjerom s implementacijom. Možete pogledati i sljedeće članke da biste saznali više -
- Karijera u kutnomJS
- ReactJs vs AngularJs
- Kutna aplikacija JS
- Karijera u razvoju