AngularJS Unit Testing: Karma Jasmine Tutorial

Innholdsfortegnelse:

Anonim

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

I AngularJS utføres testingen normalt ved hjelp av Karma (framework). 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 utføre enhetstesting separat for kontrollere og direktiver.
  • Vi kan også utføre slutttesting av AngularJS, som tester fra et brukerperspektiv.

I denne veiledningen vil du lære-

  • Introduksjon og installasjon av Karma-rammeverket
    • Installasjon av Karma
    • Konfigurasjon av Karma-rammeverket
  • Testing av AngularJS-kontrollere
  • Testing av AngularJS-direktiver
  • End to End Testing AngularJS JS applikasjoner

Introduksjon og installasjon av Karma-rammeverket

Karma er et testautomatiseringsverktøy opprettet av Angular JS-teamet på Google. Det første trinnet for bruk av 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 nedenfor fra kommandolinjen

npm install karma karma-chrome-launcher karma-jasmine

Hvor

  1. npm er kommandolinjeprogrammet for node-pakkebehandling som brukes til å installere tilpassede moduler på hvilken som helst maskin.
  2. Installasjonsparameteren instruerer kommandolinjeprogrammet npm om at installasjon er nødvendig.
  3. Det er tre biblioteker som er spesifisert i kommandolinjen som kreves for å jobbe med karma
    • karma er kjernebiblioteket som skal brukes 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 en avhengig ramme for Karma.

Trinn 2) Det neste trinnet er å installere karma-kommandolinjeprogrammet. Dette er nødvendig for å utføre karma-linjekommandoer. Karma line-verktøyet vil bli brukt til å initialisere karma-miljøet for testing.

For å installere kommandolinjeprogrammet, kjør nedenstående linje fra kommandolinjen

npm install karma-cli

hvor,

  1. karma-cli brukes til å installere kommandolinjegrensesnittet for karma som skal brukes til å skrive karma-kommandoene i kommandolinjegrensesnittet.

Konfigurasjon av Karma-rammeverket

Neste trinn er å konfigurere karma som kan gjøres via kommandoen

"karma -init"

Etter at trinnet ovenfor er utført, vil karma opprette en karma.conf.js-fil. Filen vil trolig 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']

Ovennevnte konfigurasjonsfiler forteller karma runtime-motoren følgende ting

  1. 'Ditt søknadsnavn' - Dette vil bli erstattet av navnet på søknaden din.
  2. ' Your application Name' / AngularJS / AngularJS.js ' - Dette forteller karma at applikasjonen din er avhengig av kjernemodulene i AngularJS
  3. 'Your application Name' / 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 tilstede i lib-mappen til applikasjonen din.
  5. Testmappen inneholder alle enhetstestene

For å sjekke om karma fungerer, opprett 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');});});

Ovennevnte kode har følgende aspekter

  1. Beskriv funksjonen brukes til å gi en beskrivelse av testen. I vårt tilfelle gir vi beskrivelsen 'Prøveprøve' til testen.
  2. Funksjonen 'it' brukes til å gi et navn til testen. I vårt tilfelle gir vi navnet på testen vår som 'Tilstand er sant'. Testens navn må være meningsfylt.
  3. Kombinasjonen av nøkkelordet "forvent" og "å være" angir hva som er den forventede og faktiske verdien av testresultatet. Hvis den faktiske og forventede verdien er den samme, vil testen bestå ellers vil den mislykkes.

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

KARMA start

Resultatet nedenfor er hentet fra IDE Webstorm der trinnene ovenfor ble utført.

  1. Produksjonen kommer i Karma explorer i Webstorm. Dette vinduet viser gjennomføringen av alle testene som er definert i karma-rammeverket.
  2. Her kan du se at beskrivelsen av den utførte testen vises som er "Eksempel test."
  3. Deretter kan du se at selve testen som har navnet "Condition is true" blir utført.
  4. Merk at siden alle testene har det grønne "Ok" -ikonet ved siden av, som symboliserer at alle testene har bestått.

Testing av AngularJS-kontrollere

Rammeverket for karma-testing har også funksjonaliteten til å teste kontrollere fra ende til annen. Dette inkluderer testing av $ scope-objektet som brukes i Controllers.

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. Lag en ID-variabel og tildel 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 sørge for at følgende forutsetning er på plass

    1. Installer Angular.JS-mocks-biblioteket via npm. Dette kan gjøres ved å utføre linjen nedenfor i ledeteksten
