AngularJS-eenheid testen: Karma Jasmine-zelfstudie

Een van de meest briljante functies van Angular.JS is de Testen aspect. Toen de ontwikkelaars bij Google AngularJS ontwikkelden, hielden ze het testen in gedachten en zorgden ze ervoor dat het hele AngularJS-framework testbaar was.

In AngularJS wordt het testen normaal gesproken uitgevoerd met behulp van Karma (framework). Angular JS-testen kunnen zonder Karma worden uitgevoerd, maar het Karma-framework heeft zo'n briljante functionaliteit voor het testen van AngularJS-code, dat het zinvol is om dit framework te gebruiken.

In AngularJS kunnen we presteren Testen van een eenheid afzonderlijk voor controllers en richtlijnen.
We kunnen ook end-of-end-testen van AngularJS uitvoeren, waarbij wordt getest vanuit een gebruikersperspectief.

Introductie en installatie van het Karma-framework

Karma is een automatiseringstool voor testen gemaakt door het Angular JS-team van Google. De eerste stap om Karma te gebruiken is het installeren van Karma. Karma wordt geïnstalleerd via npm (een pakketbeheerder die wordt gebruikt voor eenvoudige installatie van modules op een lokale machine).

Installatie van Karma

De installatie van Karma via npm gebeurt in een proces van twee stappen.

Stap 1) Voer de onderstaande regel uit vanaf de opdrachtregel

npm install karma karma-chrome-launcher karma-jasmine

Waarin,

npm is het opdrachtregelhulpprogramma voor de knooppuntpakketbeheerder dat wordt gebruikt voor het installeren van aangepaste modules op elke machine.
De install-parameter geeft aan het opdrachtregelprogramma npm aan dat installatie vereist is.
Er worden 3 bibliotheken gespecificeerd op de opdrachtregel die nodig zijn om met karma te werken.

karma is de kernbibliotheek die voor testdoeleinden zal worden gebruikt.
karma-chrome-launcher is een aparte bibliotheek waarmee karma-opdrachten door de Chrome-browser kunnen worden herkend.
karma-jasmijn – Hiermee wordt jasmijn geïnstalleerd, een afhankelijk raamwerk voor Karma.

Stap 2) De volgende stap is het installeren van het karma-opdrachtregelhulpprogramma. Dit is vereist voor het uitvoeren van karmalijnopdrachten. Het karmalijnhulpprogramma zal worden gebruikt om de karma-omgeving te initialiseren voor testen.

Om het opdrachtregelhulpprogramma te installeren, voert u de onderstaande regel uit vanaf de opdrachtregel

npm install karma-cli

waarin,

karma-cli wordt gebruikt om de opdrachtregelinterface voor karma te installeren, die zal worden gebruikt om de karma-opdrachten in de opdrachtregelinterface te schrijven.

Configuratie van het Karma-framework

De volgende stap is het configureren van karma, wat gedaan kan worden via de opdracht

"karma –init"

Nadat de bovenstaande stap is uitgevoerd, zal karma een karma.conf.js-bestand maken. Het bestand zal er waarschijnlijk uitzien als het onderstaande fragment

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

De bovenstaande configuratiebestanden vertellen de karma runtime engine het volgende

'Uw sollicitatienaam' – Deze wordt vervangen door de naam van uw aanvraag.
'Uw applicatienaam '/AngularJS/AngularJS.js' – Dit vertelt karma dat uw applicatie afhankelijk is van de kernmodules in AngularJS
'Uw applicatienaam'/AngularJS-mocks/AngularJS-mocks.js' – Dit vertelt Karma om de Unit Testing-functionaliteit voor AngularJS uit het Angular.JS-mocks.js-bestand te gebruiken.
Alle hoofdtoepassings- of bedrijfslogicabestanden zijn aanwezig in de map lib van uw toepassing.
De testmap bevat alle unittests.

Om te controleren of karma werkt, maakt u een bestand met de naam Sample.js, voert u de onderstaande code in en plaatst u deze in de testmap.

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

De bovenstaande code heeft de volgende aspecten

