AngularJS-enhetstestning med Karma och Jasmine

En av de mest briljanta funktionerna i AngularJS är Testning aspekt. När utvecklarna på Google När de utvecklade AngularJS hade de testning i åtanke och såg till att hela AngularJS-ramverket var testbart.

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

• I AngularJS kan vi uppträda Enhetstestning separat för styrenheter och direktiv.
• Vi kan också uppträda testning från början till slut av AngularJS, som testas ur ett användarperspektiv.

Introduktion och installation av Karma-ramverket

Karma är en testautomationsverktyg skapad av AngularJS-teamet på GoogleDet första steget för att använda Karma är att installera Karma. Karma installeras via npm (vilket ä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 --save-dev

Vart i,

1. npm är kommandoradsverktyget för nodens pakethanterare som används för att installera anpassade moduler på vilken maskin som helst. Det levereras med node.js.
2. Installationsparametern instruerar kommandoradsverktyget npm att installation krävs.
3. Det finns 3 bibliotek som anges på 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 att karma-kommandon kan identifieras av Chrome-webbläsaren.
   • karma-jasmin – Detta installerar jasmin som är ett beroende ramverk för karma.

Steg 2) Nästa steg är att installera kommandoradsverktyget karma. Detta krävs för att utföra karma-linjekommandon. Karmalinjeverktyget kommer att användas för att initiera karmamiljön för testning.

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

npm install -g karma-cli

• karma-cli används för att installera kommandoradsgränssnittet för karma, vilket kommer att användas för att skriva karma-kommandona i kommandoradsgränssnittet. Flaggan -g installerar det globalt så att karma-kommandot är tillgängligt från vilken mapp som helst.

Konfiguration av Karma-ramverket

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

karma init

Efter att steget ovan har utförts kommer karma att skapa en karma.conf.js-fil. Filen kommer förmodligen att se ut som utdraget som visas nedan

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

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

1. angular.js – Detta säger karma att din applikation är beroende av kärnmodulerna i AngularJS.
2. angular-mocks.js – Detta anger att karma ska använda enhetstestfunktionen för AngularJS från filen angular-mocks.js.
3. Alla huvudapplikations- eller affärslogikfiler finns i lib-mappen i din applikation.
4. Testmappen kommer att innehålla alla enhetstester.

För att kontrollera om karma fungerar, skapa en fil som heter Sample.js, lägg in 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. Beskriv-funktionen används för att ge en beskrivning av testet. I vårt fall ger vi beskrivningen "Sample test" till vårt test.
2. Funktionen 'it' används för att ge testet ett namn. I vårt fall anger vi namnet på vårt test som "villkoret är sant". Namnet på testet måste vara meningsfullt.
3. Kombinationen av nyckelorden 'förvänta' och 'toBe' anger vad som är det förväntade och faktiska värdet av testresultatet. Om det faktiska och förväntade värdet är detsamma, kommer testet att klara, annars misslyckas det.

När du kör följande rad vid kommandotolken kommer den att köra ovanstående testfil

karma start

Utdata nedan är hämtad från IDE Webstorm där ovanstående steg utfördes.

1. Utdata kommer i Karma explorer inom Webstorm. Detta fönster visar utförandet av alla tester som är definierade i karma-ramverket.
2. Här kan du se att beskrivningen av det utförda testet visas som är "Sample test".
3. Därefter kan du se att själva testet som har namnet "Condition is true" exekveras.
4. Observera att eftersom alla tester har den gröna "Ok"-ikonen bredvid sig som symboliserar att alla tester är godkända.

Vad är Jasmine i AngularJS enhetstestning?

Karma bestämmer var tester körs, medan Jasmine bestämmer hur de skrivs. Jasmine är ett beteendedrivet specifikationsramverk som tillhandahåller vokabulären som används i varje exempel på den här sidan, vilket är anledningen till att karma-jasmine-adaptern installeras bredvid löparen.

Jasmine bidrar med fyra byggstenar:

• beskriva(): Grupperar relaterade specifikationer i en svit och accepterar en läsbar beskrivning av den enhet som testas.
• det(): Deklarerar en enda specifikation. Namnet bör ange beteendet som verifieras snarare än metoden som anropas.
• förvänta() med matchare: Jämför ett faktiskt värde med ett förväntat. Vanliga matchningar inkluderar toBe, toEqual, toContain och toBeDefined.
• föreVarje() och efterVarje(): Kör installation och nedmontering före och efter varje specifikation, vilket håller varje test oberoende.

