Introduksjon til AngularJS Unit Testing
Ved hjelp av AngularJS er du i stand til å bygge fantastiske brukergrensesnitt, men når kompleksiteten i prosjektet øker, blir enhetstesting en viktig del. For å forbedre kodekvaliteten er testing veldig viktig. I enhetstesting tester vi en komponentfunksjonalitet isolert, uten noen eksterne ressurser som f.eks. DB, filer osv. Enhetstester er enkle å skrive og raskere i utførelse. I enhetstesting tester vi ikke funksjonaliteten til en app, derav lav tillit. AngularJS består av forskjellige byggesteiner som tjenester, komponenter, direktiver, etc. For hver av dem må vi skrive separate testsaker.
Grunnleggende om enhetstesting
- Vi må følge ren kodingspraksis.
- Bruk de samme prinsippene som funksjonskoden.
- Testtilfeller er en liten funksjon / metode på 10 linjer eller mindre.
- Bruk en riktig navnekonvensjon.
- De har bare ett ansvar, dvs. test bare en ting.
AngularJS Testing Tools
1) Jasmine
Utviklingsrammer for testing av javascript-kode. Den gir funksjoner som hjelper til med å strukturere testtilfeller. Når prosjektene blir komplekse og testene vokser, er det viktig å holde dem godt strukturert og dokumentert, og Jasmine er med på å oppnå dette. For å bruke Jasmine med Karma, bruk karma-jasmine testløperen.
2) Karma
En testløper for å skrive og kjøre enhetstester mens du utvikler AngularJS-applikasjonen. Det øker utviklernes produktivitet. Den vil gyte en webserver som laster inn programkoden og utfører testsakene.
Det er et NodeJS-program installert gjennom npm / garn. Det kan konfigureres til å kjøre mot forskjellige nettlesere for å sikre at applikasjonen fungerer på alle tilgjengelige nettlesere.
3) Angular-Mocks
AngularJS leverer ngMock-modulen, som gir oss spottprøver. De brukes til å injisere og spotte AngularJS-tjenester i enhetstester.
Miljøoppsett
- Installer NodeJS på systemet ditt. (Https://nodejs.org/en/download/).
- Installer eventuelle IDE (som VS-kode, parenteser osv.).
- Lag en tom mappe ($ mkdir-enhetstesting) i katalogen.
- Åpne mappen for enhetstesting i IDE-en. Åpne deretter terminal (ledetekst) i enhetstestmappen.
- Følg kommandoene nedenfor en etter en i terminalen:
Opprett package.json:
npm initInstall Angular:
npm i vinkel – lagre Installer Karma:
npm i -g karma – lagre -DevInstall Jasmine:
npm i karma-jasmine jasmine-core –save -devInstall Angular mocks:
npm i angular-mocks –Save -dev Installer Karma Chrome nettleser:
npm i karma-chrome-launcher – lagre-dev - Lag to mapper som er navngitt som app og tester i enhetstestmappen.
- Lag karma.config.js. I terminalen gi kommando nedenfor:
karma init
Den vil stille deg et sett med spørsmål. Velg svarene nedenfor for det.
-> Velg testramme som Jasmine.
-> Velg Chrome som nettleser.
-> Spesifiser banen for js- og spesifikasjonsfiler (app / * js and tests / *. Spec.js)
-> Etter noen spørsmål til, blir det gjort.
-> Åpne karma.config.js filer og sti og plugins som vist nedenfor. Nedenfor er filen 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
))
)
Mappen strukturert etter disse trinnene skal være som nedenfor:
Eksempel med implementering
Testing av et filter
Filtre er metoder som endrer data til et menneskelig lesbart format. I denne modulen vil vi lage et filter og skrive enhetstester for det filteret og sjekke om det fungerer som forventet.
trinn:
Lag en fil som heter filter.js i appmappen.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
La oss nå skrive enhetstesttilfellene for å sjekke om filteret fungerer som forventet eller ikke.
Jasmine Framework Methods
- Beskriv (): Den definerer en testsuite - en gruppe relaterte tester.
- It (): Definerer en spesifikasjon eller test.
- Forvent (): Den tar en faktisk verdi som en parameter, og den er lenket med en matcher-funksjon.
- Matcher-funksjon: Tar forventet verdi som parametere. Det er ansvarlig for rapportering til Jasmine hvis forventningen er sann eller usann.
Eksempel:
toBe ('verdi'), toContain ('verdi'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Lag en fil som heter filter.spec.js i testmappen.
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
));
));
));
For å kjøre testen, gi kommandoen nedenfor i mappen terminal for enhetstesting.
Karma-start
eller du kan stille inn “karma start” i package.json test script og gi kommandoen nedenfor.
npm test
Dette åpner Chrome-nettleseren.
Utgang i terminal:
Testing av en kontroller og service
AngularJS holder logikken adskilt fra visningslaget, dette gjør kontrollere og tjenester enkle å teste.
trinn:
1. Lag en fil som heter controller.js i appmappen.
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. Lag en fil som heter controller.spec.js i testmappen.
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);
));
));
Utgang i terminal:
Konklusjon
AngularJS-applikasjoner er sammensatt av moduler. På applikasjonsnivå er dette AngularJS-moduler. På modulnivå er dette tjenester, fabrikker, komponenter, direktiver og filtre. Hver av dem er i stand til å kommunisere med hverandre gjennom sitt eksterne grensesnitt. Skriveenhetstests for AngularJS-applikasjonen din fremskynder feilsøkings- og utviklingsprosessen.
Anbefalte artikler
Dette er en guide til AngularJS-enhetstesting. Her diskuterer vi introduksjon og grunnleggende om enhetstesting sammen med AngularJS testverktøy og eksempel med implementering. Du kan også se på følgende artikler for å lære mer -
- Karriere i AngularJS
- ReactJs vs AngularJs
- Angular JS-applikasjon
- Karriere i DevOps