Preizkus enote AngularJS: Vadnica Karme Jasmine

Kazalo:

Anonim

Ena najbolj briljantnih lastnosti programa Angular.JS je preizkuševalni vidik. Ko so razvijalci pri Googlu razvili AngularJS, so nenehno preizkušali in se prepričali, da je mogoče preizkusiti celotno ogrodje AngularJS.

V AngularJS se testiranje običajno izvaja s pomočjo Karme (ogrodja). Testiranje JS Angular je mogoče izvajati brez Karme, vendar ima Karma ogrodje tako izvrstno funkcionalnost za testiranje kode AngularJS, da je smiselno uporabljati ta okvir.

  • V AngularJS lahko izvedemo testiranje enot ločeno za krmilnike in direktive.
  • Izvedemo lahko tudi testiranje konca na koncu programa AngularJS, ki testira z vidika uporabnika.

V tej vadnici boste izvedeli-

  • Predstavitev in namestitev ogrodja Karma
    • Namestitev Karme
    • Konfiguracija ogrodja Karma
  • Testiranje krmilnikov AngularJS
  • Testiranje direktiv AngularJS
  • Preskušanje aplikacij AngularJS JS od konca do konca

Predstavitev in namestitev ogrodja Karma

Karma je orodje za avtomatizacijo testiranj, ki ga je ustvarila skupina Angular JS pri Googlu. Prvi korak za uporabo Karme je namestitev Karme. Karma se namesti prek npm (ki je upravitelj paketov, ki se uporablja za enostavno namestitev modulov na lokalni računalnik).

Namestitev Karme

Namestitev Karme prek npm poteka v dveh korakih.

Korak 1) Izvedite spodnjo vrstico znotraj ukazne vrstice

npm install karma karma-chrome-launcher karma-jasmine

Kamor

  1. npm je pripomoček ukazne vrstice za upravitelja paketov vozlišč, ki se uporablja za namestitev modulov po meri na kateri koli računalnik.
  2. Parameter namestitve prikaže pripomočku ukazne vrstice npm, da je potrebna namestitev.
  3. V ukazni vrstici so določene 3 knjižnice, ki so potrebne za delo s karmo
    • karma je jedrna knjižnica, ki se bo uporabljala za namene testiranja.
    • karma-chrome-launcher je ločena knjižnica, ki omogoča brskalniku chrome prepoznavanje ukazov karma.
    • karma-jasmin - namesti jasmin, ki je odvisen okvir za karmo.

Korak 2) Naslednji korak je namestitev pripomočka za ukazno vrstico karma. To je potrebno za izvajanje ukazov vrstice karma. Pripomoček karma line bo uporabljen za inicializacijo okolja karme za testiranje.

Če želite namestiti pripomoček za ukazno vrstico, zaženite spodnjo vrstico znotraj ukazne vrstice

npm install karma-cli

pri čemer

  1. karma-cli se uporablja za namestitev vmesnika ukazne vrstice za karmo, ki bo uporabljen za pisanje ukazov karma v vmesnik ukazne vrstice.

Konfiguracija ogrodja Karma

Naslednji korak je konfiguriranje karme, ki jo lahko naredite z ukazom

"karma -init"

Po izvedbi zgornjega koraka bo karma ustvarila datoteko karma.conf.js. Datoteka bo verjetno videti kot spodnji delček

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

Zgornje konfiguracijske datoteke karma runtime motorju sporočajo naslednje stvari

  1. 'Ime vaše prijave' - To bo nadomeščeno z imenom vaše prijave.
  2. ' Ime vaše aplikacije' / AngularJS / AngularJS.js ' - Karmi pove, da je vaša aplikacija odvisna od osnovnih modulov v AngularJS
  3. 'Ime vaše aplikacije' / AngularJS-mocks / AngularJS-mocks.js ' - Karmi pove, naj uporabi funkcionalnost enote za testiranje AngularJS iz datoteke Angular.JS-mocks.js.
  4. Vse glavne datoteke aplikacije ali poslovne logike so v mapi lib vaše aplikacije.
  5. Mapa preskusov bo vsebovala vse enote

Če želite preveriti, ali karma deluje, ustvarite datoteko z imenom Sample.js, vstavite spodnjo kodo in jo postavite v testni imenik.

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

