Johdatus AngularJS-yksikkötestaukseen
AngularJS: n avulla pystyt rakentamaan uskomattomia käyttöliittymiä, mutta kun projektisi monimutkaisuus kasvaa, yksikkötestauksesta tulee tärkeä osa. Koodin laadun parantamiseksi testaus on erittäin tärkeää. Yksikkötestauksessa testataan komponenttitoiminnot erikseen ilman ulkoisia resursseja, esimerkiksi tietokantaa, tiedostoja jne. Yksikkötestejä on helppo kirjoittaa ja nopeammin suorittaa. Yksikkötestauksessa emme testaa sovelluksen toimivuutta, joten luottamus on heikko. AngularJS koostuu useista rakennuspalikoista, kuten palveluista, komponenteista, direktiiveistä jne. Jokaiselle niistä meidän on kirjoitettava erilliset testitapaukset.
Yksikkötestauksen perusteet
- Meidän on noudatettava puhdasta koodaustapaa.
- Käytä samoja periaatteita kuin toimintakoodi.
- Testitapaukset ovat pieni toiminto / menetelmä, joka on enintään 10 riviä.
- Käytä oikeaa nimeämiskäytäntöä.
- Heillä on vain yksi vastuu, ts. Testata vain yksi asia.
AngularJS -testityökalut
1) Jasmiini
Kehityskehys javascript-koodin testaamiseen. Se tarjoaa toimintoja, jotka auttavat testitapausten jäsentämisessä. Projektien monimutkaistuessa ja testien kasvaessa on tärkeää pitää ne hyvin rakenteellisina ja dokumentoituina, ja Jasmine auttaa saavuttamaan tämän. Jos haluat käyttää Jasminea Karman kanssa, käytä karma-jasmiinin koeajoa.
2) Karma
Testijuoksija yksikkötestausten kirjoittamiseen ja ajamiseen AngularJS-sovelluksen kehittämisen aikana. Se lisää kehittäjien tuottavuutta. Se kutistaa web-palvelimen, joka lataa sovelluskoodin ja suorittaa testitapaukset.
Se on NodeJS-sovellus, joka on asennettu npm / lanka kautta. Se voidaan määrittää toimimaan useita selaimia vastaan, jotta voidaan varmistaa, että sovellus toimii kaikissa käytettävissä olevissa selaimissa.
3) Kulma-Mocks
AngularJS tarjoaa ngMock-moduulin, joka antaa meille mock -testejä. Niitä käytetään injektoimaan ja pilkkaamaan AngularJS-palveluita yksikkötesteissä.
Ympäristön asetukset
- Asenna NodeJS järjestelmään. (Https://nodejs.org/en/download/).
- Asenna mikä tahansa IDE (kuten VS-koodi, suluissa jne.).
- Luo hakemistoon tyhjä kansio ($ mkdir unit testing).
- Avaa IDE: n yksikkötestauskansio. Avaa sitten pääte (komentokehote) yksikkötestauskansiossa.
- Seuraa terminaalissa seuraavia komentoja yksi kerrallaan:
Luo paketti.json:
npm initInstall kulma:
npm i kulmikas - tallennaAsenna Karma:
npm i -g karma - tallenna -devAsenna Jasmine:
npm i karma-jasmine jasmine-core –save -devAsenna kulmaiset pilkat:
npm i kulma-mocks –save -devAsenna Karma Chrome -selain:
npm i karma-kromi-kantoraketti - säästää-dev - Luo yksikkötestauskansioon kaksi kansiota, jonka nimi on sovellus ja testit.
- Luo karma.config.js. Anna terminaalissa komento alla:
karma init
Se esittää sinulle joukon kysymyksiä. Valitse alla olevat vastaukset siihen.
-> Valitse testikehykseksi Jasmine.
-> Valitse Chrome selaimeksi.
-> Määritä polku js- ja spec-tiedostoillesi (app / * js and tests / *. Spec.js)
-> Muutaman lisäkysymyksen jälkeen se tehdään.
-> Avaa karma.config.js-tiedostot ja polku ja laajennukset alla olevan kuvan mukaisesti. Alla on karma.config.js-tiedosto.
// 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
))
)
Näiden vaiheiden jälkeen järjestetyn kansion tulisi olla seuraavanlainen:
Esimerkki toteutuksesta
Suodattimen testaaminen
Suodattimet ovat menetelmiä, jotka muuttavat tiedot ihmisen luettavissa olevaan muotoon. Tässä moduulissa luomme suodattimen ja kirjoitamme yksikkötestejä kyseiselle suodattimelle ja tarkistamme, toimiiko se odotetusti.
Askeleet:
Luo sovelluskansiossa tiedosto nimeltä filter.js.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Nyt kirjoitetaan yksikkötestaukset tarkistaaksesi, toimiiko suodatin odotetusti vai ei.
Jasmine-kehysmenetelmät
- Kuvaile (): Se määrittelee testijoukon - ryhmän liittyviä testejä.
- Se (): Määrittää määritelmän tai testin.
- Odottaa (): Se ottaa parametrina todellisen arvon ja se on ketjutettu yhdistämistoiminnolla.
- Sovitinfunktio: Ottaa odotetun arvon parametreiksi. Se on vastuussa Jasminelle ilmoittamisesta, jos odotus on tosi tai epätosi.
Esimerkki:
toBe ('arvo'), toContain ('arvo'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Luo testi-kansioon tiedosto nimeltä 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
));
));
));
Suorita testi suorittamalla alla oleva komento yksikkötestauskansion päätelaitteessa.
Karma alkaa
tai voit asettaa “karma start” paketissa.json testikomentosarja ja antaa alla -komennon.
npm-testi
Tämä avaa kromiselaimen.
Lähtö terminaalissa:
Ohjaimen ja palvelun testaaminen
AngularJS pitää logiikan erillään näkymäkerroksesta, mikä tekee ohjaimista ja palveluista helppoja testata.
Askeleet:
1. Luo sovelluskansiossa tiedosto nimeltä controller.js.
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. Luo testi-kansioon tiedosto nimeltä controller.spec.js.
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);
));
));
Lähtö terminaalissa:
johtopäätös
AngularJS-sovellukset koostuvat moduuleista. Sovellustasolla nämä ovat AngularJS-moduuleja. Moduulitasolla nämä ovat palveluita, tehtaita, komponentteja, direktiivejä ja suodattimia. Jokainen heistä voi kommunikoida keskenään ulkoisen käyttöliittymänsä kautta. Yksikkötestitapausten kirjoittaminen AngularJS-sovelluksellesi nopeuttaa virheenkorjaus- ja kehitysprosessia.
Suositellut artikkelit
Tämä on opas AngularJS-yksikkötestaukseen. Tässä keskustellaan yksikkötestauksen johdannosta ja perusteista yhdessä AngularJS -testaustyökalujen ja esimerkin kanssa toteutuksen kanssa. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- Ura AngularJS: ssä
- ReactJs vs AngularJs
- Kulmainen JS-sovellus
- Ura DevOpsissa