Introduktion til AngularJS Unit Testing

Ved hjælp af AngularJS er du i stand til at opbygge fantastiske brugergrænseflader, men når kompleksiteten af ​​dit projekt øges, bliver enhedstest en vigtig del. For at forbedre din kodekvalitet er test meget vigtigt. I enhedstesting tester vi en komponentfunktionalitet isoleret uden eksterne ressourcer, eksempelvis DB, filer osv. Enhedstester er lette at skrive og hurtigere i udførelse. Ved enhedsafprøvning tester vi ikke en apps funktionalitet, og derved lav tillid. AngularJS består af forskellige byggeklodser som tjenester, komponenter, direktiver osv. For hver af dem er vi nødt til at skrive separate testsager.

Grundlæggende om enhedstestning

  1. Vi er nødt til at følge ren kodningspraksis.
  2. Anvend de samme principper som den funktionelle kode.
  3. Testtilfælde er en lille funktion / metode på 10 linjer eller mindre.
  4. Brug en ordentlig navnekonvention.
  5. De har kun et enkelt ansvar, dvs. test kun en ting.

AngularJS Testing Tools

1) Jasmine

Udviklingsrammer til test af javascript-kode. Det giver funktioner, der hjælper med at strukturere testtilfælde. Efterhånden som projekterne bliver komplekse og testene vokser, er det vigtigt at holde dem velstruktureret og dokumenteret, og Jasmine hjælper med at opnå dette. Hvis du vil bruge Jasmine sammen med Karma, skal du bruge karma-jasmine-testløberen.

2) Karma

En testløber til at skrive og køre enhedsprøver, mens du udvikler AngularJS-applikation. Det øger udviklernes produktivitet. Det vil spawn en webserver, der indlæser applikationskoden og udfører testsagerne.
Det er et NodeJS-program installeret via npm / garn. Det kan konfigureres til at køre mod forskellige browsere for at sikre, at applikationen fungerer på alle tilgængelige browsere.

3) Vinkelmåler

AngularJS leverer ngMock-modulet, som giver os mock-tests. De bruges til at injicere og spotte AngularJS-tjenester i enhedstest.

Miljøopsætning

  1. Installer NodeJS på dit system. (Https://nodejs.org/en/download/).
  2. Installer en hvilken som helst IDE (som VS-kode, parenteser osv.).
  3. Opret en tom mappe ($ mkdir-enhedstest) i dit bibliotek.
  4. Åbn enhedstestmappen i din IDE. Åbn derefter terminal (kommandoprompt) i din enhedstestmappe.
  5. Følg nedenstående kommandoer en efter en i terminalen:
    Opret package.json:
    npm initInstall Angular:
    npm i kantet - Gem Installer Karma:
    npm i -g karma – gemme -udinstallere Jasmine:
    npm i karma-jasmine jasmin-kerne-gemme -udinstallere vinkelformede mocks:
    npm i angular-mocks –Save -dev Installer Karma Chrome browser:
    npm i karma-chrome-launcher – gemme-dev
  6. Opret to mapper navngivet som app og test i enhedstestmappen.
  7. Opret karma.config.js. Giv terminalen kommando i terminalen:
    karma init
    Det vil stille dig et sæt spørgsmål. Vælg nedenstående svar for det.
    -> Vælg testrammen som Jasmine.
    -> Vælg Chrome som browser.
    -> Angiv stien for dine js og spec-filer (app / * js og tests / *. Spec.js)
    -> Efter et par spørgsmål til, bliver det gjort.
    -> Åbn 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 struktureret efter disse trin skal være som nedenfor:

Eksempel med implementering

Test af et filter

Filtre er metoder, der ændrer data til et menneskeligt læsbart format. I dette modul opretter vi et filter og skriver enhedstest for dette filter og kontrollerer, om det fungerer som forventet.
Steps:

Opret en fil med navnet filter.js i appmappen.

filter.js

angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))

Lad os nu skrive enhedstesttilfældene for at kontrollere, om filteret fungerer som forventet eller ej.

Jasmine Framework Methods

  • Beskriv (): Den definerer en testsuite - en gruppe relaterede tests.
  • It (): Definerer en specifikation eller test.
  • Forvent (): Det tager en faktisk værdi som en parameter, og den er knyttet til en matcher-funktion.
  • Matcher-funktion: Tager den forventede værdi som parametre. Det er ansvarligt for rapportering til Jasmine, hvis forventningen er sand eller falsk.

Eksempel:

toBe ('værdi'), toContain ('værdi'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().

Opret en fil med navnet 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 at køre testen skal du give kommando nedenfor i enhedstestmappen terminal.
Karma start
eller du kan indstille “karma start” i package.json test script og give kommandoen nedenfor.
npm test

Dette åbner Chrome-browseren.

Output i terminal:

Test af en controller og service

AngularJS holder logikken adskilt fra visningslaget, dette gør controllere og tjenester let at teste.
Steps:
1. Opret en fil med navnet 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. Opret en fil med navnet 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);
));
));

Output i terminal:

Konklusion

AngularJS-applikationer er sammensat af moduler. På applikationsniveau er dette AngularJS-moduler. På modulniveau er dette tjenester, fabrikker, komponenter, direktiver og filtre. Hver af dem er i stand til at kommunikere med hinanden gennem sin eksterne interface. Skrivesagets testtilfælde til din AngularJS-applikation fremskynder din fejlfinding og udviklingsproces.

Anbefalede artikler

Dette er en guide til AngularJS Unit Testing. Her diskuterer vi introduktion og grundlæggende elementer i enhedstestning sammen med AngularJS-testværktøjer og eksempel med implementering. Du kan også se på de følgende artikler for at lære mere -

  1. Karriere i AngularJS
  2. ReactJs vs AngularJs
  3. Vinkelformet JS-program
  4. Karriere i DevOps

Kategori: