Sissejuhatus AngularJS üksuse testimisse
Kasutades AngularJS-i, saate luua hämmastavaid kasutajaliideseid, kuid kui teie projekti keerukus suureneb, muutub oluliseks osaks üksuste testimine. Koodi kvaliteedi parandamiseks on testimine väga oluline. Ühiktestides testime komponendi funktsionaalsust eraldi, ilma väliste ressurssideta, näiteks DB, faile jne. Ühikteste on lihtne kirjutada ja kiiremini teostada. Ühiktestides ei testi me rakenduse funktsionaalsust, seega on madal usaldus. AngularJS koosneb mitmesugustest ehitusplokkidest, näiteks teenustest, komponentidest, direktiividest jne. Nende jaoks peame iga eraldi juhtumi kirjutama.
Ühiku testimise alused
- Peame järgima puhta kodeerimise tavasid.
- Kasutage samu põhimõtteid nagu funktsionaalses koodis.
- Testijuhtumid on väike funktsioon / meetod, kuni 10 rida.
- Kasutage õige nimetamise tava.
- Neil on ainult üks vastutus, st testida ainult ühte asja.
AngularJS testimisriistad
1) Jasmiin
Javascripti koodi testimise arendusraamistik. See pakub funktsioone, mis aitavad testijuhtumeid struktureerida. Kuna projektid muutuvad keerukateks ja testide arv kasvab, on oluline hoida neid hästi struktureeritud ja dokumenteeritud ning Jasmine aitab seda saavutada. Jasmiini kasutamiseks koos Karmaga kasutage karma-jasmiini proovijooksjat.
2) Karma
Testisõit üksusetestide kirjutamiseks ja läbiviimiseks AngularJS rakenduse arendamise ajal. See suurendab arendajate tootlikkust. See tekitab veebiserveri, mis laadib rakenduskoodi ja viib läbi testjuhtumid.
See on NopmJS-i rakendus, mis on installitud läbi npm / lõnga. Selle saab konfigureerida töötama erinevate brauseritega, tagamaks, et rakendus töötab kõigis saadaval olevates brauserites.
3) nurgelised-pilgud
AngularJS pakub moodulit ngMock, mis annab meile pilootteste. Neid kasutatakse AngularJS-i teenuste süstimiseks ja mõnitamiseks ühiskatsetes.
Keskkonna seadistamine
- Installige oma süsteemi NodeJS. (https://nodejs.org/en/download/).
- Installige ükskõik milline IDE (nt VS-kood, sulgud jne).
- Looge oma kataloogist tühi kaust ($ mkdir unit testing).
- Avage IDE-s üksuse testimise kaust. Seejärel avage ühiku testimiskataloogis terminal (käsuviip).
- Järgige terminalis ükshaaval allpool toodud käske:
Loo pakett.json:
npm initInstall nurk:
npm i nurgeline - salvestage Karma installimine:
npm i -g karma - salvestatud -devInstallige Jasmine:
npm i karma-jasmiin jasmiinisüdamik - salvestatud -devInstalli nurgelised pilgud:
npm i nurgeline-pilkav - salvesta -devInstalli Karma Chrome'i brauser:
npm i karma-kroom-käivitaja –säästlik-dev - Looge üksustestide kausta kaks kausta, mida nimetatakse rakenduseks ja testideks.
- Looge karma.config.js. Terminalis anna allpool käsk:
karma init
See esitab teile rea küsimusi. Valige selle jaoks allpool olevad vastused.
-> Valige testimisraamistik Jasmine.
-> Valige brauseriks Chrome.
-> Täpsustage oma js- ja spec-failide asukoht (app / * js and tests / *. Spec.js)
-> Pärast veel mõnda küsimust saab see tehtud.
-> Avage karma.config.js failid ja tee ning pistikprogrammid, nagu allpool näidatud. Allpool on fail 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
))
)
Pärast neid samme üles ehitatud kaust peaks olema järgmine:
Näide koos rakendamisega
Filtri testimine
Filtrid on meetodid, mis muudavad andmed inimesele loetavasse vormingusse. Selles moodulis loome filtri ja kirjutame selle filtri jaoks ühiktestid ja kontrollime, kas see töötab ootuspäraselt.
Sammud:
Looge rakenduse kausta fail nimega filter.js.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Kirjutame nüüd ühiktestide juhtumid, et kontrollida, kas filter töötab ootuspäraselt või mitte.
Jasmiini raamistikumeetodid
- Kirjeldage (): see määratleb testikomplekti - seotud testide rühma.
- See (): määratleb spetsifikatsiooni või testi.
- Ootama (): See võtab parameetrina tegeliku väärtuse ja on aheldatud sobitusfunktsiooniga.
- Sobitaja funktsioon: võtab eeldatava väärtuse parameetriteks. See on vastutav Jasmine'ile teatamise eest, kui see eeldus on tõene või vale.
Näide:
toBe ('väärtus'), toContain ('väärtus'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Looge testide kausta fail nimega filter.spec.js.
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
));
));
));
Testi käivitamiseks anna allpool käsk ühiku testimise kausta terminalis.
Karma algus
või võite määrata paketijs.jsoni testiskriptis “karma algus” ja anda käskluse allpool.
npm test
See avab kroomibrauseri.
Väljund terminalis:
Kontrolleri ja teenuse testimine
AngularJS hoiab loogikat vaatekihist eraldi, tänu sellele on kontrollereid ja teenuseid lihtne testida.
Sammud:
1. Looge rakenduse kausta fail nimega controller.js.
kontroller.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. Looge testide kausta fail nimega controller.spec.js.
kontroller.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);
));
));
Väljund terminalis:
Järeldus
AngularJS rakendused koosnevad moodulitest. Rakenduse tasemel on need AngularJS moodulid. Mooduli tasemel on need teenused, tehased, komponendid, direktiivid ja filtrid. Igaüks neist suudab oma välise liidese kaudu üksteisega suhelda. AngularJS-i rakenduse kirjutamisüksuse testjuhtumite kiirendamine on silumis- ja arendusprotsess.
Soovitatavad artiklid
See on juhend AngularJS ühiku testimiseks. Siin käsitleme üksuse testimise sissejuhatust ja aluseid koos AngularJS-i testimisriistade ja juurutamise näidisega. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -
- Karjäär nurgasJS
- ReactJs vs NurkJs
- Nurga JS rakendus
- Karjäär DevOpsis