AngularJS Unit Testing: Karma Jasmine Tutorial

En af de mest geniale funktioner ved Angular.JS er Test aspekt. Da udviklerne hos Google udviklede AngularJS, blev de ved med at teste og sørgede for, at hele AngularJS-frameworket var testbart.

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

I AngularJS kan vi optræde Enhedstest separat for controllere og direktiver.
Vi kan også udføre end of end-test af AngularJS, som er test fra et brugerperspektiv.

Introduktion og installation af Karma framework

Karma er en test automatiseringsværktøj oprettet af Angular JS-teamet hos Google. Det første trin for 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 sker i en to-trins proces.

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

npm install karma karma-chrome-launcher karma-jasmine

hvori,

npm er kommandolinjeværktøjet til node-pakkehåndteringen, der bruges til at installere brugerdefinerede moduler på enhver maskine.
Installationsparameteren instruerer kommandolinjeværktøjet npm om, at installation er påkrævet.
Der er angivet 3 biblioteker i kommandolinjen, som er nødvendige for at arbejde med karma.

karma er kernebiblioteket, som vil blive brugt til testformål.
karma-chrome-launcher er et separat bibliotek, som 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 kommandolinjeværktøjet karma. Dette er nødvendigt for at udføre karma-linjekommandoer. Karmalinjeværktøjet vil blive brugt til at initialisere karmamiljøet til test.

For at installere kommandolinjeværktøjet skal du udføre nedenstående linje fra kommandolinjen

npm install karma-cli

hvori,

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

Konfiguration af Karma-rammen

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

"karma –init"

Efter at ovenstående trin er udført, vil karma oprette en karma.conf.js-fil. Filen vil sandsynligvis se ud som 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

'Dit applikationsnavn' – Dette vil blive erstattet af navnet på din ansøgning.
'Dit applikationsnavn'/AngularJS/AngularJS.js' – Dette fortæller karma, at din applikation afhænger af kernemodulerne i AngularJS
'Dit applikationsnavn'/AngularJS-mocks/AngularJS-mocks.js' – Dette fortæller karma at bruge Unit Testing-funktionaliteten til AngularJS fra Angular.JS-mocks.js-filen.
Alle hovedapplikations- eller forretningslogikfilerne er til stede i lib-mappen i din applikation.
Testmappen vil indeholde alle enhedstestene.

For at kontrollere, om karma virker, skal du oprette en fil kaldet Sample.js, indsæ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

Beskriv-funktionen bruges til at give en beskrivelse af testen. I vores tilfælde giver vi beskrivelsen 'Sample test' til vores test.
'it'-funktionen bruges til at give et navn til testen. I vores tilfælde angiver vi navnet på vores test som 'Betingelsen er sand'. Navnet på testen skal give mening.
Kombinationen af søgeordet 'forvent' og 'toBe' 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 mislykkes den.

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

KARMA start

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

Outputtet kommer i Karma explorer indeni Webstorm. Dette vindue viser udførelsen af alle test, som er defineret i karma-rammen.
Her kan du se, at beskrivelsen af den udførte test vises, som er "Sample test".
Dernæst kan du se, at selve testen, som har navnet "Condition is true", er udført.
Bemærk, at da alle tests har det grønne "Ok"-ikon ved siden af, hvilket symboliserer, at alle tests 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, som 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 ville udføre de nedenstående trin

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

Vores test vil teste eksistensen af denne controller og også teste for at se, om ID-variablen for $scope-objektet er sat til 5.

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

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

Det næste er at ændre filen karma.conf.js for at sikre, at de rigtige filer er inkluderet til testen. Nedenstående segment viser blot fildelen af karma.conf.js, som skal ændres

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

Parameteren 'filer' fortæller grundlæggende Karma alle de filer, der kræves til afviklingen af testene.
Filen AngularJS.js og AngularJS-mocks.js er påkrævet for at køre AngularJS-enhedstests
Filen index.js kommer til at indeholde vores kode til controlleren
Testmappen kommer til at indeholde alle vores AngularJS-tests

Nedenfor er vores Angular.JS-kode, som vil blive gemt som en fil Index.js i testmappen i vores applikation.

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

Opret en AngularJS modul kaldet sampleApp
Opret en controller kaldet AngularJSController
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 eksekveret med succes, ville næste trin være 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 ControllerTest.js, som vil blive placeret i testmappen. Nedenstående kode gør blot følgende vigtige ting

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.
$controller objektet er oprettet som et mockup objekt for controlleren "Angular JSController", som er defineret i vores index.js fil. I enhver form for enhedstest repræsenterer et falsk objekt et dummy-objekt, som faktisk vil blive brugt til testen. Dette falske objekt vil faktisk simulere vores controllers opførsel.
beforeEach(inject(function(_$controller_) – Dette bruges til at injicere det falske objekt i vores test, så det opfører sig som den faktiske controller.
var $omfang = {}; Dette er et falsk objekt, der oprettes for $scope objektet.
var controller = $controller('AngularJSController', { $scope: $scope }); – Her tjekker 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
Til sidst 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 vil køre i karma-browseren og give det samme beståelsesresultat, som blev vist i det forrige emne.

Test af AngularJS-direktiver

Karma-testrammen har også funktionaliteten til at teste brugerdefinerede direktiver. Dette inkluderer templateURL'erne, som 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, som gør følgende

Opret et AngularJS-modul kaldet sampleApp
Opret et brugerdefineret direktiv med navnet - Guru99
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: '<h1>This is AngularJS Testing</h1>'
    };
});

