AngularJS Unit Testing: Karma Jasmine Tutorial

Indholdsfortegnelse:

Anonim

En af de mest geniale funktioner i Angular.JS er testaspektet. Da udviklerne hos Google udviklede AngularJS, holdt de test i tankerne og sørgede for, at hele AngularJS-rammen var testbar.

I AngularJS udføres test normalt ved hjælp af Karma (framework). Angular JS-test kan udføres uden Karma, men Karma-rammen har en så fremragende funktionalitet til test af AngularJS-kode, at det giver mening at bruge denne ramme.

  • I AngularJS kan vi udføre Unit Testing separat for controllere og direktiver.
  • Vi kan også udføre afslutningstest af AngularJS, som tester ud fra et brugerperspektiv.

I denne vejledning lærer du-

  • Introduktion og installation af Karma-rammen
    • Installation af Karma
    • Konfiguration af Karma-rammen
  • Test af AngularJS-controllere
  • Test af AngularJS-direktiver
  • End to End-test AngularJS JS-applikationer

Introduktion og installation af Karma-rammen

Karma er et testautomatiseringsværktøj oprettet af Angular JS-teamet hos Google. Det første skridt til at bruge Karma er at installere Karma. Karma installeres via npm (som er en pakkehåndtering, der bruges til nem installation af moduler på en lokal maskine).

Installation af Karma

Installationen af ​​Karma via npm udføres i en to-trins proces.

Trin 1) Udfør nedenstående linje fra kommandolinjen

npm install karma karma-chrome-launcher karma-jasmine

Hvor

  1. npm er kommandolinjeværktøjet til node-pakkehåndtering, der bruges til installation af brugerdefinerede moduler på enhver maskine.
  2. Installationsparameteren instruerer kommandolinjeprogrammet npm, som installationen er påkrævet.
  3. Der er 3 biblioteker, der er specificeret i kommandolinjen, der kræves for at arbejde med karma
    • karma er kernebiblioteket, som vil blive brugt til testformål.
    • karma-chrome-launcher er et separat bibliotek, der gør det muligt at genkende karma-kommandoer af chrome-browseren.
    • karma-jasmin - Dette installerer jasmin, som er en afhængig ramme for Karma.

Trin 2) Det næste trin er at installere karma-kommandolinjeværktøjet. Dette er nødvendigt for at udføre karma-linjekommandoer. Karma line-værktøjet vil blive brugt til at initialisere karma-miljøet til test.

For at installere kommandolinjeprogrammet skal du udføre nedenstående linje fra kommandolinjen

npm install karma-cli

hvor,

  1. karma-cli bruges til at installere kommandolinjegrænsefladen til karma, som vil blive brugt til at skrive karma-kommandoerne i kommandolinjegrænsefladen.

Konfiguration af Karma-rammen

Det næste trin er at konfigurere karma, som kan gøres via kommandoen

"karma -init"

Når ovenstående trin er udført, opretter karma en karma.conf.js-fil. Filen vil sandsynligvis ligne uddraget vist nedenfor

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

Ovenstående konfigurationsfiler fortæller karma runtime-motoren følgende ting

  1. 'Dit ansøgningsnavn' - Dette erstattes af navnet på din ansøgning.
  2. ' Dit applikationsnavn' / AngularJS / AngularJS.js ' - Dette fortæller karma, at din applikation afhænger af kernemodulerne i AngularJS
  3. 'Dit programnavn' / AngularJS-mocks / AngularJS-mocks.js ' - Dette fortæller karma at bruge enhedstestfunktionaliteten til AngularJS fra filen Angular.JS-mocks.js.
  4. Alle de vigtigste applikations- eller forretningslogikfiler findes i lib-mappen i din applikation.
  5. Testmappen indeholder alle enhedstestene

For at kontrollere, om karma fungerer, skal du oprette en fil, der hedder Sample.js, sætte nedenstående kode og placere den i testmappen.

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

