AngularJS Unit Testing: Karma Jasmine Tutorial

Innehållsförteckning:

Anonim

En av de mest lysande funktionerna i Angular.JS är testaspekten. När utvecklarna på Google utvecklade AngularJS höll de test i åtanke och såg till att hela AngularJS-ramverket var testbart.

I AngularJS utförs testning normalt med hjälp av Karma (framework). Angular JS-testning kan utföras utan Karma, men Karma-ramverket har en så fantastisk funktionalitet för att testa AngularJS-kod, att det är vettigt att använda detta ramverk.

  • I AngularJS kan vi utföra enhetstestning separat för styrenheter och direktiv.
  • Vi kan också utföra slutet av slutet test av AngularJS, som testas ur ett användarperspektiv.

I den här handledningen lär du dig-

  • Introduktion och installation av Karma-ramverk
    • Installation av Karma
    • Konfiguration av Karma-ramverket
  • Testa AngularJS-kontroller
  • Testa AngularJS-direktiv
  • End to End Testing AngularJS JS-applikationer

Introduktion och installation av Karma-ramverk

Karma är ett testautomationsverktyg som skapats av Angular JS-teamet på Google. Det första steget för att använda Karma är att installera Karma. Karma installeras via npm (som är en pakethanterare som används för enkel installation av moduler på en lokal maskin).

Installation av Karma

Installationen av Karma via npm görs i en tvåstegsprocess.

Steg 1) Utför raden nedan från kommandoraden

npm install karma karma-chrome-launcher karma-jasmine

Vart i

  1. npm är kommandoradsverktyget för nodpakethanteraren som används för att installera anpassade moduler på vilken maskin som helst.
  2. Installationsparametern instruerar kommandoradsverktyget npm att installation krävs.
  3. Det finns 3 bibliotek som anges i kommandoraden som krävs för att arbeta med karma
    • karma är kärnbiblioteket som kommer att användas för teständamål.
    • karma-chrome-launcher är ett separat bibliotek som gör det möjligt att känna igen karma-kommandon av Chrome-webbläsaren.
    • karma-jasmin - Detta installerar jasmin som är en beroende ram för Karma.

Steg 2) Nästa steg är att installera karma-kommandoradsverktyget. Detta krävs för att utföra karma-radkommandon. Karma line-verktyget kommer att användas för att initiera karma-miljön för testning.

För att installera kommandoradsverktyget kör du raden nedan från kommandoraden

npm install karma-cli

vart i,

  1. karma-cli används för att installera kommandoradsgränssnittet för karma som kommer att användas för att skriva karma-kommandona i kommandoradsgränssnittet.

Konfiguration av Karma-ramverket

Nästa steg är att konfigurera karma som kan göras via kommandot

"karma -init"

När ovanstående steg har utförts skapar karma en karma.conf.js-fil. Filen ser förmodligen ut som utdraget som visas nedan

files: ['Your application Name'/AngularJS/AngularJS.js','Your application Name'/AngularJS-mocks/AngularJS-mocks.js','lib/app.js','tests/*.js']

Ovanstående konfigurationsfiler berättar följande för karma runtime-motorn

  1. 'Ditt ansökningsnamn' - Detta kommer att ersättas med namnet på din ansökan.
  2. ' Your application Name' / AngularJS / AngularJS.js ' - Detta berättar för karma att din applikation beror på kärnmodulerna i AngularJS
  3. 'Ditt applikationsnamn' / AngularJS-mocks / AngularJS-mocks.js ' - Detta berättar för karma att använda enhetstestfunktionaliteten för AngularJS från Angular.JS-mocks.js-filen.
  4. Alla huvudapplikations- eller affärslogikfiler finns i lib-mappen i din applikation.
  5. Testmappen innehåller alla enhetstester

För att kontrollera om karma fungerar, skapa en fil som heter Sample.js, lägg i koden nedan och placera den i testkatalogen.

describe('Sample test', function() {it('Condition is true', function() {expect('AngularJS').toBe('AngularJS');});});

Ovanstående kod har följande aspekter

  1. Beskrivningsfunktionen används för att ge en beskrivning av testet. I vårt fall ger vi beskrivningen "Provtest" till vårt test.
  2. Funktionen 'it' används för att ge ett namn till testet. I vårt fall ger vi namnet på vårt test som 'Villkor är sant'. Testets namn måste vara meningsfullt.
  3. Kombinationen av "förvänta" och "toBe" -nyckelordet anger vad som är det förväntade och faktiska värdet av testresultatet. Om det verkliga och förväntade värdet är detsamma, kommer testet att klara annars kommer det att misslyckas.

När du kör följande rad vid kommandotolken körs ovanstående testfil

KARMA start

Nedanstående utdata hämtas från IDE Webstorm där ovanstående steg utfördes.

  1. Produktionen kommer i Karma explorer inom Webstorm. Det här fönstret visar utförandet av alla tester som definieras i karma-ramverket.
  2. Här kan du se att beskrivningen av det utförda testet visas som är "Provtest".
  3. Därefter kan du se att själva testet som har namnet "Condition is true" körs.
  4. Observera att eftersom alla tester har den gröna "Ok" -ikonen bredvid den som symboliserar att alla tester klarade.

Testa AngularJS-kontroller

Karma-testramverket har också funktionaliteten för att testa styrenheter från början till slut. Detta inkluderar testning av $ scope-objektet som används i Controllers.

Låt oss titta på ett exempel på hur vi kan uppnå detta.

I vårt exempel,

Vi skulle först behöva definiera en styrenhet. Denna styrenhet skulle utföra nedanstående steg

  1. Skapa en ID-variabel och tilldela den värdet 5.
  2. Tilldela ID-variabeln till $ scope-objektet.

Vårt test kommer att testa förekomsten av denna styrenhet och även testa om ID-variabeln för $ scope-objektet är inställt på 5.

Först måste vi se till att följande förutsättning är på plats

    1. Installera Angular.JS-mocks-biblioteket via npm. Detta kan göras genom att köra nedanstående rad i kommandotolken
npm install Angular JS-mocks
  1. Nästa är att modifiera karma.conf.js-filen för att säkerställa att rätt filer ingår för testet. Segmentet nedan visar bara fildelarna i karma.conf.js som måste ändras 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parametern 'filer' berättar i grund och botten för Karma alla filer som krävs för att köra testerna.
  • Filen AngularJS.js och AngularJS-mocks.js krävs för att köra AngularJS-enhetstester
  • Index.js-filen kommer att innehålla vår kod för styrenheten
  • Testmappen kommer att innehålla alla våra AngularJS-tester

Nedan finns vår Angular.JS-kod som kommer att lagras som en fil Index.js i testmappen i vår applikation.

Nedanstående kod gör bara följande saker

  1. Skapa en vinkeljS-modul som heter sampleApp
  2. Skapa en controller som heter AngularJSController
  3. Skapa en variabel som heter ID, ge den värdet 5 och tilldela den till $ scope-objektet
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

När koden ovan har körts framgångsrikt är nästa steg att skapa ett testfall för att säkerställa att koden har skrivits och körts ordentligt.

Koden för vårt test kommer att visas som nedan.

