AngularJS Unit Testing: Karma Jasmine Tutorial

Satura rādītājs:

Anonim

Viena no izcilākajām Angular.JS iezīmēm ir testēšanas aspekts. Kad Google izstrādātāji izstrādāja AngularJS, viņi paturēja prātā testēšanu un pārliecinājās, ka viss AngularJS ietvars ir pārbaudāms.

AngularJS testēšanu parasti veic, izmantojot Karma (ietvars). Leņķisko JS testēšanu var veikt bez Karma, bet Karma ietvaram ir tik izcila funkcionalitāte AngularJS koda testēšanai, ka ir lietderīgi izmantot šo ietvaru.

  • AngularJS kontrolieriem un direktīvām mēs varam atsevišķi veikt vienību testēšanu.
  • Mēs varam veikt arī AngularJS beigu beigu testēšanu, kas tiek testēta no lietotāja viedokļa.

Šajā apmācībā jūs uzzināsiet

  • Karma ietvara ieviešana un instalēšana
    • Karmas uzstādīšana
    • Karma ietvara konfigurēšana
  • AngularJS kontrolieru pārbaude
  • AngularJS direktīvu pārbaude
  • AngularJS JS lietojumprogrammu pārbaude no gala līdz beigām

Karma ietvara ieviešana un instalēšana

Karma ir testēšanas automatizācijas rīks, kuru izveidoja Google Angular JS komanda. Pirmais Karma izmantošanas solis ir Karma instalēšana. Karma tiek instalēta caur npm (kas ir pakotņu pārvaldnieks, ko izmanto, lai ērti uzstādītu moduļus vietējā mašīnā).

Karmas uzstādīšana

Karma instalēšana caur npm tiek veikta divpakāpju procesā.

1. solis. Izpildiet zemāk esošo rindu no komandrindas

npm install karma karma-chrome-launcher karma-jasmine

Kurā vietā

  1. npm ir mezglu pakotņu pārvaldnieka komandrindas lietderība, ko izmanto pielāgotu moduļu instalēšanai jebkurā mašīnā.
  2. Instalācijas parametrs komandrindas npm komandai norāda, ka instalēšana ir nepieciešama.
  3. Komandrindā tiek norādītas 3 bibliotēkas, kas nepieciešamas darbam ar karmu
    • karma ir galvenā bibliotēka, kas tiks izmantota testēšanas vajadzībām.
    • karma-chrome-launcher ir atsevišķa bibliotēka, kas ļauj karmas komandas atpazīt hroma pārlūkprogrammā.
    • karma-jasmīns - tas instalē jasmīnu, kas ir atkarīgs no Karmas.

2. solis . Nākamais solis ir komandrindas karma instalēšana. Tas ir nepieciešams, lai izpildītu karmas līnijas komandas. Karmas līnijas lietderība tiks izmantota, lai inicializētu karmas vidi testēšanai.

Lai instalētu komandrindas utilītu, izpildiet zemāk esošo rindu no komandrindas

npm install karma-cli

kur,

  1. karma-cli izmanto, lai instalētu karmas komandrindas saskarni, kas tiks izmantota karmas komandu ierakstīšanai komandrindas saskarnē.

Karma ietvara konfigurēšana

Nākamais solis ir konfigurēt karmu, ko var izdarīt, izmantojot komandu

"karma -init"

Pēc iepriekš minētās darbības izpildes karma izveidos failu karma.conf.js. Fails, iespējams, izskatīsies kā zemāk parādītais fragments

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

Iepriekš minētie konfigurācijas faili rāda karma izpildlaika motoram šādas lietas

  1. “Jūsu lietojumprogrammas nosaukums” - tas tiks aizstāts ar jūsu lietojumprogrammas nosaukumu.
  2. ' Jūsu lietojumprogrammas nosaukums' / AngularJS / AngularJS.js ' - tas norāda karmai, ka jūsu lietojumprogramma ir atkarīga no AngularJS galvenajiem moduļiem
  3. 'Jūsu lietojumprogrammas nosaukums' / AngularJS-mocks / AngularJS-mocks.js ' - tas liek karmai izmantot vienības testēšanas funkcionalitāti AngularJS no faila Angular.JS-mocks.js.
  4. Visi galvenie lietojumprogrammas vai biznesa loģikas faili atrodas jūsu lietojumprogrammas lib mapē.
  5. Testu mapē būs visi vienības testi

Lai pārbaudītu, vai karma darbojas, izveidojiet failu ar nosaukumu Sample.js, ievietojiet zemāk esošo kodu un ievietojiet to testa direktorijā.

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

Iepriekš minētajam kodam ir šādi aspekti

  1. Apraksta funkciju izmanto, lai sniegtu testa aprakstu. Mūsu gadījumā mēs savam testam piešķiram aprakstu “Parauga tests”.
  2. Funkciju “tā” izmanto, lai piešķirtu testam nosaukumu. Mūsu gadījumā mēs testa nosaukumu nosaucam kā “Nosacījums ir patiess”. Testa nosaukumam jābūt nozīmīgam.
  3. Atslēgvārda 'sagaidīt' un 'toBe' kombinācija norāda, kāda ir paredzamā un faktiskā testa rezultāta vērtība. Ja faktiskā un paredzamā vērtība ir vienāda, tad tests izturēs citu rezultātu.