Ovenstående kode har følgende aspekter

  1. Beskrivelsesfunktionen bruges til at give en beskrivelse af testen. I vores tilfælde giver vi beskrivelsen 'Prøveprøve' til vores test.
  2. Funktionen 'it' bruges til at give et navn til testen. I vores tilfælde giver vi navnet på vores test som 'Tilstand er sand'. Testens navn skal være meningsfuldt.
  3. Kombinationen af ​​nøgleordet 'forvent' og 'at være' angiver, hvad der er den forventede og faktiske værdi af testresultatet. Hvis den faktiske og forventede værdi er den samme, vil testen bestå, ellers vil den mislykkes.

Når du udfører følgende linje ved kommandoprompten, udfører den ovenstående testfil

KARMA start

Nedenstående output er taget fra IDE Webstorm, hvor ovenstående trin blev udført.

  1. Outputtet kommer i Karma explorer inden for Webstorm. Dette vindue viser udførelsen af ​​alle tests, der er defineret i karma-rammen.
  2. Her kan du se, at beskrivelsen af ​​den udførte test vises, som er "Eksempel test."
  3. Dernæst kan du se, at selve testen, der har navnet "Condition is true", udføres.
  4. Bemærk, at da alle tests har det grønne "Ok" ikon ved siden af, hvilket symboliserer, at alle test er bestået.

Test af AngularJS-controllere

Karma-testrammen har også funktionaliteten til at teste controllere fra ende til anden. Dette inkluderer test af $ scope-objektet, der bruges i controllere.

Lad os se på et eksempel på, hvordan vi kan opnå dette.

I vores eksempel

Vi skal først definere en controller. Denne controller udfører nedenstående trin

  1. Opret en ID-variabel, og tildel værdien 5 til den.
  2. Tildel ID-variablen til $ scope-objektet.

Vores test tester eksistensen af ​​denne controller og tester også for at se om ID-variablen for $ scope-objektet er indstillet til 5.

Først skal vi sikre, at følgende forudsætning er på plads

    1. Installer Angular.JS-mocks-biblioteket via npm. Dette kan gøres ved at udføre nedenstående linje i kommandoprompten
npm install Angular JS-mocks
  1. Dernæst er at ændre karma.conf.js-filen for at sikre, at de rigtige filer er inkluderet til testen. Segmentet nedenfor viser bare filens del af karma.conf.js, som skal ændres 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parameteren 'filer' fortæller dybest set Karma alle de filer, der kræves i løbet af testene.
  • Filen AngularJS.js og AngularJS-mocks.js er påkrævet for at køre AngularJS-enhedstest
  • Index.js-filen skal indeholde vores kode til controlleren
  • Testmappen indeholder alle vores AngularJS-tests

Nedenfor er vores Angular.JS-kode, der gemmes som en fil Index.js i testmappen i vores applikation.

Nedenstående kode gør bare følgende ting

  1. Opret et kantet JS-modul kaldet sampleApp
  2. Opret en controller kaldet AngularJSController
  3. Opret en variabel kaldet ID, giv den en værdi på 5, og tildel den til $ scope-objektet
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Når ovenstående kode er udført med succes, er det næste trin at oprette en test sag for at sikre, at koden er blevet skrevet og udført korrekt.

Koden til vores test vil være som vist nedenfor.

Koden vil være i en separat fil kaldet ControllerTest.js, som placeres i testmappen. Nedenstående kode gør bare følgende nøgle ting

  1. beforeEach-funktion - Denne funktion bruges til at indlæse vores AngularJS.JS-modul kaldet 'sampleApp' før testkørslen. Bemærk, at dette er navnet på modulet i en index.js-fil.

  2. $ Controller-objektet oprettes som et mockup-objekt til controlleren '' Angular JSController '', som er defineret i vores index.js-fil. I enhver form for enhedstest repræsenterer et mock-objekt et dummy-objekt, som faktisk vil blive brugt til testningen. Dette mock-objekt simulerer faktisk vores controller's opførsel.

  3. beforeEach (injicere (funktion (_ $ controller_) - Dette bruges til at injicere det mock-objekt i vores test, så det opfører sig som den faktiske controller.

  4. var $ scope = {}; Dette er et mock-objekt, der oprettes til $ scope-objektet.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Her kontrollerer vi for eksistensen af ​​en controller ved navn 'Angular.JSController'. Her tildeler vi også alle variabler fra vores $ scope-objekt i vores controller i Index.js-filen til $ scope-objektet i vores testfil

  6. Endelig 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);});});});

