„AngularJS Unit Testing“: „Karma Jasmine“ pamoka

Viena iš ryškiausių „Angular.JS“ savybių yra testavimo aspektas. Kai „Google“ kūrėjai sukūrė „AngularJS“, jie galvojo apie bandymus ir įsitikino, kad galima išbandyti visą „AngularJS“ sistemą.

„AngularJS“ bandymai paprastai atliekami naudojant „Karma“ (karkasą). Kampinis JS testavimas gali būti atliekamas be „Karma“, tačiau „Karma“ sistema turi tokią puikią funkciją tikrinti „AngularJS“ kodą, kad yra prasminga naudoti šią sistemą.

  • Naudodami „AngularJS“, mes galime atskirai atlikti valdiklių ir direktyvų testavimą.
  • Mes taip pat galime atlikti „AngularJS“ pabaigos testavimą, kuris yra testavimas iš vartotojo perspektyvos.

Šioje pamokoje sužinosite

  • „Karma“ sistemos įvadas ir diegimas
    • „Karmos“ įrengimas
    • „Karma“ sistemos konfigūracija
  • „AngularJS“ valdiklių testavimas
  • „AngularJS“ direktyvų testavimas
  • „End to End“ testavimas „AngularJS JS“ programose

„Karma“ sistemos įvadas ir diegimas

„Karma“ yra „Google“ „Angular JS“ komandos sukurtas testavimo automatikos įrankis. Pirmasis „Karma“ naudojimo žingsnis yra įdiegti „Karma“. „Karma“ įdiegiama per „npm“ (tai yra paketų tvarkyklė, naudojama lengvam modulių diegimui vietinėje mašinoje).

„Karmos“ įrengimas

„Karma“ diegimas per npm atliekamas dviem etapais.

1 žingsnis. Vykdykite žemiau esančią eilutę iš komandinės eilutės

npm install karma karma-chrome-launcher karma-jasmine

Kur

  1. npm yra mazgo paketų tvarkyklės komandinės eilutės įrankis, naudojamas diegiant pasirinktinius modulius bet kurioje mašinoje.
  2. Įdiegimo parametras nurodo komandų eilutės „npm“, kad reikia įdiegti.
  3. Komandinėje eilutėje nurodomos 3 bibliotekos, reikalingos darbui su karma
    • karma yra pagrindinė biblioteka, kuri bus naudojama bandymams.
    • „karma-chrome-launcher“ yra atskira biblioteka, leidžianti atpažinti karmos komandas chromo naršyklėje.
    • karma-jazminas - tai įdiegia jazminą, kuris yra priklausoma karmos sistema.

2 žingsnis) Kitas žingsnis yra įdiegti karmos komandinės eilutės įrankį. Tai reikalinga vykdant karmos linijos komandas. Karmos linijos įrankis bus naudojamas inicijuojant karmos aplinką bandymams.

Norėdami įdiegti komandinės eilutės įrankį, vykdykite žemiau esančią eilutę iš komandinės eilutės

npm install karma-cli

kur,

  1. karma-cli naudojama įdiegti karmos komandinės eilutės sąsają, kuri bus naudojama karmos komandoms rašyti komandinės eilutės sąsajoje.

„Karma“ sistemos konfigūracija

Kitas žingsnis - sukonfigūruoti karmą, kurią galima padaryti naudojant komandą

"karma -init"

Atlikus aukščiau nurodytą veiksmą, karma sukurs failą karma.conf.js. Failas tikriausiai atrodys kaip žemiau pateiktas fragmentas

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

Pirmiau pateikti konfigūracijos failai nurodo karmos vykdymo varikliui šiuos dalykus

  1. „Jūsų programos pavadinimas“ - tai bus pakeista jūsų programos pavadinimu.
  2. „ Jūsų programos pavadinimas“ / „AngularJS“ / „AngularJS.js“ - tai rodo karmą, kad jūsų programa priklauso nuo pagrindinių „AngularJS“ modulių
  3. „Jūsų programos pavadinimas“ / „AngularJS-mocks“ / „AngularJS-mocks.js“ - tai nurodo karmai naudoti „Unit Testing“ funkciją „AngularJS“ iš failo „Angular.JS-mocks.js“.
  4. Visi pagrindiniai programos ar verslo logikos failai yra jūsų programos lib aplanke.
  5. Testų aplanke bus visi vieneto testai

Norėdami patikrinti, ar karma veikia, sukurkite failą Sample.js, įdėkite žemiau esantį kodą ir įdėkite jį į bandymų katalogą.

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

Pirmiau pateiktas kodas turi šiuos aspektus

  1. Apibūdinimo funkcija naudojama norint aprašyti testą. Mūsų atveju mes pateikiame aprašą „Bandinio bandymas“.
  2. Funkcija „it“ naudojama norint suteikti testui pavadinimą. Mūsų atveju mes nurodome savo testo pavadinimą kaip „Sąlyga yra teisinga“. Testo pavadinimas turi būti reikšmingas.
  3. Raktinių žodžių „tikėtis“ ir „toBe“ derinys nurodo, kokia yra laukiama ir tikroji bandymo rezultato vertė. Jei tikroji ir numatoma vertė yra ta pati, tada bandymas bus išlaikytas, kitaip nepavyks.

