Introduktion till AngularJS-enhetstestning

Med hjälp av AngularJS kan du bygga fantastiska användargränssnitt, men när komplexiteten i ditt projekt ökar blir enhetstest en viktig del. För att förbättra din kodkvalitet är testning mycket viktigt. Vid enhetstest testar vi en komponentfunktion isolerat utan externa resurser exempel DB, filer etc. Enhetstester är enkla att skriva och snabbare i körning. Vid enhetstest testar vi inte funktionaliteten i en app, och därmed lågt förtroende. AngularJS består av olika byggstenar som tjänster, komponenter, direktiv etc. För var och en av dem måste vi skriva separata testfall.

Grunderna i enhetstestning

  1. Vi måste följa rena kodningssätt.
  2. Tillämpa samma principer som funktionskoden.
  3. Testfall är en liten funktion / metod på 10 rader eller mindre.
  4. Använd en korrekt namnkonvention.
  5. De har bara ett enda ansvar, dvs. testa bara en sak.

AngularJS Testing Tools

1) Jasmine

Utvecklingsram för testning av JavaScript-kod. Det tillhandahåller funktioner som hjälper till att strukturera testfall. När projekten blir komplexa och testerna växer är det viktigt att hålla dem välstrukturerade och dokumenterade och Jasmine hjälper till att uppnå detta. För att använda Jasmine med Karma, använd karma-jasmine testrunner.

2) Karma

En testlöpare för att skriva och köra enhetstester medan du utvecklar AngularJS-applikationen. Det ökar utvecklarens produktivitet. Det kommer att spawn en webbserver som laddar applikationskoden och kör testfallen.
Det är en NodeJS-applikation installerad via npm / garn. Det kan konfigureras för att köra mot olika webbläsare för att säkerställa att applikationen fungerar på alla tillgängliga webbläsare.

3) Vinkelflickor

AngularJS tillhandahåller ngMock-modulen, som ger oss håliga tester. De används för att injicera och håna AngularJS-tjänster i enhetstester.

Miljöinställning

  1. Installera NodeJS på ditt system. (Https://nodejs.org/en/download/).
  2. Installera alla IDE (som VS-kod, parentes, etc.).
  3. Skapa en tom mapp ($ mkdir-enhetstestning) i din katalog.
  4. Öppna enhetstestmappen i din IDE. Öppna sedan terminalen (kommandotolken) i din enhetstestmapp.
  5. Följ kommandona nedan en efter en i terminalen:
    Skapa package.json:
    npm initInstall Angular:
    npm i vinkel – sparaInstallera Karma:
    npm i -g karma – spara -avinstallera Jasmine:
    npm i karma-jasmine jasmin-kärna-spara -avinstallera vinkelflott:
    npm i angular-mocks –Save -devInstallera webbläsaren Karma Chrome:
    npm i karma-chrome-launcher – spara-dev
  6. Skapa två mappar namngivna som app och tester i enhetstestmappen.
  7. Skapa karma.config.js. I terminalen ge kommando nedan:
    karma init
    Det ställer dig en uppsättning frågor. Välj nedanstående svar för det.
    -> Välj testramen som Jasmine.
    -> Välj Chrome som webbläsare.
    -> Ange sökvägen för dina js och specifikfiler (app / * js och tests / *. Spec.js)
    -> Efter några fler frågor kommer det att göras.
    -> Öppna karma.config.js-filer och sökvägar och plugins som visas nedan. Nedan är 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 strukturerad efter dessa steg ska vara som nedan:

Exempel med implementering

Testa ett filter

Filter är metoder som ändrar data till ett mänskligt läsbart format. I den här modulen skapar vi ett filter och skriver enhetstester för det filtret och kontrollerar om det fungerar som förväntat.
Steg:

Skapa en fil med namnet filter.js i appmappen.

filter.js

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

Låt oss nu skriva enhetens testfall för att kontrollera om filtret fungerar som förväntat eller inte.

Jasmine Framework Methods

  • Beskriv (): Den definierar en testsvit - en grupp relaterade test.
  • It (): Definierar en specifikation eller ett test.
  • Expect (): Det tar ett verkligt värde som en parameter och det är kedjat med en matchningsfunktion.
  • Matcher-funktion: Tar det förväntade värdet som parametrar. Det ansvarar för att rapportera till Jasmine om förväntningarna är sanna eller falska.

Exempel:

toBe ('värde'), toContain ('värde'), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().

Skapa en fil med namnet 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
));
));
));

För att köra testet, ge kommando nedan i enhetstestmappens terminal.
Karma start
eller så kan du ställa in ”karma start” i package.json testskript och ge kommandot nedan.
npm test

Detta öppnar Chrome-webbläsaren.

Utgång i terminal:

Testa en controller och service

AngularJS håller logiken åtskild från visningsskiktet, vilket gör kontroller och tjänster lätta att testa.
Steg:
1. Skapa en fil med namnet 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. Skapa en fil med namnet 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);
));
));

Utgång i terminal:

Slutsats

AngularJS-applikationer består av moduler. På applikationsnivå är det dessa AngularJS-moduler. På modulnivå är det tjänster, fabriker, komponenter, direktiv och filter. Var och en av dem kan kommunicera med varandra genom sitt externa gränssnitt. Skrivfallsenheter för din AngularJS-applikation påskyndar din felsöknings- och utvecklingsprocess.

Rekommenderade artiklar

Detta är en guide till AngularJS-enhetstestning. Här diskuterar vi introduktionen och grunderna för enhetstestning tillsammans med AngularJS-testverktygen och exemplet med implementering. Du kan också titta på följande artiklar för att lära dig mer -

  1. Karriär i AngularJS
  2. ReactJs vs AngularJs
  3. Angular JS-applikation
  4. Karriär i DevOps

Kategori: