AngularJS Unit Testing: Karma Jasmine Tutorial

En av de mest strålende funksjonene til Angular.JS er Testing aspekt. Da utviklerne hos Google utviklet AngularJS, holdt de testingen i tankene og sørget for at hele AngularJS-rammeverket var testbart.

I AngularJS utføres testing normalt ved hjelp av Karma (rammeverk). Angular JS-testing kan utføres uten Karma, men Karma-rammeverket har en så glimrende funksjonalitet for å teste AngularJS-kode, at det er fornuftig å bruke dette rammeverket.

• I AngularJS kan vi opptre Enhetstesting separat for kontrollere og direktiver.
• Vi kan også utføre end of end-testing av AngularJS, som er testing fra et brukerperspektiv.

Introduksjon og installasjon av Karma-rammeverket

Karma er en testing av automatiseringsverktøy opprettet av Angular JS-teamet hos Google. Det første trinnet for å bruke Karma er å installere Karma. Karma installeres via npm (som er en pakkebehandling som brukes for enkel installasjon av moduler på en lokal maskin).

Installasjon av Karma

Installasjonen av Karma via npm gjøres i en to-trinns prosess.

Trinn 1) Utfør linjen under fra kommandolinjen

npm install karma karma-chrome-launcher karma-jasmine

hvori,

1. npm er kommandolinjeverktøyet for nodepakkebehandleren som brukes til å installere tilpassede moduler på hvilken som helst maskin.
2. Installasjonsparameteren instruerer npm-kommandolinjeverktøyet om at installasjon er nødvendig.
3. Det er 3 biblioteker som er spesifisert på kommandolinjen som kreves for å jobbe med karma.
• karma er kjernebiblioteket som vil bli brukt til testformål.
• karma-chrome-launcher er et eget bibliotek som gjør det mulig å gjenkjenne karma-kommandoer av chrome-nettleseren.
• karma-jasmin – Dette installerer jasmin som er et avhengig rammeverk for karma.

Trinn 2) Det neste trinnet er å installere kommandolinjeverktøyet karma. Dette er nødvendig for å utføre karmalinjekommandoer. Karmalinjeverktøyet vil bli brukt til å initialisere karmamiljøet for testing.

For å installere kommandolinjeverktøyet, kjør linjen nedenfor fra kommandolinjen

npm install karma-cli

hvori,

karma-cli brukes til å installere kommandolinjegrensesnittet for karma som vil bli brukt til å skrive karmakommandoer i kommandolinjegrensesnittet.

Konfigurasjon av Karma-rammeverket

Det neste trinnet er å konfigurere karma som kan gjøres via kommandoen

"karma –init"

Etter at trinnet ovenfor er utført, vil karma lage en karma.conf.js-fil. Filen vil sannsynligvis se ut som kodebiten vist nedenfor

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

Konfigurasjonsfilene ovenfor forteller karma runtime-motoren følgende ting

1. "Ditt programnavn" – Dette vil bli erstattet av navnet på søknaden din.
2. 'Applikasjonsnavnet'/AngularJS/AngularJS.js' – Dette forteller karma at applikasjonen din avhenger av kjernemodulene i AngularJS
3. 'Ditt programnavn'/AngularJS-mocks/AngularJS-mocks.js' – Dette forteller karma å bruke Unit Testing-funksjonaliteten for AngularJS fra Angular.JS-mocks.js-filen.
4. Alle hovedapplikasjons- eller forretningslogikkfilene er til stede i lib-mappen til applikasjonen din.
5. Testmappen vil inneholde alle enhetstestene.

For å sjekke om karma fungerer, lag en fil som heter Sample.js, legg inn koden nedenfor og plasser den i testkatalogen.

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

Koden ovenfor har følgende aspekter

1. Beskriv-funksjonen brukes til å gi en beskrivelse av testen. I vårt tilfelle gir vi beskrivelsen "Sample test" til testen vår.
2. 'It'-funksjonen brukes til å gi et navn til testen. I vårt tilfelle oppgir vi navnet på testen vår som "Betingelsen er sann". Navnet på testen må gi mening.
3. Kombinasjonen av søkeordet 'forvent' og 'toBe' angir hva som er forventet og faktisk verdi av testresultatet. Hvis den faktiske og forventede verdien er den samme, vil testen bestå, ellers mislykkes den.

Når du kjører følgende linje ved ledeteksten, vil den kjøre testfilen ovenfor

KARMA start

Utgangen nedenfor er hentet fra IDE Webstorm hvor trinnene ovenfor ble utført.

1. Utgangen kommer i Karma-utforskeren innenfor Webstorm. Dette vinduet viser utførelsen av alle tester som er definert i karma-rammeverket.
2. Her kan du se at beskrivelsen av testen som er utført vises som er "Sample test".
3. Deretter kan du se at selve testen som har navnet "Condition is true" er utført.
4. Merk at siden alle tester har det grønne "Ok"-ikonet ved siden av som symboliserer at alle tester bestått.

