AngularJS üksuse testimine: Karma Jasmiini õpetus

Üks Angular.JS-i kõige säravamaid omadusi on testimise aspekt. Kui Google'i arendajad arendasid AngularJSi, pidasid nad silmas testimist ja veendusid, et kogu AngularJS raamistik oleks testitav.

AngularJS-is viiakse testimine tavaliselt läbi Karma (raamistik) abil. Nurga JS testimist saab läbi viia ilma Karmata, kuid Karma raamistikul on AngularJS koodi testimiseks nii suurepärane funktsionaalsus, et on mõistlik seda raamistikku kasutada.

• Rakenduses AngularJS saame üksuste testimise eraldi läbi viia kontrollerite ja käskkirjade jaoks.
• Samuti saame läbi viia AngularJS-i lõpptestimise, mis testib kasutaja vaatenurgast.

Selles õpetuses saate teada

• Karma raamistiku tutvustus ja installimine
• Karma installatsioon
• Karma raamistiku seadistamine
• NurgaJS kontrollerite testimine
• AngularJS-i direktiivide testimine
• AngularJS JS-i rakenduste testimine lõpuni

Karma raamistiku tutvustus ja installimine

Karma on Google'i Angular JS meeskonna loodud testimisautomaatika tööriist. Karma kasutamise esimene samm on Karma installimine. Karma installitakse npm kaudu (mis on paketihaldur, mida kasutatakse moodulite hõlpsaks paigaldamiseks kohalikku masinasse).

Karma installatsioon

Karma installimine npm kaudu toimub kaheastmelisena.

Samm 1) Käivitage allpool olev rida käsurealt

npm install karma karma-chrome-launcher karma-jasmine

Kusjuures

1. npm on sõlmpaketi halduri käsurea utiliit, mida kasutatakse kohandatud moodulite installimiseks mis tahes masinasse.
2. Installimisparameeter annab käsurea utiliidile npm käsu installida.
3. Karmaga töötamiseks on käsureal määratud 3 teeki
   • karma on põhiraamatukogu, mida kasutatakse testimise eesmärgil.
   • karma-chrome-launcher on eraldi teek, mis võimaldab kroomibrauseril karma käske ära tunda.
   • karma-jasmiin - see installib jasmiini, mis on Karma sõltuv raamistik.

2. samm. Järgmine samm on karma käsurea utiliidi installimine. See on vajalik karma rea ​​käskude täitmiseks. Karmaliini utiliiti kasutatakse karmakeskkonna initsialiseerimiseks testimiseks.

Käsurea utiliidi installimiseks käivitage järgmine rida käsurealt

npm install karma-cli

kus

1. karma-cli kasutatakse karma käsurea liidese installimiseks, mida kasutatakse karma käskude kirjutamiseks käsurea liidesesse.

Karma raamistiku seadistamine

Järgmine samm on karma seadistamine, mida saab teha käsu kaudu

"karma -init"

Pärast ülaltoodud toimingu tegemist loob karma faili karma.conf.js. Fail näeb tõenäoliselt välja nagu allpool näidatud jupp

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

Ülaltoodud konfiguratsioonifailid ütlevad karma käitusaja mootorile järgmised asjad

1. 'Teie rakenduse nimi' - see asendatakse teie rakenduse nimega.
2. ' Teie rakenduse nimi' / AngularJS / AngularJS.js ' - see ütleb karmale, et teie rakendus sõltub AngularJS-i põhimoodulitest
3. 'Teie rakenduse nimi' / AngularJS-mocks / AngularJS-mocks.js ' - see käsib karmal kasutada AngularJS-i jaoks ühikutestimise funktsiooni failist Angular.JS-mocks.js.
4. Kõik peamised rakenduse või äriloogika failid asuvad teie rakenduse kaustas lib.
5. Testide kaust sisaldab kõiki üksuste teste

Karma toimimise kontrollimiseks looge fail nimega Sample.js, sisestage allolev kood ja asetage see testkataloogi.

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

Ülaltoodud koodil on järgmised aspektid