Jasmine erbjuder även spioner. En spion ersätter en verklig funktion med en inspelad ställfunktion, så en kontroller kan testas utan att anropa en live HTTP-slutpunkt. Eftersom Jasmine inte behöver någon DOM och inget eget assertionbibliotek, är kombinationen av Karma och Jasmine fortfarande det enklaste sättet att köra AngularJS. JavaSkriptenhetstester.

Testar AngularJS-kontroller

Karmatestramverket har också funktionen att testa Controllers från början till slut. Detta inkluderar testning av $scope-objektet som används inom 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 de nedan nämnda stegen

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

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

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

Installera angular-mocks-biblioteket via npm. Detta kan göras genom att köra raden nedan i kommandotolken.

npm install angular-mocks --save-dev

Nästa är att modifiera filen karma.conf.js för att säkerställa att rätt filer ingår för testet. Segmentet nedan visar bara fildelen av karma.conf.js som behöver modifieras

files: ['lib/angular.js', 'lib/angular-mocks.js', 'lib/index.js', 'test/*.js']

• Parametern 'filer' berättar i princip för Karma alla filer som krävs för att köra testerna.
• Filerna angular.js och angular-mocks.js krävs för att köra AngularJS-enhetstester.
• Filen index.js kommer att innehålla vår kod för styrenheten
• Testmappen kommer att innehålla alla våra AngularJS-tester

Nedan följer vår AngularJS-kod som kommer att lagras som en Index.js-fil i testmappen i vår applikation.

Koden nedan gör bara följande saker

1. Skapa ett AngularJS-modul kallas sampleApp
2. Skapa en kontroller som heter AngularJSController
3. Skapa en variabel som heter ID, ge den värdet 5 och tilldela den till $scope-objektet

var sampleApp = angular.module('sampleApp', []);
sampleApp.controller('AngularJSController', function($scope) {
  $scope.ID = 5;
});

När ovanstående kod har körts framgångsrikt, skulle nästa steg vara att skapa en Testfall för att säkerställa att koden har skrivits och körts korrekt.

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

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

1. beforeEach-funktionen – Den här funktionen används för att ladda vår AngularJS-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 kontrollenheten "AngularJSController" som definieras i vår index.js-fil. I alla typer av enhetstestning representerar ett mock-objekt ett dummy-objekt som faktiskt kommer att användas för testningen. Detta mock-objekt kommer faktiskt att simulera beteendet hos vår kontrollenhet.
3. beforeEach(inject(function(_$controller_) – Detta används för att injicera skenobjektet i vårt test så att det beter sig som den faktiska kontrollern.
4. var $scope = {}; Detta är ett skenobjekt som skapas för $scope-objektet.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Här kontrollerar vi om det finns en kontroller med namnet 'AngularJSController'. Här tilldelar vi också alla variabler från vårt $scope-objekt i vår kontroller 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 godkänt resultat som visades i föregående avsnitt.

Testa AngularJS-direktiv

Karma-testramverket har även funktionalitet för att testa anpassade direktiv. Detta inkluderar mallen.URLsom används inom 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 header-tagg som visar texten "This is AngularJS Testing."

var sampleApp = angular.module('sampleApp', []);
sampleApp.directive('guru99', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<h1>This is AngularJS Testing</h1>'
  };
});

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

Koden kommer att finnas i en separat fil som heter DirectTest.js, som kommer att placeras i testmappen. Koden nedan gör bara följande viktiga saker

1. beforeEach-funktion – Den här funktionen används för att ladda vår AngularJS-modul som heter 'sampleApp' före testkörningen.
2. Tjänsten $compile används för att kompilera direktivet. Denna tjänst är obligatorisk och måste deklareras så att AngularJS kan använda den för att kompilera vårt anpassade direktiv.
3. $rootScope är det primära scopet för alla AngularJS-applikationer. Vi har sett $scope-objektet för kontrollenheten i tidigare kapitel. $scope-objektet är underobjektet till $rootScope-objektet. Anledningen till att detta deklareras här är att vi gör en ändring av en faktisk HTML-tagg i DOM-koden via vårt anpassade direktiv. Därför behöver vi använda $rootScope-tjänsten som faktiskt lyssnar eller vet när en ändring sker inifrån ett HTML-dokument.
4. var element = $kompilera(" ”)($rootScope) – Detta används för att kontrollera om vårt direktiv injiceras som det ska. Direktivet är registrerat med det camel case-namnet guru99, så AngularJS matchar det gemena elementet i markupen. Därför används denna sats för att göra den kontrollen.
5. expect(element.html()).toContain(“Detta är AngularJS-testning”) – Detta används för att instruera expect-funktionen att den ska hitta elementet (i vårt fall h1-taggen) så att det innehåller innerHTML-texten för “Detta är AngularJS-testning”.

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 directive
    var element = $compile("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Ovanstående test körs i karma-webbläsaren och ger samma godkänt resultat som visades i föregående avsnitt.

End-to-End-testning av AngularJS-applikationer

Ramverket för karmatestning tillsammans med ett ramverk som heter Protractor har funktionen att testa en webbapplikation från början till slut.

Så det är inte bara testning av direktiv och kontroller, utan även testning av allt annat som kan dyka upp 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 ng-repeat-direktivet.

1. Vi skapar först en variabel som heter "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. Handledningsvariabeln tilldelas sedan scope-objektet så att den kan nås från vår vy.
2. För varje rad med data i tabellen använder vi direktivet ng-repeat. Detta direktiv går igenom varje nyckel-värdepar i tutorial scope-objektet med hjälp av variabeln ptutor.
3. Slutligen använder vi tagga tillsammans med nyckelvärdeparen (ptutor.Name och ptutor.Description) för att visa tabelldata.

<table>
  <tr ng-repeat="ptutor in tutorial">
    <td>{{ ptutor.Name }}</td>
    <td>{{ ptutor.Description }}</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

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

Vårt test kommer faktiskt att testa direktivet ng-repeat och säkerställa att det innehåller 3 rader med data som det ska från exemplet ovan.

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

Installera proffsettractor-biblioteket via npm. Detta kan göras genom att köra raden nedan i kommandotolken

npm install -g protractor

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

Koden kommer att finnas i en separat fil som heter CompleteTest.js , som kommer att placeras i testmappen. Koden nedan gör bara följande viktiga saker

1. Webbläsarfunktionen tillhandahålls av proffsentractor-biblioteket och antar att vår AngularJS-applikation (med koden som visas ovan) körs på vår webbplats URL – http://lokalvärd:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); -Denna kodrad hämtar faktiskt ng-repeat-direktivet som är ifyllt med koden 'ptutor in tutorial'. Elementet och by.repeater är speciella nyckelord som tillhandahålls av proen.tractor-bibliotek som låter oss få detaljer om ng-repeat-direktivet.
3. förvänta(list.count()).toEqual(3); – Slutligen använder vi förvänta-funktionen för att se att vi verkligen får 3 poster som fylls i vår tabell som ett resultat av ng-repeat-direktivet.

describe('Unit testing end to end', function() {
  beforeEach(function() {
    browser.get('http://localhost:8080/Guru99/');
  });

  it('Check the ng directive', function() {
    var list = element.all(by.repeater('ptutor in tutorial'));
    expect(list.count()).toEqual(3);
  });
});

Ovanstående test körs i karma-webbläsaren och ger samma godkänt resultat som visades i föregående avsnitt.

Karma vs Jasmine vs Protractor: Viktiga skillnader

De tre verktygen som används på den här sidan förväxlas ofta eftersom de visas i samma kommandorad. Var och en upptar ett annat lager i teststacken, vilket tabellen nedan visar.

Kort sagt, Jasmine skriver testet, Karma utför det och Protractor utökar samma Jasmine-syntax till en fullständigt renderad sida.

Bästa praxis för enhetstestning av AngularJS

En liten uppsättning vanor håller en AngularJS-svit snabb och pålitlig allt eftersom applikationen växer.

1. Testa en enhet i taget. Ladda endast modulen som testas inuti beforeEach, och simulera varje samarbetspartner så att ett fel pekar på en enda fil.
2. Ring aldrig en riktig backend. Använd tjänsten $httpBackend från angular-mocks för att returnera standardsvar. Testerna körs sedan offline och ger identiska resultat på varje maskin.
3. Håll specifikationsnamnen beteendemässiga. Ett namn som ”returnerar 5 när styrenheten initieras” läses bättre i en rapport än ”test1”.
4. Spola alltid igenom digestionscykeln. Anropa $rootScope.$digest() efter att ha ändrat scopedata, annars uppdateras aldrig bindningar och bevakare och assertions misslyckas av fel anledning.
5. Mät täckningen, men bedöm den noggrant. Lägg till karma-täckning för att se oprövade grenar. Hög täckning med svaga påståenden döljer fortfarande defekter.
6. Kör sviten i kontinuerlig integration. Använd en headless Chrome launcher så att samma specifikationer körs på varje commit istället för bara på en utvecklardator.

Genom att tillämpa dessa regler förvandlas exemplen ovan från isolerade demonstrationer till ett regressionsskyddsnät för en äldre AngularJS-kodbas. För en större bild, se AngularJS-handledning serien.

Vanliga frågor