Ovenstående test kører i karma-browseren og giver det samme pasresultat som vist i det forrige emne.

Test af AngularJS-direktiver

Karma-testrammen har også funktionaliteten til at teste brugerdefinerede direktiver. Dette inkluderer templateURL'erne, der bruges i brugerdefinerede direktiver.

Lad os se på et eksempel på, hvordan vi kan opnå dette.

I vores eksempel vil vi først definere et brugerdefineret direktiv, der gør følgende ting

  1. Opret et AngularJS-modul kaldet sampleApp
  2. Opret et brugerdefineret direktiv med navnet - Guru99
  3. Opret en funktion, der returnerer en skabelon med et header-tag, der 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 ovenstående kode er udført med succes, er det næste trin at oprette en test sag for at sikre, at koden er skrevet og udført korrekt. Koden til vores test vil være som vist nedenfor

Koden vil være i en separat fil kaldet DirectiveTest.js, som placeres i testmappen. Nedenstående kode gør bare følgende nøgle ting

  1. beforeEach-funktion - Denne funktion bruges til at indlæse vores Angular JS-modul kaldet 'sampleApp' før testkørslen.

  2. $ Kompileringstjenesten bruges til at kompilere direktivet. Denne service er obligatorisk og skal erklæres, så Angular.JS kan bruge den til at kompilere vores brugerdefinerede direktiv.

  3. $ Rootscope er det primære anvendelsesområde for enhver AngularJS.JS-applikation. Vi har set $ scope-objektet til controlleren i tidligere kapitler. Nå, $ scope-objektet er underobjektet til $ rootscope-objektet. Grunden til, at dette er erklæret her, er, at vi foretager en ændring af et faktisk HTML-tag i DOM via vores brugerdefinerede direktiv. Derfor er vi nødt til at bruge $ rootscope-tjenesten, som faktisk lytter eller ved, hvornår der sker ændringer inden for et HTML-dokument.

  4. var element = $ compile (" ") - Dette bruges til at kontrollere, om vores direktiv bliver injiceret som det skal. Navnet på vores brugerdefinerede direktiv er Guru99, og vi ved fra vores kapitel om brugerdefinerede direktiver, at når direktivet indsprøjtes i vores HTML, vil det blive injiceret som ' '. Derfor bruges denne erklæring til at foretage denne kontrol.

  5. expect (element.html ()). toContain ("This is AngularJS Testing") - Dette bruges til at instruere forventningsfunktionen om, at det skal finde elementet (i vores tilfælde div-tag) til at indeholde den indre HTML-tekst af "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");});});

Ovenstående test kører i karma-browseren og giver det samme pasresultat som vist i det forrige emne.

End to End-test AngularJS JS-applikationer

Karma-testrammen sammen med en ramme kaldet Protractor har funktionaliteten til at teste en webapplikation fra ende til anden.

Så det er ikke kun test af direktiver og controllere, men også test af alt andet, der kan vises på en HTML-side.

Lad os se på et eksempel på, hvordan vi kan opnå dette.

I vores eksempel nedenfor vil vi have en AngularJS-applikation, der opretter en datatabel ved hjælp af ng-repeat-direktivet.

  1. Vi opretter først en variabel kaldet "tutorial" og tildeler den nogle nøgleværdipar i et trin. Hvert nøgleværdipar vil blive brugt som data, når tabellen vises. Vejledningsvariablen tildeles derefter omfangsobjektet, så det er tilgængeligt fra vores synspunkt.
  2. For hver række data i tabellen bruger vi ng-repeat-direktivet. Dette direktiv gennemgår hvert nøgleværdipar i objektet til tutorial-omfanget ved hjælp af variablen ptutor.
  3. Endelig bruger vi tagget sammen med nøgleværdiparene (ptutor.Name og ptutor.Description) til at vise tabeldataene.


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