1. Funktsiooni kirjeldus kasutatakse testi kirjelduse andmiseks. Meie puhul anname oma testile kirjelduse „Proovitesti”.
2. Testile nime andmiseks kasutatakse funktsiooni 'it'. Meie puhul anname oma testi nimeks "Tingimus on tõene". Testi nimi peab olema tähendusrikas.
3. Märksõnade „oodata” ja „toBe” kombinatsioon annab teada, milline on testi tulemuse eeldatav ja tegelik väärtus. Kui tegelik ja eeldatav väärtus on sama, siis katse läheb muidu läbi.

Kui täidate käsureal järgmise rea, täidab see ülaltoodud testfaili

KARMA start

Allpool toodud väljund on võetud IDE veebitormist, milles ülaltoodud toimingud viidi läbi.

1. Väljund tuleb Karst Exploreris Webstormi sees. See aken näitab kõigi karma raamistikus määratletud testide sooritamist.
2. Siin näete, et kuvatakse täidetud testi kirjeldus, mis on "Proovi test".
3. Järgmisena näete, et käivitatakse test ise, mille nimi on "Tingimus on tõene".
4. Pange tähele, et kuna kõigi testide kõrval on roheline ikoon Ok, mis sümboliseerib kõigi testide läbimist.

NurgaJS kontrollerite testimine

Karmatestimise raamistikul on ka funktsioon kontrollerite testimiseks otsast lõpuni. See hõlmab kontrollerites kasutatava objekti $ scope testimist.

Vaatame näidet selle saavutamiseks.

Meie näites

Kõigepealt oleks vaja määratleda kontroller. See kontroller teostaks allpool nimetatud toiminguid

1. Looge ID muutuja ja määrake sellele väärtus 5.
2. Määrake ID-muutuja objektile $ scope.

Meie testiga kontrollitakse selle kontrolleri olemasolu ja kontrollitakse ka, kas objekti $ scope ID muutujaks on seatud 5.

Kõigepealt peame tagama järgmise eelduse olemasolu

1. Paigaldage Angular.JS-pilkekogu npm kaudu. Seda saab teha, käivitades käsureal allpool oleva rea

npm install Angular JS-mocks

1. Järgmine on faili karma.conf.js muutmine, et tagada testile õigete failide lisamine. Allpool olev segment näitab lihtsalt faili karma.conf.js osa, mida tuleb muuta

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

• Parameeter 'failid' ütleb Karmale põhimõtteliselt kõik testide läbiviimiseks vajalikud failid.
• AngularJS-i üksuste testide käivitamiseks on vaja faile AngularJS.js ja AngularJS-mocks.js
• Fail index.js hakkab sisaldama meie kontrolleri koodi
• Testkaust hakkab sisaldama kõiki meie AngularJS teste

Allpool on meie Angular.JS-kood, mis salvestatakse failina Index.js meie rakenduse testkausta.

Allolev kood teeb lihtsalt järgmisi asju

1. Looge nurgeline JS-moodul nimega sampleApp
2. Looge kontroller nimega AngularJSController
3. Looge muutuja nimega ID, andke sellele väärtus 5 ja määrake see objektile $ scope

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

Kui ülaltoodud kood on edukalt täidetud, oleks järgmine samm luua testjuhtum, et tagada koodi nõuetekohane kirjutamine ja täitmine.

Meie testi kood on selline, nagu allpool näidatud.

Kood asub eraldi failis nimega ControllerTest.js, mis paigutatakse testkausta. Allolev kood teeb lihtsalt järgmisi võtmetähtsusega asju

1. beforeEach funktsioon - seda funktsiooni kasutatakse enne testisõitu meie AngularJS.JS mooduli nimega 'sampleApp' laadimiseks. Pange tähele, et see on faili index.js mooduli nimi.

2. Objekt $ controller luuakse kontrolleri '' Nurga JSControlleri '' maketiobjektina, mis on määratletud meie failis index.js. Igasuguses üksuste testimises tähistab pilkobjekt näivobjekti, mida testimisel tegelikult kasutatakse. See mõnitatav objekt simuleerib tegelikult meie kontrolleri käitumist.