Komandu uzvednē izpildot šo rindu, tā izpildīs iepriekšminēto testa failu

KARMA start

Zemāk redzamais rezultāts tiek ņemts no IDE tīmekļa vētras, kurā tika veiktas iepriekš minētās darbības.

  1. Rezultāts tiek iegūts Karma pētniekā Webstorm. Šis logs parāda visu karmas ietvaros definēto testu izpildi.
  2. Šeit jūs varat redzēt, ka tiek parādīts izpildītā testa apraksts, kas ir "Pārbaudes paraugs".
  3. Pēc tam jūs varat redzēt, ka tiek izpildīts pats tests, kura nosaukums ir “Nosacījums ir patiess”.
  4. Ņemiet vērā, ka, tā kā visiem testiem blakus ir zaļa ikona “Ok”, kas simbolizē visu testu izturēšanu.

AngularJS kontrolieru pārbaude

Karmas testēšanas ietvaram ir arī funkcionalitāte, lai pārbaudītu kontrolierus no gala līdz beigām. Tas ietver kontroliera kontrolierī izmantotā objekta $ pārbaudi.

Apskatīsim piemēru, kā mēs to varam sasniegt.

Mūsu piemērā

Vispirms mums būtu jādefinē kontrolieris. Šis kontrolieris veiks tālāk minētās darbības

  1. Izveidojiet ID mainīgo un piešķiriet tam vērtību 5.
  2. Piešķiriet ID mainīgo objektam $ scope.

Mūsu pārbaudē tiks pārbaudīta šī kontrollera esamība un pārbaudīts, vai objekta $ scope ID mainīgais ir iestatīts uz 5.

Vispirms mums jānodrošina, lai būtu izpildīts šāds priekšnoteikums

    1. Instalējiet Angular.JS izspēles bibliotēku, izmantojot npm. To var izdarīt, komandrindā izpildot zemāk redzamo rindu
npm install Angular JS-mocks
  1. Nākamais ir modificēt failu karma.conf.js, lai pārbaudē būtu iekļauti pareizie faili. Zemāk esošajā segmentā tikai parādīta karma.conf.js failu daļa, kas jāmaina 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parametrs “files” Karmai būtībā norāda visus failus, kas nepieciešami testu veikšanai.
  • AngularJS.js un AngularJS-mocks.js faili ir nepieciešami, lai palaistu AngularJS vienības testus
  • Index.js failā būs mūsu kods kontrolierim
  • Pārbaudes mapē būs visi mūsu AngularJS testi

Zemāk ir mūsu Angular.JS kods, kas tiks saglabāts kā fails Index.js mūsu lietojumprogrammas testa mapē.

Zemāk esošais kods veic tikai šādas darbības

  1. Izveidojiet leņķa JS moduli ar nosaukumu sampleApp
  2. Izveidojiet kontrolieri ar nosaukumu AngularJSController
  3. Izveidojiet mainīgo ar nosaukumu ID, piešķiriet tam vērtību 5 un piešķiriet objektam $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Kad iepriekšminētais kods ir veiksmīgi izpildīts, nākamais solis būtu izveidot testa gadījumu, lai pārliecinātos, ka kods ir pareizi uzrakstīts un izpildīts.

Mūsu testa kods būs tāds, kā parādīts zemāk.

Kods atradīsies atsevišķā failā ar nosaukumu ControllerTest.js, kas tiks ievietots testa mapē. Zemāk esošais kods veic tikai šādas galvenās lietas

  1. beforeEach funkcija - šo funkciju izmanto, lai pirms testa palaišanas ielādētu mūsu AngularJS.JS moduli, ko sauc par “sampleApp”. Ņemiet vērā, ka šis ir faila index.js moduļa nosaukums.

  2. $ Controller objekts tiek izveidots kā maketa objekts kontrolierim '' Angular JSController '', kas definēts mūsu index.js failā. Jebkurā vienību testēšanā izspēles objekts ir fiktīvs objekts, kas faktiski tiks izmantots testēšanai. Šis izspēles objekts faktiski simulēs mūsu kontroliera rīcību.

  3. beforeEach (inject (function (_ $ controller_) - Tas tiek izmantots, lai mūsu testā injicētu izspēles objektu, lai tas rīkotos tāpat kā faktiskais kontrolieris.

  4. var $ scope = {}; Šis ir izspēles objekts, kas tiek izveidots objektam $ scope.

  5. var controller = $ controller ('AngularJSController', {$ sfēra: $ sfēra}); - Šeit mēs pārbaudām, vai pastāv kontrolieris ar nosaukumu “Angular.JSController”. Šeit mēs arī piešķiram visus mainīgos no mūsu $ sfēra objekta mūsu kontrolierī failā Index.js faila objektam $ sfēra mūsu testa failā

  6. Visbeidzot, mēs salīdzinām $ scope.ID ar 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);});});});