De beschrijven functie wordt gebruikt om een beschrijving van de test te geven. In ons geval geven wij de omschrijving 'Voorbeeldtest' aan onze test.
De 'it'-functie wordt gebruikt om de test een naam te geven. In ons geval geven we de naam van onze test als 'Voorwaarde is waar'. De naam van de test moet betekenisvol zijn.
De combinatie van het trefwoord 'expect' en 'toBe' geeft aan wat de verwachte en werkelijke waarde van het testresultaat is. Als de werkelijke en de verwachte waarde hetzelfde zijn, zal de test slagen, anders mislukt deze.

Wanneer u de volgende regel uitvoert bij de opdrachtprompt, wordt het bovenstaande testbestand uitgevoerd

KARMA start

De onderstaande uitvoer is afkomstig van de IDE Webstorm waarin bovenstaande stappen zijn uitgevoerd.

De uitvoer komt binnen in de Karma-verkenner Webstorm. Dit venster toont de uitvoering van alle tests die in het karma-raamwerk zijn gedefinieerd.
Hier kunt u zien dat de beschrijving van de uitgevoerde test wordt weergegeven, namelijk “Voorbeeldtest”.
Vervolgens kunt u zien dat de test zelf, die de naam “Voorwaarde is waar” heeft, wordt uitgevoerd.
Houd er rekening mee dat bij alle tests het groene pictogram 'Ok' ernaast staat, wat symboliseert dat alle tests zijn geslaagd.

AngularJS-controllers testen

Het karmatestframework heeft ook de functionaliteit om Controllers van begin tot eind te testen. Dit omvat het testen van het object $scope dat binnen Controllers wordt gebruikt.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

In ons voorbeeld

We zouden eerst een controller moeten definiëren. Deze controller zou de onderstaande stappen uitvoeren

Maak een ID-variabele en wijs hieraan de waarde 5 toe.
Wijs de ID-variabele toe aan het object $scope.

Onze test zal het bestaan van deze controller testen en ook testen of de ID-variabele van het $scope-object is ingesteld op 5.

Eerst moeten we ervoor zorgen dat aan de volgende voorwaarde is voldaan

Installeer de Angular.JS-mocks-bibliotheek via npm. Dit kunt u doen door de onderstaande regel in de opdrachtprompt uit te voeren

npm install Angular JS-mocks

Vervolgens moet u het karma.conf.js-bestand aanpassen om ervoor te zorgen dat de juiste bestanden voor de test worden opgenomen. Het onderstaande segment toont alleen het bestandengedeelte van karma.conf.js dat moet worden gewijzigd

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

De parameter 'files' vertelt Karma feitelijk alle bestanden die nodig zijn voor het uitvoeren van de tests.
De bestanden AngularJS.js en AngularJS-mocks.js zijn vereist om AngularJS-eenheidstests uit te voeren
Het index.js-bestand bevat onze code voor de controller
De testmap zal al onze AngularJS-tests bevatten

Hieronder vindt u onze Angular.JS-code die wordt opgeslagen als een bestand Index.js in de testmap van onze applicatie.

De onderstaande code doet gewoon het volgende

Maak een AngularJS-module genaamd voorbeeldApp
Maak een controller met de naam AngularJSController
Maak een variabele met de naam ID, geef deze de waarde 5 en wijs deze toe aan het $scope-object

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

Zodra de bovenstaande code met succes is uitgevoerd, is de volgende stap het maken van een Testgeval om ervoor te zorgen dat de code correct is geschreven en uitgevoerd.

De code voor onze test is zoals hieronder weergegeven.

De code zal in een apart bestand staan genaamd ControllerTest.js, dat in de testmap zal worden geplaatst. De onderstaande code doet alleen de volgende belangrijke dingen