Kai vykdysite šią eilutę komandų eilutėje, ji vykdys pirmiau nurodytą bandymo failą

KARMA start

Žemiau pateiktas rezultatas yra paimtas iš IDE žiniatinklio audros, kurioje buvo atlikti pirmiau nurodyti veiksmai.

  1. Rezultatas pateikiamas „Karma“ naršyklėje „Webstorm“. Šiame lange rodomi visi karmos sistemoje apibrėžti bandymai.
  2. Čia galite pamatyti, kad parodytas atlikto testo aprašymas, kuris yra „Bandinio pavyzdys“.
  3. Tada galite pamatyti, kad atliekamas pats bandymas, kurio pavadinimas yra „Sąlyga yra tiesa“.
  4. Atminkite, kad kadangi visi testai šalia turi žalią piktogramą „Gerai“, kuri simbolizuoja visų testų išlaikymą.

„AngularJS“ valdiklių testavimas

Karmos testavimo sistema taip pat turi funkciją valdikliams išbandyti nuo galo iki galo. Tai apima valdiklio naudojamo objekto $ scope testavimą.

Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

Mūsų pavyzdyje

Pirmiausia turėtume apibrėžti valdiklį. Šis valdytojas atliktų toliau nurodytus veiksmus

  1. Sukurkite ID kintamąjį ir priskirkite jam 5 vertę.
  2. Priskirkite ID kintamąjį objektui $ sritis.

Mūsų bandymas patikrins šio valdiklio egzistavimą ir patikrins, ar objekto $ sritis ID kintamasis nustatytas į 5.

Pirmiausia turime užtikrinti, kad yra tokia išankstinė sąlyga

    1. Įdiekite „Angular.JS“ biblioteką per npm. Tai galima padaryti vykdant žemiau esančią eilutę komandų eilutėje
npm install Angular JS-mocks
  1. Kitas yra modifikuoti failą karma.conf.js, kad įsitikintumėte, jog testui yra tinkami failai. Žemiau pateiktame segmente tik rodoma failų karma.conf.js dalis, kurią reikia modifikuoti 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parametras „failai“ iš esmės nurodo karmai visus failus, kurių reikia atliekant bandymus.
  • Failai „AngularJS.js“ ir „AngularJS-mocks.js“ reikalingi norint vykdyti „AngularJS“ vieneto testus
  • Index.js faile bus mūsų valdiklio kodas
  • Testavimo aplanke bus visi mūsų „AngularJS“ testai

Žemiau yra mūsų „Angular.JS“ kodas, kuris bus išsaugotas kaip failas „Index.js“ mūsų programos bandymo aplanke.

Žemiau pateiktas kodas atlieka tik šiuos dalykus

  1. Sukurkite kampinį JS modulį, pavadintą sampleApp
  2. Sukurkite valdiklį, pavadintą „AngularJSController“
  3. Sukurkite kintamąjį, vadinamą ID, suteikite jam 5 reikšmę ir priskirkite jį „$ scope“ objektui
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Kai minėtas kodas bus sėkmingai įvykdytas, kitas žingsnis būtų sukurti bandomąjį atvejį, kad kodas būtų tinkamai parašytas ir įvykdytas.

Mūsų testo kodas bus toks, kaip parodyta žemiau.

Kodas bus atskirame faile, vadinamame „ControllerTest.js“, kuris bus įdėtas į bandomąjį aplanką. Žemiau pateiktas kodas tiesiog atlieka šiuos pagrindinius dalykus

  1. beforeEach funkcija - ši funkcija naudojama norint įkelti mūsų „AngularJS.JS“ modulį, vadinamą „sampleApp“, prieš bandymą. Atminkite, kad tai yra failo index.js modulio pavadinimas.

  2. Objektas $ controller yra sukurtas kaip maketo objektas valdikliui „Angular JSController“, kuris yra apibrėžtas mūsų index.js faile. Bet kokio tipo bandymų metu bandomasis objektas yra manekeno objektas, kuris iš tikrųjų bus naudojamas bandymui atlikti. Šis imitacinis objektas iš tikrųjų imituos mūsų valdiklio elgesį.

  3. beforeEach (inject (function (_ $ controller_) - tai naudojama bandomajam objektui suleisti, kad jis elgtųsi kaip tikrasis valdiklis.

  4. var $ sritis = {}; Tai yra maketo objektas, kuriamas objektui $ scope.

  5. var valdiklis = $ valdiklis ('AngularJSController', {$ sritis: $ sritis}); - Čia mes tikriname, ar yra valdiklis, pavadintas „Angular.JSController“. Čia mes taip pat priskiriame visus kintamuosius iš „$ scope“ objekto, esančio valdiklyje, esančiame faile „Index.js“, į „$ scope“ objektą, esantį bandymo faile.

  6. Galiausiai palyginame „USD.ID“ ID su 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);});});});