Zgornja koda ima naslednje vidike

  1. Funkcija opis se uporablja za opis testa. V našem primeru svojemu testu damo opis "Vzorčni test".
  2. Funkcija 'it' se uporablja za poimenovanje testa. V našem primeru imenujemo svoj test kot "Pogoj je resničen". Ime testa mora biti smiselno.
  3. Kombinacija ključne besede 'pričakuj' in 'toBe' navaja, kakšna je pričakovana in dejanska vrednost rezultata testa. Če sta dejanska in pričakovana vrednost enaki, bo test opravil, sicer ne bo uspel.

Ko v ukaznem pozivu zaženete naslednjo vrstico, bo izvedla zgornjo preskusno datoteko

KARMA start

Spodnji izhod je vzet iz IDE Webstorm, v katerem so bili izvedeni zgornji koraki.

  1. Rezultat je na voljo v programu Karma Explorer v programu Webstorm. To okno prikazuje izvajanje vseh testov, ki so definirani v okviru karme.
  2. Tu lahko vidite, da je prikazan opis opravljenega testa, ki je "Vzorčni test."
  3. Nato lahko vidite, da se izvede sam test, ki ima ime "Pogoj je resničen".
  4. Upoštevajte, da imajo vsi testi zraven zeleno ikono "Ok", ki simbolizira, da so bili vsi testi opravljeni.

Testiranje krmilnikov AngularJS

Okvir za testiranje karme ima tudi funkcionalnost za preizkušanje krmilnikov od konca do konca. To vključuje testiranje predmeta $ scope, ki se uporablja v krmilnikih.

Oglejmo si primer, kako lahko to dosežemo.

V našem primeru

Najprej bi morali definirati krmilnik. Ta krmilnik bi izvajal spodnje korake

  1. Ustvarite spremenljivko ID in ji dodelite vrednost 5.
  2. Spremenljivki ID dodelite objekt $ range.

Naš test bo preizkusil obstoj tega krmilnika in preizkusil tudi, ali je spremenljivka ID predmeta $ scope nastavljena na 5.

Najprej moramo zagotoviti, da je izpolnjen naslednji predpogoj

    1. Namestite knjižnico Angular.JS-mocks preko npm. To lahko storite z izvajanjem spodnje vrstice v ukaznem pozivu
npm install Angular JS-mocks
  1. Nato je treba spremeniti datoteko karma.conf.js, da zagotovite, da so za test vključene prave datoteke. Spodnji segment prikazuje samo datoteke karma.conf.js, ki jih je treba spremeniti 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parameter 'files' v bistvu pove Karmi vse datoteke, ki so potrebne pri izvajanju testov.
  • Datoteka AngularJS.js in AngularJS-mocks.js sta potrebna za izvajanje preskusov enote AngularJS
  • Datoteka index.js bo vsebovala našo kodo za krmilnik
  • Preizkusna mapa bo vsebovala vse naše teste AngularJS

Spodaj je naša koda Angular.JS, ki bo shranjena kot datoteka Index.js v preskusni mapi naše aplikacije.

Spodnja koda naredi le naslednje stvari

  1. Ustvarite kotni JS modul, imenovan sampleApp
  2. Ustvarite krmilnik, imenovan AngularJSController
  3. Ustvari spremenljivko, imenovano ID, ji daj vrednost 5 in jo dodeli predmetu $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Ko je zgornja koda uspešno izvedena, je naslednji korak ustvarjanje testnega primera, ki bo zagotovil pravilno pisanje in izvajanje kode.

Koda za naš test bo prikazana spodaj.

Koda bo v ločeni datoteki ControllerTest.js, ki bo shranjena v testno mapo. Spodnja koda naredi le naslednje ključne stvari

  1. beforeEach funkcija - Ta funkcija se uporablja za nalaganje našega modula AngularJS.JS, imenovanega 'sampleApp' pred testnim zagonom. Upoštevajte, da je to ime modula v datoteki index.js.

  2. Objekt $ controller je ustvarjen kot model makete za krmilnik '' Angular JSController '', ki je definiran v naši datoteki index.js. Pri kakršnem koli preskušanju enote lažni objekt predstavlja lažni predmet, ki bo dejansko uporabljen za testiranje. Ta lažni objekt bo dejansko simuliral vedenje našega krmilnika.

  3. beforeEach (inject (function (_ $ controller_)) - Uporablja se za vbrizgavanje lažnega predmeta v našem testu, tako da se obnaša kot dejanski krmilnik.

  4. var $ scope = {}; To je lažni objekt, ki se ustvarja za objekt $ scope.

  5. var krmilnik = $ kontroler ('AngularJSController', {$ obseg: $ obseg}); - Tu preverjamo, ali obstaja krmilnik z imenom "Angular.JSController". Tukaj dodeljujemo tudi vse spremenljivke iz našega predmeta $ obseg v našem krmilniku v datoteki Index.js objektu $ obseg v naši testni datoteki

  6. Na koncu primerjamo $ scope.ID s 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);});});});