Koden kommer att finnas i en separat fil som heter ControllerTest.js, som kommer att placeras i testmappen. Nedanstående kod gör bara följande viktiga saker

  1. beforeEach-funktion - Denna funktion används för att ladda vår AngularJS.JS-modul som heter 'sampleApp' före testkörningen. Observera att detta är namnet på modulen i en index.js-fil.

  2. $ Controller-objektet skapas som ett mockup-objekt för controller '' Angular JSController '' som definieras i vår index.js-fil. I varje typ av enhetstest representerar ett mock-objekt ett dummy-objekt som faktiskt kommer att användas för testningen. Detta mock-objekt simulerar faktiskt beteendet hos vår controller.

  3. beforeEach (injicera (funktion (_ $ controller_) - Detta används för att injicera det mocka föremålet i vårt test så att det beter sig som den faktiska styrenheten.

  4. var $ scope = {}; Detta är ett mock-objekt som skapas för $ scope-objektet.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Här kontrollerar vi om det finns en styrenhet med namnet 'Angular.JSController'. Här tilldelar vi också alla variabler från vårt $ scope-objekt i vår controller i Index.js-filen till $ scope-objektet i vår testfil

  6. Slutligen jämför vi $ scope.ID med 5

describe('AngularJSController', function() {beforeEach(module('sampleApp'));var $controller;beforeEach(inject(function(_$controller_){$controller = _$controller_;}));describe('$scope.ID', function() {it('Check the scope object', function() {var $scope = {};var controller = $controller('AngularJSController', { $scope: $scope });expect($scope.ID).toEqual(5);});});});

Ovanstående test körs i karma-webbläsaren och ger samma passresultat som visades i föregående ämne.

Testa AngularJS-direktiv

Ramverket för karma-test har också funktionaliteten för att testa anpassade direktiv. Detta inkluderar mallURL som används i anpassade direktiv.

Låt oss titta på ett exempel på hur vi kan uppnå detta.

I vårt exempel kommer vi först att definiera ett anpassat direktiv som gör följande saker

  1. Skapa en AngularJS-modul som heter sampleApp
  2. Skapa ett anpassat direktiv med namnet - Guru99
  3. Skapa en funktion som returnerar en mall med en rubriktagg som visar texten "Detta är AngularJS-testning."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

När koden ovan har körts framgångsrikt skulle nästa steg vara att skapa ett testfall för att säkerställa att koden har skrivits och körts ordentligt. Koden för vårt test kommer att visas som nedan

Koden kommer att finnas i en separat fil som heter DirectiveTest.js, som kommer att placeras i testmappen. Nedanstående kod gör bara följande viktiga saker

  1. beforeEach-funktion - Denna funktion används för att ladda vår Angular JS-modul som kallas 'sampleApp' före testkörningen.

  2. Tjänsten $ kompilera används för att sammanställa direktivet. Denna tjänst är obligatorisk och måste deklareras så att Angular.JS kan använda den för att sammanställa vårt anpassade direktiv.

  3. $ Rootscope är det primära omfånget för alla AngularJS.JS-applikationer. Vi har sett $ scope-objektet för styrenheten i tidigare kapitel. Tja, $ scope-objektet är underobjektet för $ rootscope-objektet. Anledningen till att detta förklaras här är att vi gör en ändring av en faktisk HTML-tagg i DOM via vårt anpassade direktiv. Därför måste vi använda $ rootscope-tjänsten som faktiskt lyssnar eller vet när någon förändring sker från ett HTML-dokument.

  4. var element = $ compile (" ") - Detta används för att kontrollera om vårt direktiv injiceras som det ska. Namnet på vårt anpassade direktiv är Guru99, och vi vet från kapitlet om anpassade direktiv att när direktivet injiceras i vår HTML kommer det att injiceras som ' '. Därför används detta uttalande för att göra den kontrollen.

  5. förvänta (element.html ()). toContain ("Detta är AngularJS-testning") - Detta används för att instruera förväntningsfunktionen att den ska hitta elementet (i vårt fall div-taggen) för att innehålla den inre HTML-texten för "Detta är AngularJS Testing ".

describe('Unit testing directives', function() {var $compile,$rootScope;beforeEach(module('sampleApp'));beforeEach(inject(function(_$compile_, _$rootScope_){$compile = _$compile_;$rootScope = _$rootScope_;}));it('Check the directive', function() {// Compile a piece of HTML containing the directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

Ovanstående test körs i karma-webbläsaren och ger samma passresultat som visades i föregående ämne.

End to End Testing AngularJS JS-applikationer

Karma-testramverket tillsammans med ett ramverk som heter Protractor har funktionaliteten att testa en webbapplikation från början till slut.

Så det är inte bara testning av direktiv och styrenheter, utan också testning av allt annat som kan visas på en HTML-sida.

Låt oss titta på ett exempel på hur vi kan uppnå detta.

I vårt exempel nedan kommer vi att ha en AngularJS-applikation som skapar en datatabell med hjälp av ng-repeat-direktivet.

  1. Vi skapar först en variabel som kallas "tutorial" och tilldelar den några nyckel-värdepar i ett steg. Varje nyckel-värdepar kommer att användas som data när tabellen visas. Självstudievariabeln tilldelas sedan scope-objektet så att det kan nås från vår syn.
  2. För varje rad med data i tabellen använder vi ng-repeat-direktivet. Detta direktiv går igenom varje nyckel-värdepar i tutorial-omfattningsobjektet med hjälp av variabeln ptutor.
  3. Slutligen använder vi -taggen tillsammans med nyckelvärdeparen (ptutor.Name och ptutor.Description) för att visa tabelldata.


{{ ptutor.Name }}{{ ptutor.Description }}