beforeEach functie – Deze functie wordt gebruikt om onze AngularJS.JS-module genaamd 'sampleApp' te laden vóór de testuitvoering. Merk op dat dit de naam is van de module in een index.js-bestand.
Het $controller-object is gemaakt als een mockup-object voor de controller “Angular JSController” die is gedefinieerd in ons index.js-bestand. Bij elke vorm van Unit Testing vertegenwoordigt een nepobject een dummy-object dat daadwerkelijk voor het testen zal worden gebruikt. Dit nepobject simuleert feitelijk het gedrag van onze controller.
beforeEach(inject(function(_$controller_)) – Dit wordt gebruikt om het nepobject in onze test te injecteren, zodat het zich gedraagt als de daadwerkelijke controller.
var $scope = {}; Dit is een nepobject dat wordt gemaakt voor het $scope-object.
var controller = $controller('AngularJSController', { $scope: $scope }); – Hier controleren we op het bestaan van een controller met de naam 'Angular.JSController'. Hier wijzen we ook alle variabelen van ons $scope-object in onze controller in het Index.js-bestand toe aan het $scope-object in ons testbestand
Ten slotte vergelijken we de $scope.ID met 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);
        });
    });
});

De bovenstaande test wordt uitgevoerd in de karmabrowser en geeft hetzelfde resultaat als in het vorige onderwerp.

AngularJS-richtlijnen testen

Het karma-testframework heeft ook de functionaliteit om aangepaste richtlijnen te testen. Dit omvat de templateURL's die worden gebruikt binnen aangepaste richtlijnen.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

In ons voorbeeld zullen we eerst een aangepaste richtlijn definiëren die de volgende dingen doet

Maak een AngularJS-module met de naam sampleApp
Maak een aangepaste richtlijn met de naam – Guru99
Maak een functie die een sjabloon retourneert met een headertag die de tekst 'Dit is AngularJS Testing' weergeeft.

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

Zodra de bovenstaande code met succes is uitgevoerd, is de volgende stap het maken van een testcase om er zeker van te zijn dat de code correct is geschreven en uitgevoerd. De code voor onze test is zoals hieronder weergegeven

De code zal in een apart bestand staan met de naam DirectiveTest.js, dat in de testmap zal worden geplaatst. De onderstaande code doet alleen de volgende belangrijke dingen

beforeEach functie – Deze functie wordt gebruikt om onze Angular JS-module genaamd 'sampleApp' te laden vóór de testrun.
De service $compile wordt gebruikt om de richtlijn te compileren. Deze service is verplicht en moet worden gedeclareerd zodat Angular.JS deze kan gebruiken om onze aangepaste richtlijn samen te stellen.
De $rootscope is het primaire bereik van elke AngularJS.JS-applicatie. We hebben het object $scope van de controller in eerdere hoofdstukken gezien. Welnu, het $scope-object is het onderliggende object van het $rootscope-object. De reden dat dit hier wordt vermeld, is omdat we via onze aangepaste richtlijn een wijziging aanbrengen in een daadwerkelijke HTML-tag in de DOM. Daarom moeten we de $rootscope-service gebruiken die daadwerkelijk luistert of weet wanneer er een verandering plaatsvindt vanuit een HTML-document.
var-element = $compile(“ ”) – Dit wordt gebruikt om te controleren of onze richtlijn wordt geïnjecteerd zoals het hoort. De naam van onze aangepaste richtlijn is Guru99, en we weten uit ons hoofdstuk over aangepaste richtlijnen dat wanneer de richtlijn in onze HTML wordt geïnjecteerd, deze zal worden geïnjecteerd als ' '. Daarom wordt deze verklaring gebruikt om die controle uit te voeren.
verwachten(element.html()).toContain(“Dit is AngularJS Testing”) – Dit wordt gebruikt om de verwachtingsfunctie te instrueren dat deze het element (in ons geval de div-tag) moet vinden om de innerHTML-tekst van “Dit is AngularJS-testen”.

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

De bovenstaande test wordt uitgevoerd in de karmabrowser en geeft hetzelfde resultaat als in het vorige onderwerp.

End-to-end testen van AngularJS JS-applicaties

Het karma-testframework, samen met een raamwerk genaamd Protractor, heeft de functionaliteit van het end-to-end testen van een webapplicatie.

Het is dus niet alleen het testen van richtlijnen en controllers, maar ook het testen van al het andere dat op een HTML-pagina kan verschijnen.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

In ons voorbeeld hieronder hebben we een AngularJS-applicatie die een gegevenstabel maakt met behulp van de ng-repeat-richtlijn.

