AngularJS Unit Testing: Karma Jasmine Tutorial

By: James Hartman James Hartman
Hours Uppdaterad

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

I AngularJS utförs testning normalt med Karma (framework). Angular JS-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å utföra end of end-testning av AngularJS, vilket är testning ur ett användarperspektiv.

Introduktion och installation av Karma-ramverket

Karma är en testautomationsverktyg skapad 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 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 karma-cli

vart i,

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

    • 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: [
  '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ör karma runtime-motorn följande saker

    1. "Ditt program namn" – Detta kommer att ersättas med namnet på din ansökan.
    2. 'Ditt program Namn'/AngularJS/AngularJS.js' – Detta talar om för karma att din applikation beror på kärnmodulerna i AngularJS
    3. 'Ditt programnamn'/AngularJS-mocks/AngularJS-mocks.js' – Detta säger åt karma att använda enhetstestningsfunktionen för AngularJS från filen Angular.JS-mocks.js.
    4. Alla huvudapplikations- eller affärslogikfiler finns i lib-mappen i din applikation.
    5. 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.

    Konfiguration av Karma-ramverket

    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.

    RELATERADE ARTIKLAR

    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.JS-mocks-biblioteket via npm. Detta kan göras genom att utföra raden nedan i kommandotolken

    npm install Angular JS-mocks

    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/AngularJS.js','lib/AngularJS-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 AngularJS.js och AngularJS-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 finns vår Angular.JS-kod som kommer att lagras som en fil Index.js 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 = AngularJS.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 funktion – Denna funktion används för att ladda vår AngularJS.JS-modul som heter 'sampleApp' innan testkörningen. Observera att detta är namnet på modulen i en index.js-fil.
    2. $controller-objektet skapas som ett mockup-objekt för styrenheten ”Angular JSController” som definieras i vår index.js-fil. I vilken typ av enhetstestning som helst representerar ett skenobjekt ett dummyobjekt som faktiskt kommer att användas för testet. Detta skenobjekt kommer faktiskt att simulera beteendet hos vår kontroller.
    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 styrenhet som heter 'Angular.JSController'. Här tilldelar vi också alla variabler från vårt $scope-objekt i vår styrenhet 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

    Ramverket för karmatestning har också funktionen att testa anpassade direktiv. Detta inkluderar mallURL:erna som 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 = AngularJS.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 function – Denna funktion används för att ladda vår Angular JS-modul som heter 'sampleApp' innan testkörningen.
    2. Tjänsten $compile används för att kompilera 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 kontrollern i tidigare kapitel. Tja, $scope-objektet är det underordnade objektet till $rootscope-objektet. Anledningen till att detta deklareras 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 inifrå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 med 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. 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 div-taggen) för att innehålla innerHTML-texten i “This is 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("<ng-Guru99></ng-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 AngularJS JS-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 = AngularJS.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 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://localhost:8080/Guru99/
    2. var list=element.all(by.repeater(ptutor in tutorial')); -Denna kodrad hämtar faktiskt ng-repeat-direktivet som fylls i 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.

    Sammanfattning

    • Testning i AngularJS uppnås genom att använda karma-ramverket, ett ramverk som har utvecklats av Google själv.
    • Karma-ramverket installeras med hjälp av nodpakethanteraren. Nyckelmodulerna som krävs för att installeras för grundläggande testning är karma, karma-chrome-launcher, karma-jasmine och karma-cli.
    • Testerna är skrivna i separata js-filer, normalt lagrade i testmappen i din applikation. Placeringen av dessa testfiler måste anges i en speciell konfigurationsfil som heter karma.conf.js. Karma använder denna konfigurationsfil när alla tester utförs.
    • Karma kan också användas för att testa styrenheter och anpassade direktiv.
    • För heltäckande webbtestning, ett annat ramverk som kallas protractor behöver installeras via Node, pakethanteraren. Detta ramverk tillhandahåller speciella metoder som kan användas för att testa alla element på en HTML-sida.

    Sammanfatta detta inlägg med: