AngularJS Unit Testing: Karma Jasmine Tutorial

Inhoudsopgave:

Anonim

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

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

  • In AngularJS kunnen we Unit Testing afzonderlijk uitvoeren voor controllers en richtlijnen.
  • We kunnen ook end-of-end testen uitvoeren van AngularJS, dat is testen vanuit een gebruikersperspectief.

In deze tutorial leer je-

  • Introductie en installatie van Karma-framework
    • Installatie van Karma
    • Configuratie van het Karma-raamwerk
  • AngularJS-controllers testen
  • AngularJS-richtlijnen testen
  • End-to-end testen AngularJS JS-applicaties

Introductie en installatie van Karma-framework

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

Installatie van Karma

De installatie van Karma via npm gebeurt in twee stappen.

Stap 1) Voer de onderstaande regel uit vanaf de opdrachtregel

npm install karma karma-chrome-launcher karma-jasmine

Waarin

  1. npm is het opdrachtregelhulpprogramma voor de knooppuntpakketbeheerder die wordt gebruikt voor het installeren van aangepaste modules op elke machine.
  2. De installatieparameter geeft het opdrachtregelhulpprogramma npm de instructie dat installatie vereist is.
  3. Er zijn 3 bibliotheken die worden gespecificeerd in de opdrachtregel die nodig zijn om met karma te werken
    • karma is de kernbibliotheek die zal worden gebruikt voor testdoeleinden.
    • karma-chrome-launcher is een aparte bibliotheek waarmee karma-opdrachten kunnen worden herkend door de Chrome-browser.
    • karma-jasmine - Dit installeert jasmijn, wat een afhankelijk raamwerk is voor Karma.

Stap 2) De volgende stap is het installeren van het karma-opdrachtregelprogramma. Dit is vereist voor het uitvoeren van karmaregelopdrachten. Het hulpprogramma voor de karma-lijn 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,

  1. 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-raamwerk

De volgende stap is om karma te configureren, wat kan worden gedaan via het commando

"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 de volgende dingen

  1. 'Uw aanvraagnaam' - Deze wordt vervangen door de naam van uw aanvraag.
  2. ​
  3. 'Your application Name' / AngularJS-mocks / AngularJS-mocks.js ' - Dit vertelt karma om de Unit Testing-functionaliteit voor AngularJS uit het Angular.JS-mocks.js-bestand te gebruiken.
  4. Alle hoofdapplicatie- of bedrijfslogica-bestanden zijn aanwezig in de lib-map van uw applicatie.
  5. De map tests bevat alle unit-tests

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 testdirectory.

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

De bovenstaande code heeft de volgende aspecten

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

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

KARMA start

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

  1. De uitvoer komt in de Karma-verkenner binnen Webstorm. Dit venster toont de uitvoering van alle tests die zijn gedefinieerd in het karma-raamwerk.
  2. Hier kunt u zien dat de beschrijving van de uitgevoerde test wordt weergegeven, namelijk "Voorbeeldtest".
  3. Vervolgens kunt u zien dat de test zelf met de naam "Conditie is waar" wordt uitgevoerd.
  4. Merk op dat aangezien alle tests het groene "Ok" -pictogram naast het hebben, dat symboliseert dat alle tests zijn geslaagd.

AngularJS-controllers testen

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

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

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

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 voorwaarden is voldaan

    1. Installeer de Angular.JS-mocks-bibliotheek via npm. Dit kan worden gedaan door de onderstaande regel in de opdrachtprompt uit te voeren
npm install Angular JS-mocks
  1. De volgende is om het bestand karma.conf.js te wijzigen om ervoor te zorgen dat de juiste bestanden voor de test worden opgenomen. Het onderstaande segment toont alleen het bestanddeel van karma.conf.js dat moet worden gewijzigd 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • De parameter 'bestanden' vertelt Karma in feite alle bestanden die nodig zijn voor het uitvoeren van de tests.
  • Het AngularJS.js- en AngularJS-mocks.js-bestand zijn vereist om AngularJS-eenheidstests uit te voeren
  • Het bestand index.js zal onze code voor de controller bevatten
  • 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 alleen de volgende dingen

  1. Maak een Angular JS-module met de naam sampleApp
  2. Maak een controller met de naam AngularJSController
  3. Maak een variabele met de naam ID, geef deze een waarde van 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 testcase om ervoor te zorgen dat de code correct is geschreven en uitgevoerd.

De code voor onze test is zoals hieronder weergegeven.

De code staat in een apart bestand met de naam ControllerTest.js, dat in de testmap wordt geplaatst. De onderstaande code doet alleen de volgende belangrijke dingen

  1. beforeEach-functie - Deze functie wordt gebruikt om onze AngularJS.JS-module genaamd 'sampleApp' te laden voordat de test wordt uitgevoerd. Merk op dat dit de naam is van de module in een index.js-bestand.

  2. 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 eigenlijk het gedrag van onze controller.

  3. beforeEach (inject (function (_ $ controller_) - Dit wordt gebruikt om het nepobject in onze test te injecteren, zodat het zich gedraagt ​​als de daadwerkelijke controller.

  4. var $ scope = {}; Dit is een nepobject dat wordt gemaakt voor het $ scope-object.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Hier controleren we 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

  6. 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-testraamwerk heeft ook de functionaliteit om aangepaste richtlijnen te testen. Dit omvat de templateURL's die worden gebruikt in 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

  1. Maak een AngularJS-module met de naam sampleApp
  2. Maak een aangepaste richtlijn met de naam - Guru99
  3. Maak een functie die een sjabloon retourneert met een header-tag die de tekst "This is AngularJS Testing" weergeeft.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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

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

  1. beforeEach-functie - Deze functie wordt gebruikt om onze Angular JS-module genaamd 'sampleApp' te laden voordat de test wordt uitgevoerd.

  2. De $ compile-service 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 te compileren.

  3. De $ rootscope is het primaire bereik van elke AngularJS.JS-toepassing. We hebben het $ scope-object 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 verklaard, is omdat we een wijziging aanbrengen in een daadwerkelijke HTML-tag in de DOM via onze aangepaste richtlijn. Daarom moeten we de $ rootscope-service gebruiken die daadwerkelijk luistert of weet wanneer er een wijziging plaatsvindt vanuit een HTML-document.

  4. 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 wordt geïnjecteerd als ' '. Daarom wordt deze verklaring gebruikt om die controle uit te voeren.

  5. verwachten (element.html ()). toContain ("This is AngularJS Testing") - Dit wordt gebruikt om de verwachte functie te instrueren dat het het element (in ons geval de div-tag) moet vinden om de innerHTML-tekst van "This 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 directivevar element = $compile("")($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 AngularJS JS-applicaties

Het karma-testraamwerk samen met een raamwerk genaamd Protractor heeft de functionaliteit om een ​​webtoepassing end-to-end te testen.

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 onderstaande voorbeeld hebben we een AngularJS-applicatie die een gegevenstabel maakt met behulp van de ng-repeat-instructie.

  1. We maken eerst een variabele met de naam "tutorial" en wijzen deze in één stap enkele sleutel-waardeparen toe. Elk sleutel / waarde-paar 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.
  2. Voor elke rij met gegevens in de tabel gebruiken we de richtlijn ng-repeat. Deze instructie doorloopt elk sleutel / waarde-paar in het tutorialscope-object met behulp van de variabele ptutor.
  3. Ten slotte gebruiken we de tag samen met de sleutelwaardeparen (ptutor.Name en ptutor.Description) om de tabelgegevens weer te geven.


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