Zgornji test se bo zagnal v brskalniku karma in dal enak rezultat, kot je bil prikazan v prejšnji temi.

Testiranje direktiv AngularJS

Okvir za testiranje karme ima tudi funkcionalnost za testiranje direktiv po meri. To vključuje predloge URL, ki se uporabljajo v direktivah po meri.

Oglejmo si primer, kako lahko to dosežemo.

V našem primeru bomo najprej opredelili direktivo po meri, ki naredi naslednje stvari

  1. Ustvarite modul AngularJS, imenovan sampleApp
  2. Ustvarite direktivo po meri z imenom - Guru99
  3. Ustvarite funkcijo, ki vrne predlogo z oznako glave, ki prikazuje besedilo "To je testiranje AngularJS."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Ko je zgornja koda uspešno izvedena, je naslednji korak ustvarjanje testnega primera, ki bo zagotovil pravilno pisanje in izvajanje kode. Koda za naš test bo prikazana spodaj

Koda bo v ločeni datoteki z imenom DirectiveTest.js, ki bo shranjena v preskusni mapi. Spodnja koda naredi le naslednje ključne stvari

  1. beforeEach funkcija - Ta funkcija se uporablja za nalaganje našega kotnega JS modula, imenovanega 'sampleApp' pred testnim zagonom.

  2. Za prevajanje direktive se uporablja storitev $ compile. Ta storitev je obvezna in jo je treba prijaviti, da jo bo Angular.JS lahko uporabil za sestavljanje naše direktive po meri.

  3. $ Rootcope je primarni obseg katere koli aplikacije AngularJS.JS. Objekt $ scope krmilnika smo videli v prejšnjih poglavjih. No, objekt $ scope je podrejeni objekt predmeta $ rootcope. Razlog za to je tukaj, ker spreminjamo dejansko oznako HTML v DOM z našo direktivo po meri. Zato moramo uporabiti storitev $ rootcope, ki dejansko posluša ali ve, kdaj se zgodi kakšna sprememba znotraj dokumenta HTML.

  4. var element = $ compile (" ") - To se uporablja za preverjanje, ali se naša direktiva vbrizga, kot bi morala. Ime naše direktive po meri je Guru99, iz poglavja o navodilih po meri pa vemo, da bo, ko bo direktiva vstavljena v naš HTML, vstavljena kot ' '. Zato se ta izjava uporablja za to preverjanje.

  5. awact (element.html ()). toContain ("To je preizkušanje AngularJS") - S tem se ukaže funkciji pričakovanja, da mora najti element (v našem primeru oznako div), ki vsebuje besedilo innerHTML za "To je Testiranje AngularJS ".

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

Zgornji test se bo zagnal v brskalniku karma in dal enak rezultat, kot je bil prikazan v prejšnji temi.

Preskušanje aplikacij AngularJS JS od konca do konca

Okvir za testiranje karme skupaj z ogrodjem, imenovanim Protractor, omogoča funkcionalnost testiranja spletne aplikacije od konca do konca.

Torej ne gre samo za testiranje direktiv in krmilnikov, temveč tudi za preizkušanje vsega drugega, kar se lahko pojavi na strani HTML.

Oglejmo si primer, kako lahko to dosežemo.

V našem spodnjem primeru bomo imeli aplikacijo AngularJS, ki ustvari podatkovno tabelo z uporabo direktive ng-repeat.

  1. Najprej ustvarimo spremenljivko, imenovano "tutorial", in ji v enem koraku dodelimo nekaj parov ključ-vrednost. Vsak par ključ-vrednost bo uporabljen kot podatek pri prikazu tabele. Nato je spremenljivka vadnice dodeljena predmetu obsega, tako da je do nje mogoče dostopati iz našega pogleda.
  2. Za vsako vrstico podatkov v tabeli uporabljamo direktivo ng-repeat. Ta direktiva gre skozi vsak par ključ-vrednost v predmetu obsega vadnice s pomočjo spremenljivke ptutor.
  3. Nazadnje za prikaz tabele uporabljamo oznako skupaj s pari vrednosti ključev (ptutor.Name in ptutor.Description).


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