Uvod v testiranje enote AngularJS
S pomočjo AngularJS lahko sestavite neverjetne uporabniške vmesnike, toda ko se kompleksnost vašega projekta poveča, postane testiranje enot pomemben del. Za izboljšanje kakovosti kode je testiranje zelo pomembno. Pri testiranju enot testiramo funkcionalnost komponente samostojno, brez kakršnih koli zunanjih virov, na primer DB, datotek itd. Preizkusi enot so enostavni za pisanje in hitrejši v izvedbi. Pri testiranju enot ne testiramo funkcionalnosti aplikacije, zato ima nizko zaupanje. AngularJS je sestavljen iz različnih gradnikov, kot so storitve, komponente, direktive itd. Za vsako od njih moramo napisati ločene testne primere.
Osnove enotnega testiranja
- Upoštevati moramo čiste prakse kodiranja.
- Uporabite enaka načela kot funkcijska koda.
- Testni primeri so majhna funkcija / metoda 10 vrstic ali manj.
- Uporabite pravilno konvencijo o poimenovanju.
- Imajo samo eno odgovornost, tj. Preizkusijo samo eno stvar.
AngularJS orodja za testiranje
1) Jasmin
Razvojni okvir za testiranje kode JavaScript. Ponuja funkcije, ki pomagajo pri strukturiranju testnih primerov. Ko se projekti zapletejo in testi rastejo, je pomembno, da so dobro strukturirani in dokumentirani, Jasmine pa pomaga doseči to. Če želite Jasmine uporabljati skupaj s Karmo, uporabite testni tekač karma-jasmin.
2) Karma
Testni tekač za pisanje in izvajanje testov enot med razvijanjem aplikacije AngularJS. Povečuje produktivnost razvijalcev. Na njem bo sprožen spletni strežnik, ki naloži aplikacijsko kodo in izvrši testne primere.
Gre za aplikacijo NodeJS, nameščeno prek npm / preje. Konfigurirate ga lahko tako, da deluje z različnimi brskalniki in tako zagotavlja, da aplikacija deluje v vseh brskalnikih, ki so na voljo.
3) Kotni-Mocks
AngularJS ponuja modul ngMock, ki nam omogoča posmehljive teste. Uporabljajo se za injiciranje in posmeh storitev AngularJS v enotnih testih.
Namestitev okolja
- Namestite NodeJS v svoj sistem. (https://nodejs.org/en/download/).
- Namestite poljuben IDE (na primer kodo VS, oklepaje itd.).
- Ustvarite prazno mapo (testiranje enote $ mkdir) v svojem imeniku.
- Odprite mapo za testiranje enote v IDE. Nato odprite terminal (ukazni poziv) znotraj mape za testiranje enote.
- V terminalu sledite naslednjim ukazom, enega za drugim:
Ustvari paket.json:
npm initInstall Angular:
npm i kotno - shranite Namestite Karmo:
npm i -g karma –save -dev Namestite jasmin:
npm i karma-jasmin jasmin-jedro –save -devInstall Kotni posmehi:
npm i angular-mocks –save -devInstaliraj brskalnik Karma Chrome:
npm i karma-chrome-lansirnik –save-dev - Ustvarite dve mapi, imenovani kot aplikacija in preizkusite v mapi za preskušanje enote.
- Ustvari karma.config.js. V terminalu dajte spodaj ukaz:
karma init
Zastavila vam bo niz vprašanj. Izberite spodnje odgovore zanj.
-> Izberite okvir za testiranje kot Jasmine.
-> Izberite Chrome kot brskalnik.
-> Določite pot za datoteke js in spec (app / * js in testi / *. Spec.js)
-> Po še nekaj vprašanjih bo opravljeno.
-> Odprite karma.config.js datoteke in pot in vtičnike, kot je prikazano spodaj. Spodaj je datoteka 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
))
)
Mapa, strukturirana po teh korakih, mora biti kot spodaj:
Primer z izvajanjem
Testiranje filtra
Filtri so metode, ki spreminjajo podatke v obliko, ki je berljiva od ljudi. V tem modulu bomo ustvarili filter in napisali preizkuse enot za ta filter ter preverili, ali deluje, kot je bilo pričakovano.
Koraki:
Ustvari datoteko z imenom filter.js v mapi z aplikacijami.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Zdaj napišimo enote testnih primerov, da preverimo, ali filter deluje, kot je bilo pričakovano ali ne.
Jasmin okvirne metode
- Opišite (): Opredeljuje testno skupino - skupino povezanih testov.
- It (): Določi specifikacijo ali test.
- Pričakujte (): Kot parameter vzame dejansko vrednost in je verižno povezan s funkcijo ujemanja.
- Funkcija ujemanja: Vzame pričakovano vrednost kot parametre. Če je pričakovanje resnično ali napačno, je odgovorno, da poroča Jasmine.
Primer:
toBe ('vrednost'), toContain ('vrednost'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Ustvari datoteko z imenom filter.spec.js v mapi s preizkusi.
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
));
));
));
Če želite zagnati test, dajte spodaj ukaz v terminalu mape za testiranje enote.
Karma začetek
ali lahko nastavite karma start v preskusnem skriptu package.json in spodaj podate ukaz.
npm test
To bo odprlo brskalnik Chrome.
Izhod v terminalu:
Testiranje krmilnika in servisa
AngularJS drži logiko ločeno od pogleda, zato je krmilnike in storitve enostavno preizkusiti.
Koraki:
1. Ustvarite datoteko z imenom controller.js v mapi z aplikacijami.
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. Ustvarite datoteko z imenom controller.spec.js v mapi s preskusi.
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);
));
));
Izhod v terminalu:
Sklep
Programe AngularJS sestavljajo moduli. Na ravni aplikacije so to moduli AngularJS. Na ravni modula so to storitve, tovarne, sestavni deli, direktive in filtri. Vsak od njih lahko komunicira med seboj prek svojega zunanjega vmesnika. Pisanje preizkusnih primerov za aplikacijo AngularJS pospeši postopek odpravljanja napak in razvoj.
Priporočeni članki
To je priročnik za testiranje enote AngularJS. Tukaj razpravljamo o uvodu in osnove testiranja enot, skupaj z orodji za testiranje AngularJS in primerom z izvajanjem. Če želite izvedeti več, si oglejte tudi naslednje članke -
- Poklic v AngularJS
- ReactJs vs AngularJs
- Kotna aplikacija JS
- Kariera v razvoju