Når ovenstående kode er eksekveret med succes, ville næste trin være at oprette en testcase 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 DirektivTest.js, som vil blive placeret i testmappen. Nedenstående kode gør blot følgende vigtige ting

beforeEach funktion – Denne funktion bruges til at indlæse vores Angular JS-modul kaldet 'sampleApp' før testkørslen.
Tjenesten $compile bruges til at kompilere direktivet. Denne service er obligatorisk og skal deklareres, så Angular.JS kan bruge den til at kompilere vores brugerdefinerede direktiv.
$rootscope er det primære omfang af enhver AngularJS.JS-applikation. Vi har set $scope-objektet for controlleren i tidligere kapitler. Nå, $scope-objektet er det underordnede objekt af $rootscope-objektet. Grunden til, at dette erklæres 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 en ændring sker inde fra et HTML-dokument.
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 brugerdefinerede direktivkapitel, at når direktivet injiceres i vores HTML, vil det blive injiceret som ' '. Derfor bruges denne erklæring til at foretage denne kontrol.
expect(element.html()).toContain(“This is AngularJS Testing”) – Dette bruges til at instruere expect-funktionen om, at den skal finde elementet (i vores tilfælde div-tagget) til at indeholde den indreHTML-tekst af “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");
  });
});

Ovenstående test vil køre i karma-browseren og give det samme beståelsesresultat, som blev vist i det forrige emne.

End to End-testning af AngularJS JS-applikationer

Karma-testrammerne 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, som kan dukke op 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, som opretter en datatabel ved hjælp af ng-repeat-direktivet.

Vi opretter først en variabel kaldet "tutorial" og tildeler den nogle nøgleværdi-par i ét trin. Hvert nøgle-værdi-par vil blive brugt som data, når tabellen vises. Selvstudievariablen tildeles derefter scope-objektet, så det kan tilgås fra vores visning.
For hver række af data i tabellen bruger vi ng-repeat-direktivet. Dette direktiv gennemgår hvert nøgleværdi-par i selvstudiets scope-objekt ved at bruge variablen ptutor.
Endelig bruger vi tag sammen med nøgleværdiparrene (ptutor.Name og ptutor.Description) for at vise tabeldataene.

<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 ovenstående kode er eksekveret med succes, ville næste trin være at oprette en testcase for at sikre, at koden er skrevet og udført korrekt. Koden til vores test vil være som vist nedenfor

Vores test vil faktisk teste ng-repeat-direktivet og sikre, at det indeholder 3 rækker af data, som det skal fra ovenstående eksempel.

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

Installer vinkelmålerbiblioteket via npm. Dette kan gøres ved at udføre nedenstående linje i kommandoprompten

"npm install protractor"

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

Koden vil være i en separat fil kaldet CompleteTest.js , som vil blive placeret i testmappen. Nedenstående kode gør blot følgende vigtige ting

Browserfunktionen leveres af vinkelmålerbiblioteket og antager, at vores AngularJS-applikation (med koden vist ovenfor) kører på vores websteds URL - http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor i tutorial')); -Denne kodelinje henter faktisk ng-repeat-direktivet, som er udfyldt af koden 'ptutor in tutorial'. Elementet og by.repeater er specielle søgeord leveret af vinkelmålerbiblioteket, der giver os mulighed for at få detaljer om ng-repeat-direktivet.
forventer(liste.antal()).tilLige(3); – Til sidst bruger vi forventningsfunktionen til at se, at vi faktisk får 3 elementer udfyldt i vores tabel som følge af 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);  }); });

Ovenstående test vil køre i karma-browseren og give det samme beståelsesresultat, som blev vist i det forrige emne.

Resumé

Test i AngularJS opnås ved at bruge karma frameworket, et framework som er udviklet af Google selv.
Karma-rammen installeres ved hjælp af node-pakkehåndteringen. Nøglemodulerne, der skal installeres til grundlæggende test, er karma, karma-chrome-launcher, karma-jasmin og karma-cli.
Testene er skrevet i separate js-filer, som normalt opbevares i testmappen i din applikation. Placeringen af disse testfiler skal nævnes i en speciel konfigurationsfil kaldet karma.conf.js. Karma bruger denne konfigurationsfil, når alle tests udføres.
Karma kan også bruges til at teste controllere og brugerdefinerede direktiver.
For en ende til ende webtest skal en anden ramme kaldet vinkelmåler installeres via Node, pakkehåndtering. Denne ramme giver specielle metoder, som kan bruges til at teste alle elementerne på en HTML-side.

Du kan lide:

Introduktion og installation af Karma framework

Installation af Karma

Konfiguration af Karma-rammen

RELATEREDE ARTIKLER

Test af AngularJS-controllere

Test af AngularJS-direktiver

End to End-testning af AngularJS JS-applikationer

Resumé