We maken eerst een variabele met de naam “tutorial” en wijzen deze in één stap enkele sleutel-waardeparen toe. Elk sleutel-waardepaar wordt gebruikt als gegevens bij het weergeven van de tabel. De tutorialvariabele wordt vervolgens toegewezen aan het scope-object, zodat deze vanuit onze weergave toegankelijk is.
Voor elke rij met gegevens in de tabel gebruiken we de ng-repeat-richtlijn. Deze richtlijn doorloopt elk sleutel-waardepaar in het tutorial-scope-object met behulp van de variabele ptutor.
Tenslotte maken we gebruik van de tag samen met de sleutelwaardeparen (ptutor.Name en ptutor.Description) om de tabelgegevens weer te geven.

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

Onze test gaat feitelijk de ng-repeat-richtlijn testen en ervoor zorgen dat deze 3 rijen met gegevens bevat zoals zou moeten uit het bovenstaande voorbeeld.

Eerst moeten we ervoor zorgen dat aan de volgende voorwaarde is voldaan

Installeer de gradenboogbibliotheek via npm. Dit kunt u doen door de onderstaande regel in de opdrachtprompt uit te voeren

"npm install protractor"

De code voor onze test is zoals hieronder weergegeven.

De code zal in een apart bestand staan met de naam CompleteTest.js , dat in de testmap zal worden geplaatst. De onderstaande code doet alleen de volgende belangrijke dingen

De browserfunctie wordt geleverd door de gradenboogbibliotheek en gaat ervan uit dat onze AngularJS-applicatie (met de hierboven weergegeven code) draait op de URL van onze site – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Deze regel code haalt feitelijk de ng-repeat-richtlijn op die is gevuld met de code 'ptutor in tutorial'. Het element en by.repeater zijn speciale trefwoorden die worden geleverd door de protractor-bibliotheek waarmee we details van de ng-repeat-richtlijn kunnen ophalen.
verwachten(lijst.telling()).toEqual(3); – Ten slotte gebruiken we de functie Expect om te zien dat we inderdaad drie items in onze tabel krijgen ingevuld als resultaat van de ng-repeat-richtlijn.

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

De bovenstaande test wordt uitgevoerd in de karmabrowser en geeft hetzelfde resultaat als in het vorige onderwerp.

Samenvatting

Het testen in AngularJS gebeurt door gebruik te maken van het karma framework, een framework dat door Google zelf is ontwikkeld.
Het karma-framework wordt geïnstalleerd met behulp van de knooppuntpakketbeheerder. De belangrijkste modules die moeten worden geïnstalleerd voor basistesten zijn karma, karma-chrome-launcher, karma-jasmine en karma-cli.
De tests worden in aparte js-bestanden geschreven, die normaal gesproken in de testmap van uw applicatie worden bewaard. De locatie van deze testbestanden moet worden vermeld in een speciaal configuratiebestand genaamd karma.conf.js. Karma gebruikt dit configuratiebestand bij het uitvoeren van alle tests.
Karma kan ook worden gebruikt om controllers en aangepaste richtlijnen te testen.
Voor een end-to-end webtest moet een ander raamwerk genaamd protractor worden geïnstalleerd via de Node, pakketbeheerder. Dit raamwerk biedt speciale methoden die kunnen worden gebruikt om alle elementen op een HTML-pagina te testen.

AngularJS-eenheid testen: Karma Jasmine-zelfstudie

Introductie en installatie van het Karma-framework

Installatie van Karma

Configuratie van het Karma-framework

AngularJS-controllers testen

AngularJS-richtlijnen testen

End-to-end testen van AngularJS JS-applicaties

Samenvatting

Vat dit bericht samen met:

Schrijf je in voor de nieuwsbrief

Introductie en installatie van het Karma-framework

Installatie van Karma

Configuratie van het Karma-framework

GERELATEERDE ARTIKELEN

AngularJS-controllers testen

AngularJS-richtlijnen testen

End-to-end testen van AngularJS JS-applicaties

Samenvatting

Vat dit bericht samen met:

Schrijf je in voor de nieuwsbrief