3. beforeEach (inject (function (_ $ controller_) - seda kasutatakse meie katse pilkobjekti sisestamiseks, nii et see käituks nagu tegelik kontroller.

4. var $ ulatus = {}; See on maketobjekt, mis luuakse objekti $ scope jaoks.

5. var kontroller = $ kontroller ('AngularJSController', {$ ulatus: $ ulatus}); - Siin kontrollime kontrolleri olemasolu, mis kannab nime "Nurga all. JSC-kontroller". Siin omistame ka kõik muutujad meie kontrolleri failis Index.js failis olevast $ scope objektist meie testfaili objektile $ scope

6. Lõpuks võrdleme $ scope.ID-d 5-ga

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

Ülaltoodud test käivitatakse karma brauseris ja annab sama läbimistulemuse, nagu oli näidatud eelmises teemas.

AngularJS-i direktiivide testimine

Karmatestimise raamistikul on funktsionaalsus ka kohandatud direktiivide testimiseks. See hõlmab malli URL-e, mida kasutatakse kohandatud direktiivides.

Vaatame näidet selle saavutamiseks.

Oma näites määratleme kõigepealt kohandatud direktiivi, mis teeb järgmisi asju

1. Looge AngularJS moodul nimega sampleApp
2. Looge kohandatud direktiiv nimega - Guru99
3. Looge funktsioon, mis tagastab malli päisemärgendiga, mis kuvab teksti "This is AngularJS Testing".

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

Kui ülaltoodud kood on edukalt täidetud, oleks järgmine samm luua testjuhtum, et kood oleks õigesti kirjutatud ja täidetud. Meie testi kood on selline, nagu allpool näidatud

Kood asub eraldi failis nimega DirectorTest.js, mis paigutatakse testkausta. Allolev kood teeb lihtsalt järgmisi võtmetähtsusega asju

1. beforeEach funktsioon - seda funktsiooni kasutatakse enne proovisõitu meie nurk-JS-mooduli nimega 'sampleApp' laadimiseks.

2. Teenust $ compile kasutatakse direktiivi koostamiseks. See teenus on kohustuslik ja see tuleb deklareerida, et Angular.JS saaks seda kasutada meie kohandatud direktiivi koostamiseks.

3. $ Rootcope on kõigi AngularJS.JS-i rakenduste peamine ulatus. Kontrolleri $ scope objekti oleme näinud varasemates peatükkides. Noh, $ scope objekt on $ rootcope objekti alaobjekt. Põhjus, miks see siin deklareeritakse, on see, et muudame DOM-is oma kohandatud direktiivi kaudu tegelikku HTML-märgendit. Seega peame kasutama teenust $ rootscope, mis tegelikult kuulab või teab, kui HTML-dokumendis toimuvad muudatused.

4. var element = $ compile (" ") - seda kasutatakse selleks, et kontrollida, kas meie direktiivi süstitakse nii, nagu peaks. Meie kohandatud direktiivi nimi on Guru99 ja meie tavadirektiivide peatükist teame, et kui direktiiv sisestatakse meie HTML-i, süstitakse see kui " ". Seetõttu kasutatakse seda väidet selle kontrolli tegemiseks.

5. oodata (element.html ()). toContain ("See on AngularJS testimine") - seda kasutatakse funktsiooni oodata juhendamiseks, et see peaks leidma elemendi (meie juhul div sildi) sisaldama sisemist HTML NurgaJS testimine ".

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

Ülaltoodud test käivitatakse karma brauseris ja annab sama läbimistulemuse, nagu oli näidatud eelmises teemas.

AngularJS JS-i rakenduste testimine lõpuni

Karma testimise raamistikul koos Protractori nimelise raamistikuga on veebirakenduste testimine läbi otsade.

Nii et see pole mitte ainult direktiivide ja kontrollerite testimine, vaid ka kõige muu testimine, mis võib HTML-lehel ilmuda.

Vaatame näidet selle saavutamiseks.

Meie allpool toodud näites on meil AngularJS-rakendus, mis loob andmetabeli, kasutades direktiivi ng-repeat.

1. Kõigepealt loome muutuja nimega "õpetus" ja määrame sellele ühe sammuna mõned võtme-väärtuse paarid. Iga võtme-väärtuse paari kasutatakse tabeli kuvamisel andmetena. Seejärel määratakse õpetuse muutuja ulatusobjektile, nii et sellele pääsete juurde meie vaates.
2. Iga tabelirea andmete jaoks kasutame ng-repeat käsku. See direktiiv läbib õpetuse ulatusobjekti kõik võtme-väärtuste paarid muutuja ptutor abil.
3. Lõpuks kasutame tabeli andmete kuvamiseks märgendit koos võtmeväärtuste paaridega (ptutor.Name ja ptutor.Description).

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