npm install Angular JS-mocks
  1. Neste er å endre karma.conf.js-filen for å sikre at riktige filer er inkludert for testen. Segmentet nedenfor viser bare fildelene 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 i løpet av testene.
  • AngularJS.js- og AngularJS-mocks.js-filen kreves for å kjøre AngularJS-enhetstester
  • Index.js-filen kommer til å inneholde koden vår for kontrolleren
  • Testmappen skal 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 Angular JS-modul kalt sampleApp
  2. Lag en kontroller som heter AngularJSController
  3. Opprett en variabel kalt ID, gi den verdien 5 og tildel den til $ scope-objektet
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Når den ovennevnte koden er utført vellykket, vil neste trinn være å lage en testsak for å sikre at koden er skrevet og utført riktig.

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 blir opprettet som et mockup-objekt for kontrolleren '' Angular JSController '' som er definert i vår index.js-fil. I en hvilken som helst enhetstest representerer et mock-objekt et dummy-objekt som faktisk vil bli brukt til testingen. Dette spotte objektet vil faktisk simulere oppførselen til kontrolleren vår.

  3. beforeEach (injiser (funksjon (_ $ controller_) - Dette brukes til å injisere mock-objektet i testen vår slik at den oppfører seg som den faktiske kontrolleren.

  4. var $ scope = {}; Dette er et mock-objekt som blir opprettet for $ scope-objektet.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Her ser vi etter eksistensen av en kontroller som heter 'Angular.JSController'. Her tildeler vi også alle variablene fra $ scope-objektet i kontrolleren vår i Index.js-filen til $ scope-objektet i testfilen.

  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);});});});

Ovennevnte test vil kjøre i karma-nettleseren og gi samme passresultat som ble vist i forrige emne.

Testing av AngularJS-direktiver

Rammeverket for karma-testing har også funksjonaliteten til å teste tilpassede direktiver. Dette inkluderer templateURL 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 ting

  1. Opprett en AngularJS-modul kalt sampleApp
  2. Lag et tilpasset direktiv med navnet - Guru99
  3. Lag en funksjon som returnerer en mal med en topptekst som viser teksten "This is AngularJS Testing."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Når den ovennevnte koden er utført vellykket, vil neste trinn være å lage en testtilfelle for å sikre at koden er skrevet og utført riktig. Koden for testen vår vil være som vist nedenfor

Koden vil være i en egen fil kalt DirectiveTest.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. $ Kompileringstjenesten brukes til å kompilere direktivet. Denne tjenesten er obligatorisk og må erklæres 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 underobjektet til $ rootscope-objektet. Årsaken til at dette er erklært her er fordi vi endrer en faktisk HTML-tag i DOM via vårt tilpassede direktiv. Derfor må vi bruke $ rootscope-tjenesten som faktisk lytter eller vet når noen endringer 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 om tilpassede direktiver at når direktivet injiseres i HTML-en vår, vil det bli injisert som ' '. Derfor blir denne uttalelsen brukt til å foreta den kontrollen.

  5. expect (element.html ()). toContain ("This is AngularJS Testing") - Dette brukes til å instruere forventningsfunksjonen om at den skal finne elementet (i vårt tilfelle div-taggen) for å inneholde den indre HTML-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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

Ovennevnte test vil kjøre i karma-nettleseren og gi samme passresultat som ble vist i forrige emne.

End to End Testing AngularJS JS applikasjoner

Karma-testrammeverket sammen med et rammeverk kalt Protractor har funksjonaliteten til å teste en webapplikasjon 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 et AngularJS-program som oppretter en datatabell ved hjelp av ng-repeat-direktivet.

  1. Vi lager først en variabel kalt "tutorial" og tildeler den noen nøkkelverdipar i ett trinn. Hvert nøkkelverdipar vil bli brukt som data når tabellen vises. Opplæringsvariabelen tildeles deretter omfangsobjektet slik at det er tilgjengelig fra vårt syn.
  2. For hver rad med data i tabellen bruker vi ng-repeat-direktivet. Dette direktivet går gjennom hvert nøkkelverdipar i opplæringsomfangsobjektet ved hjelp av variabelen ptutor.
  3. Til slutt bruker vi -koden sammen med nøkkelverdiparene (ptutor.Name og ptutor.Description) for å vise tabelldataene.


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