AngularJS-enhetstesting med Karma og Jasmine

En av de mest geniale funksjonene i AngularJS er Testing aspekt. Når utviklerne på Google Da de utviklet AngularJS, hadde de testing i tankene og sørget for at hele AngularJS-rammeverket var testbart.

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

• I AngularJS kan vi opptre Enhetstesting separat for kontrollere og direktiver.
• Vi kan også opptre ende-til-ende-testing av AngularJS, som testes fra et brukerperspektiv.

Introduksjon og installasjon av Karma-rammeverket

Karma er en testing av automatiseringsverktøy laget av AngularJS-teamet på GoogleDet første steget for å bruke Karma er å installere Karma. Karma installeres via npm (som er en pakkebehandler 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 --save-dev

hvori,

1. npm er kommandolinjeverktøyet for nodepakkebehandleren som brukes til å installere tilpassede moduler på enhver maskin. Det leveres med node.js.
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 -g karma-cli

• karma-cli brukes til å installere kommandolinjegrensesnittet for karma, som skal brukes til å skrive karma-kommandoene i kommandolinjegrensesnittet. -g-flagget installerer det globalt, slik at karma-kommandoen er tilgjengelig fra enhver mappe.

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: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Konfigurasjonsfilene ovenfor forteller karma runtime-motoren følgende ting

1. angular.js – Dette forteller karma at applikasjonen din er avhengig av kjernemodulene i AngularJS.
2. angular-mocks.js – Dette forteller karma at den skal bruke enhetstestingsfunksjonaliteten for AngularJS fra angular-mocks.js-filen.
3. Alle hovedapplikasjons- eller forretningslogikkfilene er til stede i lib-mappen til applikasjonen din.
4. 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.

Hva er Jasmine i AngularJS-enhetstesting?

Karma bestemmer hvor tester kjøres, mens Jasmine bestemmer hvordan de skrives. Jasmine er et atferdsdrevet spesifikasjonsrammeverk som leverer vokabularet som brukes i hvert eksempel på denne siden, og det er derfor karma-jasmine-adapteren er installert ved siden av løperen.

Jasmine bidrar med fire byggesteiner:

• beskrive(): Grupperer relaterte spesifikasjoner i en suite og godtar en lesbar beskrivelse av enheten som testes.
• den(): Deklarerer én enkelt spesifikasjon. Navnet bør angi oppførselen som verifiseres, i stedet for metoden som kalles.
• expect() med matchere: Sammenligner en faktisk verdi med en forventet. Vanlige samsvarsverdier inkluderer toBe, toEqual, toContain og toBeDefined.
• førHver() og etterHver(): Kjør oppsett og nedbryting før og etter hver spesifikasjon, noe som holder hver test uavhengig.

Jasmine tilbyr også spioner. En spion erstatter en ekte funksjon med en innspilt stand-in, slik at en kontroller kan testes uten å kalle et live HTTP-endepunkt. Fordi Jasmine ikke trenger noe DOM og ikke noe eget assertion-bibliotek, er kombinasjonen av Karma og Jasmine fortsatt den enkleste måten å kjøre AngularJS på. JavaSkriptenhetstester.

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-mocks-biblioteket via npm. Dette kan gjøres ved å kjøre linjen nedenfor i kommandolinjen.

npm install angular-mocks --save-dev

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/angular.js', 'lib/angular-mocks.js', 'lib/index.js', 'test/*.js']

• Parameteren 'filer' forteller i utgangspunktet Karma alle filene som kreves for å kjøre testene.
• Filene angular.js og angular-mocks.js er nødvendige 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 AngularJS-koden vår, som vil bli lagret som en Index.js-fil 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 = angular.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-funksjonen – Denne funksjonen brukes til å laste inn AngularJS-modulen vår kalt «sampleApp» før testkjøringen. Merk at dette er navnet på modulen i en index.js-fil.
2. $controller-objektet opprettes som et mockup-objekt for kontrolleren «AngularJSController» som er definert i vår index.js-fil. I alle typer enhetstesting representerer et mock-objekt et dummy-objekt som faktisk vil bli brukt til testingen. Dette mock-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 controller = $controller('AngularJSController', { $scope: $scope }); – Her sjekker vi om det finnes en kontroller med navnet 'AngularJSController'. 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-testrammeverket har også funksjonalitet for å teste tilpassede direktiver. Dette inkluderer malen.URL's 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. Opprett en 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 = angular.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 inn AngularJS-modulen vår kalt «sampleApp» før testkjøringen.
2. Tjenesten $compile brukes til å kompilere direktivet. Denne tjenesten er obligatorisk og må deklareres slik at AngularJS kan bruke den til å kompilere vårt tilpassede direktiv.
3. $rootScope er det primære omfanget til enhver AngularJS-applikasjon. Vi har sett $scope-objektet til kontrolleren i tidligere kapitler. Vel, $scope-objektet er underobjektet til $rootScope-objektet. Grunnen til at dette er deklarert her, er fordi vi gjør en endring i en faktisk HTML-tag i DOM-en via vårt tilpassede direktiv. Derfor må vi bruke $rootScope-tjenesten, som faktisk lytter eller vet når en endring skjer fra et HTML-dokument.
4. var element = $kompilere(" ”)($rootScope) – Dette brukes til å sjekke om direktivet vårt blir injisert som det skal. Direktivet er registrert med det lille bokstavnavnet guru99, så AngularJS matcher det lille elementet i markupen. Derfor brukes denne setningen til å utføre den kontrollen.
5. expect(element.html()).toContain(“Dette er AngularJS-testing”) – Dette brukes til å instruere expect-funksjonen om at den skal finne elementet (i vårt tilfelle h1-taggen) slik at det inneholder innerHTML-teksten til “Dette er 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("<guru99></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-applikasjoner

Rammeverket for karmatesting sammen med et rammeverk kalt Protractor har funksjonaliteten til å teste en webapplikasjon fra ende til ende.

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 = 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 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 proffentractor-biblioteket via npm. Dette kan gjøres ved å kjøre linjen nedenfor i kommandolinjen

npm install -g 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 proentractor-biblioteket og antar at AngularJS-applikasjonen vår (med koden vist ovenfor) kjører på nettstedet vårt 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 ut av koden 'ptutor in tutorial'. Elementet og by.repeater er spesielle nøkkelord levert av pro-en.tractor-bibliotek 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.

Karma vs. Jasmine vs. Protractor: Viktige forskjeller

De tre verktøyene som brukes på denne siden blir ofte forvekslet fordi de vises i samme kommandolinje. Hvert av dem opptar et annet lag i teststakken, noe tabellen nedenfor viser tydelig.

Kort sagt, Jasmine skriver testen, Karma utfører den, og Protractor utvider den samme Jasmine-syntaksen til en fullstendig gjengitt side.

Beste praksis for AngularJS-enhetstesting

Et lite sett med vaner holder en AngularJS-pakke rask og pålitelig etter hvert som applikasjonen vokser.

1. Test én enhet om gangen. Last bare inn modulen som testes i beforeEach, og simuler alle samarbeidspartnere slik at en feil peker mot én enkelt fil.
2. Ring aldri en ekte backend. Bruk $httpBackend-tjenesten fra angular-mocks for å returnere ferdiglagde svar. Testene kjøres deretter offline og gir identiske resultater på alle maskiner.
3. Hold spesifikasjonsnavnene atferdsmessige. Et navn som «returnerer 5 når kontrolleren initialiseres» leses bedre i en rapport enn «test1».
4. Skyll alltid nedbrytningssyklusen. Kall $rootScope.$digest() etter å ha endret omfangsdata, ellers oppdateres aldri bindinger og overvåkere, og påstander mislykkes av feil grunn.
5. Mål dekningen, men vurder den nøye. Legg til karma-dekning for å se uprøvde grener. Høy dekning med svake påstander skjuler fortsatt feil.
6. Kjør pakken i kontinuerlig integrasjon. Bruk en headless Chrome launcher slik at de samme spesifikasjonene kjøres på hver commit i stedet for bare på en utviklermaskin.

Ved å bruke disse reglene blir eksemplene ovenfor omgjort fra isolerte demonstrasjoner til et regresjonssikkerhetsnett for en eldre AngularJS-kodebase. For et større bilde, se AngularJS-veiledning serien.

Spørsmål og svar