Pirmiau pateiktas testas bus vykdomas naršyklėje „karma“ ir suteiks tą patį išlaikymo rezultatą, kuris buvo parodytas ankstesnėje temoje.

„AngularJS“ direktyvų testavimas

Karmos testavimo sistema taip pat turi funkcionalumą, kad būtų galima išbandyti pritaikytas direktyvas. Tai apima šablonusURL, kurie naudojami pritaikytose direktyvose.

Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

Savo pavyzdyje pirmiausia apibrėžsime pasirinktinę direktyvą, kurioje atliekami šie dalykai

  1. Sukurkite „AngularJS“ modulį, pavadintą „sampleApp“
  2. Sukurkite pasirinktinę direktyvą pavadinimu - Guru99
  3. Sukurkite funkciją, kuri grąžina šabloną su antraštės žyma, kurioje rodomas tekstas „Tai yra kampinis JS testavimas“.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Kai minėtas kodas bus sėkmingai įvykdytas, kitas žingsnis būtų sukurti bandomąjį atvejį, kad kodas būtų tinkamai parašytas ir įvykdytas. Mūsų testo kodas bus toks, kaip parodyta žemiau

Kodas bus atskirame faile, vadinamame „DirectorTest.js“, kuris bus įdėtas į bandomąjį aplanką. Žemiau pateiktas kodas tiesiog atlieka šiuos pagrindinius dalykus

  1. beforeEach funkcija - ši funkcija naudojama norint įkelti mūsų kampinį JS modulį, vadinamą „sampleApp“ prieš bandomąjį važiavimą.

  2. $ Compile paslauga naudojama kuriant direktyvą. Ši paslauga yra privaloma ir ją reikia deklaruoti, kad „Angular.JS“ galėtų ją naudoti sudarydami mūsų užsakymą.

  3. „$ Rootscope“ yra pagrindinė bet kurios „AngularJS.JS“ programos taikymo sritis. Ankstesniuose skyriuose matėme valdiklio objektą $ scope. Na, objektas $ scope yra objekto $ rootscope antrinis objektas. Priežastis, kodėl tai deklaruojama, yra ta, kad mes pakeičiame tikrąją HTML žymą DOM naudodami savo pritaikytą direktyvą. Taigi turime naudoti paslaugą $ rootscope, kuri iš tikrųjų klauso arba žino, kada HTML dokumente įvyksta bet kokie pakeitimai.

  4. var element = $ compile (" ") - tai naudojama norint patikrinti, ar mūsų direktyva suleidžiama taip, kaip turėtų. Mūsų pritaikytos direktyvos pavadinimas yra „Guru99“, ir iš mūsų paprotinių direktyvų skyriaus žinome, kad kai direktyva bus įterpta į mūsų HTML, ji bus švirkščiama kaip „ “. Taigi šis teiginys naudojamas tikrinant.

  5. tikėtis (element.html ()). toContain ("Tai yra AngularJS testavimas") - tai naudojama nurodant tikėtis funkciją, kad ji turėtų rasti elementą (mūsų atveju div žymą), kuriame būtų vidinis HTML tekstas "Tai yra Kampinis JS testavimas ".

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

Pirmiau pateiktas testas bus vykdomas naršyklėje „karma“ ir suteiks tą patį išlaikymo rezultatą, kuris buvo parodytas ankstesnėje temoje.

„End to End“ testavimas „AngularJS JS“ programose

Karmos testavimo sistema kartu su sistema, vadinama „Protractor“, turi galimybę išbandyti žiniatinklio programas nuo galo iki galo.

Taigi tai yra ne tik direktyvų ir valdiklių, bet ir bet ko kito, kas gali pasirodyti HTML puslapyje, testavimas.

Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

Toliau pateiktame pavyzdyje turėsime „AngularJS“ programą, kuri sukuria duomenų lentelę naudodama „ng-repeat“ direktyvą.

  1. Pirmiausia kuriame kintamąjį, vadinamą „pamoka“, ir vienu žingsniu jam priskiriame keletą raktų ir verčių porų. Kiekviena raktų ir verčių pora bus naudojama kaip duomenys rodant lentelę. Tada mokymo kintamasis priskiriamas srities objektui, kad jį būtų galima pasiekti iš mūsų rodinio.
  2. Kiekvienai lentelės duomenų eilutei naudojame direktyvą ng-pakartoti. Ši direktyva pereina kiekvieną pagrindinės vertės porą mokymo objekto objekte, naudodama kintamąjį ptutor.
  3. Galiausiai mes naudojame žymę kartu su raktų reikšmių poromis (ptutor.Name ir ptutor.Description), kad būtų rodomi lentelės duomenys.


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

Įdomios straipsniai...