Iepriekšminētais tests tiks palaists karma pārlūkprogrammā un sniegs tādu pašu izturēšanas rezultātu kā parādīts iepriekšējā tēmā.

AngularJS direktīvu pārbaude

Karmas testēšanas ietvaram ir arī funkcionalitāte, lai pārbaudītu pielāgotās direktīvas. Tas ietver veidņu URL, kas tiek izmantoti pielāgotajās direktīvās.

Apskatīsim piemēru, kā mēs to varam sasniegt.

Mūsu piemērā vispirms definēsim pielāgoto direktīvu, kas veic šādas darbības

  1. Izveidojiet AngularJS moduli ar nosaukumu sampleApp
  2. Izveidojiet pielāgotu direktīvu ar nosaukumu - Guru99
  3. Izveidojiet funkciju, kas atgriež veidni ar galvenes tagu, kurā tiek parādīts teksts "This is AngularJS Testing".
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Kad iepriekšminētais kods ir veiksmīgi izpildīts, nākamais solis būtu izveidot testa gadījumu, lai pārliecinātos, ka kods ir pareizi uzrakstīts un izpildīts. Mūsu testa kods būs tāds, kā parādīts zemāk

Kods būs atsevišķā failā ar nosaukumu DirectorTest.js, kas tiks ievietots testa mapē. Zemāk esošais kods veic tikai šādas galvenās lietas

  1. beforeEach funkcija - šo funkciju izmanto, lai pirms testa palaišanas ielādētu mūsu leņķisko JS moduli, ko sauc par “sampleApp”.

  2. Pakalpojumu $ kompilēšana tiek izmantota direktīvas sastādīšanai. Šis pakalpojums ir obligāts, un tas jādeklarē, lai Angular.JS varētu to izmantot, lai sastādītu mūsu pielāgoto direktīvu.

  3. $ Rootcope ir jebkuras AngularJS.JS lietojumprogrammas galvenā darbības joma. Iepriekšējās nodaļās mēs esam redzējuši kontroliera $ scope objektu. Nu, objekts $ scope ir objekta $ rootscope pakārtotais objekts. Iemesls, kāpēc tas šeit tiek deklarēts, ir tāpēc, ka mēs veicam izmaiņas faktiskajā HTML tagā DOM, izmantojot mūsu pielāgoto direktīvu. Tādēļ mums jāizmanto pakalpojums $ rootscope, kas faktiski klausās vai zina, kad HTML dokumentā notiek kādas izmaiņas.

  4. var element = $ compile (" ") - Tas tiek izmantots, lai pārbaudītu, vai mūsu direktīva tiek injicēta tā, kā vajadzētu. Mūsu pielāgotās direktīvas nosaukums ir Guru99, un no mūsu muitas direktīvu nodaļas mēs zinām, ka tad, kad direktīva tiks ievadīta mūsu HTML, tā tiks ievadīta kā “ ”. Tādēļ šo paziņojumu izmanto, lai veiktu šo pārbaudi.

  5. sagaidīt (element.html ()). toContain ("Šī ir AngularJS pārbaude") - Tas tiek izmantots, lai norādītu sagaidīšanas funkcijai, ka tai jāatrod elements (mūsu gadījumā div tags), kas satur iekšējo HTML tekstu AngularJS testēšana ".

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

Iepriekšminētais tests tiks palaists karma pārlūkprogrammā un sniegs tādu pašu izturēšanas rezultātu kā parādīts iepriekšējā tēmā.

AngularJS JS lietojumprogrammu pārbaude no gala līdz beigām

Karmas testēšanas ietvaram kopā ar ietvaru, ko sauc par Protractor, ir tīmekļa lietojumprogrammu testēšanas funkcionalitāte.

Tā ir ne tikai direktīvu un kontrolieru pārbaude, bet arī visu citu, kas var parādīties HTML lapā, pārbaude.

Apskatīsim piemēru, kā mēs to varam sasniegt.

Šajā piemērā mums būs AngularJS lietojumprogramma, kas izveido datu tabulu, izmantojot direktīvu ng-repeat.

  1. Vispirms mēs izveidojam mainīgo ar nosaukumu “apmācība” un piešķiram tam dažus atslēgu un vērtību pārus vienā solī. Katrs atslēgas vērtību pāris tiks izmantots kā dati, parādot tabulu. Pēc tam apmācības mainīgais tiek piešķirts darbības objektam, lai tam varētu piekļūt no mūsu skatījuma.
  2. Katrai tabulas datu rindai mēs izmantojam direktīvu ng-repeat. Šī direktīva iziet katru atslēgu un vērtību pāri mācību priekšmeta objektā, izmantojot mainīgo ptutor.
  3. Visbeidzot, tabulas datu parādīšanai mēs izmantojam tagu kopā ar atslēgas vērtību pāriem (ptutor.Name un ptutor.Description).


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