Tester AngularJS-kontrollere

Karma-testing-rammeverket har også funksjonalitet til å teste kontrollere fra ende til annen. Dette inkluderer testing av $scope-objektet som brukes i kontrollere.

La oss se på et eksempel på hvordan vi kan oppnå dette.

I vårt eksempel,

Vi må først definere en kontroller. Denne kontrolleren vil utføre trinnene nedenfor

1. Opprett en ID-variabel og tilordne verdien 5 til den.
2. Tilordne ID-variabelen til $scope-objektet.

Testen vår vil teste eksistensen av denne kontrolleren og også teste for å se om ID-variabelen til $scope-objektet er satt til 5.

Først må vi sikre at følgende forutsetning er på plass

Installer Angular.JS-mocks-biblioteket via npm. Dette kan gjøres ved å utføre linjen under i ledeteksten

npm install Angular JS-mocks

Neste er å endre karma.conf.js-filen for å sikre at de riktige filene er inkludert for testen. Segmentet nedenfor viser bare fildelen av karma.conf.js som må endres

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

• Parameteren 'filer' forteller i utgangspunktet Karma alle filene som kreves for å kjøre testene.
• Filene AngularJS.js og AngularJS-mocks.js kreves for å kjøre AngularJS-enhetstester
• index.js-filen kommer til å inneholde vår kode for kontrolleren
• Testmappen kommer til å inneholde alle våre AngularJS-tester

Nedenfor er vår Angular.JS-kode som vil bli lagret som en fil Index.js i testmappen til applikasjonen vår.

Koden nedenfor gjør bare følgende ting

1. Lag en AngularJS-modul kalt sampleApp
2. Lag en kontroller kalt AngularJSController
3. Lag en variabel kalt ID, gi den en verdi på 5 og tilordne den til $scope-objektet

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

Når koden ovenfor er utført vellykket, vil neste trinn være å lage en Testsak for å sikre at koden er skrevet og utført på riktig måte.

Koden for testen vår vil være som vist nedenfor.

Koden vil være i en egen fil kalt ControllerTest.js, som vil bli plassert i testmappen. Koden nedenfor gjør bare følgende viktige ting

1. beforeEach-funksjon – Denne funksjonen brukes til å laste vår AngularJS.JS-modul kalt 'sampleApp' før testkjøringen. Merk at dette er navnet på modulen i en index.js-fil.
2. $controller-objektet er opprettet som et mockup-objekt for kontrolleren "Angular JSController" som er definert i vår index.js-fil. I enhver form for enhetstesting representerer et falskt objekt et dummyobjekt som faktisk vil bli brukt til testingen. Dette falske objektet vil faktisk simulere oppførselen til kontrolleren vår.
3. beforeEach(inject(function(_$controller_) – Dette brukes til å injisere det falske objektet i testen vår slik at det oppfører seg som den faktiske kontrolleren.
4. var $omfang = {}; Dette er et falskt objekt som opprettes for $scope-objektet.
5. var kontroller = $controller('AngularJSController', { $scope: $scope }); – Her sjekker vi om det finnes en kontroller kalt 'Angular.JSController'. Her tilordner vi også alle variabler fra $scope-objektet vårt i kontrolleren vår i Index.js-filen til $scope-objektet i testfilen vår
6. Til slutt sammenligner 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);
        });
    });
});

Testen ovenfor vil kjøre i karma-nettleseren og gi samme bestått resultat som ble vist i forrige emne.

Testing av AngularJS-direktiver

Karma-testingsrammeverket har også funksjonalitet til å teste tilpassede direktiver. Dette inkluderer templateURL-ene som brukes i tilpassede direktiver.

La oss se på et eksempel på hvordan vi kan oppnå dette.

I vårt eksempel vil vi først definere et tilpasset direktiv som gjør følgende

1. Lag en AngularJS-modul kalt sampleApp
2. Lag et tilpasset direktiv med navnet - Guru99
3. Lag en funksjon som returnerer en mal med en header-tag som viser teksten "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 ovenfor er utført vellykket, vil neste trinn være å lage en testcase for å sikre at koden er skrevet og utført på riktig måte. Koden for testen vår vil være som vist nedenfor

Koden vil være i en egen fil kalt DirektivTest.js, som vil bli plassert i testmappen. Koden nedenfor gjør bare følgende viktige ting

1. beforeEach-funksjon – Denne funksjonen brukes til å laste vår Angular JS-modul kalt 'sampleApp' før testkjøringen.
2. Tjenesten $compile brukes til å kompilere direktivet. Denne tjenesten er obligatorisk og må deklareres slik at Angular.JS kan bruke den til å kompilere vårt tilpassede direktiv.
3. $rootscope er det primære omfanget av enhver AngularJS.JS-applikasjon. Vi har sett $scope-objektet til kontrolleren i tidligere kapitler. Vel, $scope-objektet er det underordnede objektet til $rootscope-objektet. Grunnen til at dette er deklarert her er fordi vi gjør en endring til en faktisk HTML-tag i DOM via vårt egendefinerte direktiv. Derfor må vi bruke $rootscope-tjenesten som faktisk lytter eller vet når en endring skjer fra et HTML-dokument.
4. var element = $compile(“ ”) – Dette brukes til å sjekke om direktivet vårt blir injisert som det skal. Navnet på vårt tilpassede direktiv er Guru99, og vi vet fra kapittelet vårt om tilpassede direktiver at når direktivet injiseres i HTML-en vår, vil det bli injisert som ' '. Derfor brukes denne erklæringen for å foreta den kontrollen.
5. expect(element.html()).toContain(“This is AngularJS Testing”) – Dette brukes til å instruere expect-funksjonen om at den skal finne elementet (i vårt tilfelle div-taggen) for å inneholde den innerHTML-teksten til “This is 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 directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Testen ovenfor vil kjøre i karma-nettleseren og gi samme bestått resultat som ble vist i forrige emne.

End-to-end-testing av AngularJS JS-applikasjoner

Karma-testingsrammeverket sammen med et rammeverk kalt Protractor har funksjonaliteten til å teste en nettapplikasjon fra ende til annen.

Så det er ikke bare testing av direktiver og kontrollere, men også testing av alt annet som kan vises på en HTML-side.

La oss se på et eksempel på hvordan vi kan oppnå dette.

I vårt eksempel nedenfor skal vi ha en AngularJS-applikasjon som lager en datatabell ved å bruke ng-repeat-direktivet.

1. Vi lager først en variabel kalt "tutorial" og tildeler den noen nøkkelverdi-par i ett trinn. Hvert nøkkel-verdi-par vil bli brukt som data når tabellen vises. Opplæringsvariabelen tilordnes deretter scope-objektet slik at det kan nås fra vårt syn.
2. For hver rad med data i tabellen bruker vi ng-repeat-direktivet. Dette direktivet går gjennom hvert nøkkelverdi-par i opplæringsomfangsobjektet ved å bruke variabelen ptutor.
3. Til slutt bruker vi tag sammen med nøkkelverdiparene (ptutor.Name og ptutor.Description) for å vise tabelldataene.

<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 ovenfor er utført vellykket, vil neste trinn være å lage en testcase for å sikre at koden er skrevet og utført på riktig måte. Koden for testen vår vil være som vist nedenfor

Testen vår skal faktisk teste ng-repeat-direktivet og sikre at den inneholder 3 rader med data, slik den skal fra eksemplet ovenfor.

Først må vi sikre at følgende forutsetning er på plass

Installer vinkelmålerbiblioteket via npm. Dette kan gjøres ved å utføre linjen under i ledeteksten

"npm install protractor"

Koden for testen vår vil være som vist nedenfor.

Koden vil være i en egen fil kalt CompleteTest.js , som vil bli plassert i testmappen. Koden nedenfor gjør bare følgende viktige ting

1. Nettleserfunksjonen leveres av vinkelmålerbiblioteket og forutsetter at vår AngularJS-applikasjon (med koden vist ovenfor) kjører på nettstedets URL - http://localhost:8080/Guru99/
2. var list=element.all(by.repeater(ptutor in tutorial')); -Denne kodelinjen henter faktisk ng-repeat-direktivet som er fylt med koden 'ptutor in tutorial'. Elementet og by.repeater er spesielle nøkkelord levert av vinkelmålerbiblioteket som lar oss få detaljer om ng-repeat-direktivet.
3. forventer(liste.antall()).toEqual(3); – Til slutt bruker vi forventningsfunksjonen for å se at vi faktisk får 3 elementer som fylles ut i tabellen vår som et 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);  }); });

Testen ovenfor vil kjøre i karma-nettleseren og gi samme bestått resultat som ble vist i forrige emne.

Sammendrag

• Testing i AngularJS oppnås ved å bruke karma-rammeverket, et rammeverk som er utviklet av Google selv.
• Karma-rammeverket er installert ved hjelp av nodepakkebehandleren. Nøkkelmodulene som kreves for å bli installert for grunnleggende testing er karma, karma-krom-launcher, karma-jasmin og karma-cli.
• Testene er skrevet i separate js-filer, vanligvis lagret i testmappen til applikasjonen din. Plasseringen av disse testfilene må nevnes i en spesiell konfigurasjonsfil kalt karma.conf.js. Karma bruker denne konfigurasjonsfilen når alle tester utføres.
• Karma kan også brukes til å teste kontroller og tilpassede direktiver.
• For en ende til ende webtesting, må et annet rammeverk kalt gradskive installeres via Node, pakkebehandling. Dette rammeverket gir spesielle metoder som kan brukes til å teste alle elementene på en HTML-side.