AngularJS-yksikön testaus: Karma Jasmine -opastus

Sisällysluettelo:

Anonim

Yksi Angular.JS: n loistavimmista ominaisuuksista on testausnäkökohta. Kun Googlen kehittäjät kehittivät AngularJS: n, he pitivät testausta mielessä ja varmistivat, että koko AngularJS-kehys oli testattava.

AngularJS: ssä testaus suoritetaan normaalisti käyttäen Karmaa (kehys). Kulma-JS-testaus voidaan suorittaa ilman Karmaa, mutta Karma-kehyksellä on niin loistava toiminnallisuus AngularJS-koodin testaamiseen, että on järkevää käyttää tätä kehystä.

  • AngularJS: ssä voimme suorittaa yksikkötestauksen erikseen ohjaimille ja direktiiveille.
  • Voimme myös suorittaa AngularJS: n lopputestauksen, joka testaa käyttäjän näkökulmasta.

Tässä opetusohjelmassa opit-

  • Karma-kehyksen esittely ja asennus
    • Karman asennus
    • Karma-kehyksen määritys
  • AngularJS-ohjainten testaus
  • AngularJS-direktiivien testaaminen
  • AngularJS JS -sovellusten testaaminen loppuun asti

Karma-kehyksen esittely ja asennus

Karma on Googlen Angular JS -tiimin luoma testausautomaatiotyökalu. Ensimmäinen vaihe Karman käytössä on Karman asentaminen. Karma asennetaan npm: n kautta (joka on paketinhallinta, jota käytetään moduulien helppoon asentamiseen paikalliseen koneeseen).

Karman asennus

Karman asennus npm: n kautta tapahtuu kaksivaiheisesti.

Vaihe 1) Suorita alla oleva rivi komentoriviltä

npm install karma karma-chrome-launcher karma-jasmine

Jossa

  1. npm on solmupaketinhallinnan komentorivi-apuohjelma, jota käytetään mukautettujen moduulien asentamiseen mille tahansa koneelle.
  2. Asennusparametri ohjeistaa komentoa npm komentoriville, että asennus on välttämätöntä.
  3. Komentorivillä on määritetty 3 kirjastoa, joita tarvitaan karman kanssa työskentelyyn
    • karma on ydinkirjasto, jota käytetään testaustarkoituksiin.
    • karma-chrome-launcher on erillinen kirjasto, jonka avulla kromi-selain tunnistaa karmakomennot.
    • karma-jasmiini - Tämä asentaa jasmiinin, joka on riippuvainen kehys Karmalle.

Vaihe 2) Seuraava vaihe on asentaa karman komentorivin apuohjelma. Tätä vaaditaan karma-rivikomentojen suorittamiseen. Karmalinja-apuohjelmaa käytetään alustamaan karmaympäristö testausta varten.

Asenna komentorivi-apuohjelma suorittamalla alla oleva rivi komentoriviltä

npm install karma-cli

jossa,

  1. karma-cliä käytetään asentamaan karman komentoriviliittymä, jota käytetään karmakomentojen kirjoittamiseen komentoriviliittymään.

Karma-kehyksen määritys

Seuraava vaihe on määrittää karma, joka voidaan tehdä komennolla

"karma -init"

Kun yllä oleva vaihe on suoritettu, karma luo karma.conf.js-tiedoston. Tiedosto näyttää todennäköisesti olevan alla oleva katkelma

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

Yllä olevat kokoonpanotiedostot kertovat karma-ajonaikaiselle moottorille seuraavat asiat

  1. 'Hakemuksesi nimi' - Tämä korvataan sovelluksesi nimellä.
  2. ' Sovelluksesi nimi' / AngularJS / AngularJS.js ' - Tämä kertoo karmalle, että sovelluksesi riippuu AngularJS: n ydinmoduuleista
  3. 'Sovelluksesi nimi' / AngularJS-mocks / AngularJS-mocks.js ' - Tämä käskee karmaa käyttämään Unit Testing -toimintoa AngularJS: lle Angular.JS-mocks.js-tiedostosta.
  4. Kaikki sovelluksen tai yrityslogiikan päätiedostot ovat sovelluksesi lib-kansiossa.
  5. Testit-kansio sisältää kaikki yksikötestit

Jos haluat tarkistaa, toimiiko karma, luo tiedosto nimeltä Sample.js, laita alla oleva koodi ja aseta se testihakemistoon.

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

Yllä olevalla koodilla on seuraavat näkökohdat

  1. Kuvausfunktiota käytetään kuvaamaan testi. Meidän tapauksessamme annamme testillemme kuvauksen "Näytetesti".
  2. 'It' -toimintoa käytetään antamaan testille nimi. Meidän tapauksessamme annamme testimme nimen 'Ehto on totta'. Testin nimen on oltava mielekäs.
  3. Avainsanan 'odottaa' ja 'toBe' yhdistelmä kertoo testituloksen odotetun ja todellisen arvon. Jos todellinen ja odotettu arvo ovat samat, testi läpäisee muuten se epäonnistuu.

Kun suoritat seuraavan rivin komentokehotteessa, se suorittaa yllä olevan testitiedoston

KARMA start

Alla oleva tulos on peräisin IDE-verkkomyrskystä, jossa yllä olevat vaiheet suoritettiin.

  1. Tulos tulee Karma-tutkimusmatkailijaan Webstormissa. Tämä ikkuna näyttää kaikkien karmakehyksessä määriteltyjen testien suorittamisen.
  2. Täällä voit nähdä, että suoritetun testin kuvaus näkyy näytekokeena.
  3. Seuraavaksi näet, että itse testi, jonka nimi on "Ehto on totta", suoritetaan.
  4. Huomaa, että koska kaikkien testien vieressä on vihreä "Ok" -kuvake, joka symboloi kaikkien testien läpäisemistä.

AngularJS-ohjainten testaus

Karmatestauskehyksessä on myös toiminnallisuus testata ohjaimia päästä päähän. Tähän sisältyy ohjaimissa käytetyn $ scope -objektin testaus.

Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän.

Esimerkissämme

Meidän on ensin määritettävä ohjain. Tämä ohjain suorittaa alla mainitut vaiheet

  1. Luo tunnusmuuttuja ja määritä sille arvo 5.
  2. Määritä ID-muuttuja $ scope -objektille.

Testimme testaa tämän ohjaimen olemassaolon ja testaa myös, onko $ scope-objektin ID-muuttuja asetettu arvoon 5.

Ensin on varmistettava, että seuraava edellytys on olemassa

    1. Asenna Angular.JS-mocks-kirjasto npm: n kautta. Tämä voidaan tehdä suorittamalla alla oleva rivi komentokehotteessa
npm install Angular JS-mocks
  1. Seuraava on muokata karma.conf.js-tiedostoa sen varmistamiseksi, että oikeat tiedostot ovat mukana testissä. Alla oleva segmentti näyttää vain tiedostojen karma.conf.js-osan, jota on muutettava 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • 'Tiedostot' -parametri kertoo Karmalle periaatteessa kaikki tiedostot, joita tarvitaan testien suorittamiseen.
  • AngularJS.js- ja AngularJS-mocks.js-tiedostot vaaditaan AngularJS-yksikötestien suorittamiseen
  • Index.js-tiedosto sisältää ohjaimen koodin
  • Testikansio sisältää kaikki AngularJS-testimme

Alla on Angular.JS-koodi, joka tallennetaan tiedostona Index.js sovelluksemme testikansioon.

Alla oleva koodi tekee vain seuraavat asiat

  1. Luo kulmainen JS-moduuli nimeltä sampleApp
  2. Luo ohjain nimeltä AngularJSController
  3. Luo muuttuja nimeltä ID, anna sille arvo 5 ja määritä se $ scope -objektille
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Kun yllä oleva koodi on suoritettu onnistuneesti, seuraava askel olisi luoda testitapaus varmistaaksesi, että koodi on kirjoitettu ja suoritettu oikein.

Testimme koodi on alla esitetty.

Koodi on erillisessä tiedostossa nimeltä ControllerTest.js, joka sijoitetaan testikansioon. Alla oleva koodi tekee vain seuraavat avainkysymykset

  1. beforeEach-toiminto - Tätä toimintoa käytetään lataamaan AngularJS.JS-moduuli nimeltä sampleApp ennen testiajoa. Huomaa, että tämä on index.js-tiedoston moduulin nimi.

  2. $ Controller-objekti luodaan mockup-objektina ohjaimelle '' Angular JSController '', joka määritetään index.js-tiedostossamme. Kaikissa yksikkötestauksissa malliobjekti edustaa nuken objektia, jota todellisuudessa käytetään testauksessa. Tämä pilkko-objekti simuloi itse asiassa ohjaimen käyttäytymistä.

  3. beforeEach (inject (function (_ $ controller_) - Tätä käytetään testiobjektin pistämiseen niin, että se käyttäytyy varsinaisen ohjaimen tavoin.

  4. var $ scope = {}; Tämä on kuvaobjekti, joka luodaan $ scope -objektille.

  5. var-ohjain = $ -ohjain ('AngularJSController', {$ -alue: $ -alue}); - Tässä tarkistamme ohjaimen nimeltä Angular.JSController. Tässä myös määritämme kaikki muuttujat ohjaimestamme Index.js-tiedostossa olevasta $ scope -objektistamme testitiedostomme $ scope -objektiin

  6. Lopuksi verrataan $ scope.ID: tä arvoon 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);});});});

Yllä oleva testi suoritetaan karmaselaimessa ja antaa saman läpäistuloksen kuin edellisessä aiheessa.

AngularJS-direktiivien testaaminen

Karmatestauskehyksessä on myös toiminnallisuus testata mukautettuja direktiivejä. Tämä sisältää malliURL: t, joita käytetään mukautetuissa direktiiveissä.

Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän.

Esimerkissämme määritämme ensin mukautetun direktiivin, joka tekee seuraavat asiat

  1. Luo AngularJS-moduuli nimeltä sampleApp
  2. Luo mukautettu direktiivi nimellä Guru99
  3. Luo toiminto, joka palauttaa mallin, jonka otsikkotunniste näyttää tekstin "Tämä on AngularJS-testaus".
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Kun yllä oleva koodi on suoritettu onnistuneesti, seuraava askel olisi luoda testitapaus sen varmistamiseksi, että koodi on kirjoitettu ja suoritettu oikein. Testimme koodi on alla esitetty

Koodi on erillisessä tiedostossa nimeltä DirektiiviTest.js, joka sijoitetaan testikansioon. Alla oleva koodi tekee vain seuraavat avainkysymykset

  1. beforeEach-toiminto - Tätä toimintoa käytetään lataamaan Angular JS -moduulia nimeltä "sampleApp" ennen testiajoa.

  2. $ Compile -palvelua käytetään direktiivin kääntämiseen. Tämä palvelu on pakollinen ja se on ilmoitettava, jotta Angular.JS voi käyttää sitä laatiakseen mukautetun direktiivin.

  3. $ Rootscope on minkä tahansa AngularJS.JS-sovelluksen ensisijainen laajuus. Olemme nähneet ohjaimen $ scope -objektin aikaisemmissa luvuissa. No, $ scope -objekti on $ rootscope -objektin lapsiobjekti. Syy tähän ilmoitetaan siksi, että teemme muutoksia todelliseen HTML-tunnisteeseen DOM: ssä mukautetun direktiivin avulla. Siksi meidän on käytettävä $ rootscope -palvelua, joka todella kuuntelee tai tietää milloin tahansa muutoksia tapahtuu HTML-dokumentissa.

  4. var element = $ compile (" ") - Tätä käytetään tarkistamaan, injektoidaanko direktiiväämme niin kuin pitäisi. Mukautetun direktiivin nimi on Guru99, ja mukautettujen direktiivien luvusta tiedämme, että kun direktiivi injektoidaan HTML: ään, se injektoidaan nimellä " ". Siksi tätä lausetta käytetään tämän tarkistuksen tekemiseen.

  5. odottaa (element.html ()). toContain ("Tämä on AngularJS-testaus") - Tätä käytetään ohjaamaan odotustoimintoa, että sen pitäisi löytää elementti (meidän tapauksessamme div-tagi) sisältävän tämän KulmaJS-testaus ".

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

Yllä oleva testi suoritetaan karmaselaimessa ja antaa saman läpäistuloksen kuin edellisessä aiheessa.

AngularJS JS -sovellusten testaaminen loppuun asti

Karmatestauskehyksessä sekä Protractor-kehyksessä on toiminnallisuus testata verkkosovellusta päästä päähän.

Joten se ei ole vain direktiivien ja ohjaimien testaus, vaan myös kaiken muun, mikä saattaa näkyä HTML-sivulla, testaaminen.

Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän.

Alla olevassa esimerkissämme meillä on AngularJS-sovellus, joka luo tietotaulukon ng-repeat -direktiivin avulla.

  1. Luomme ensin muuttujan nimeltä "opetusohjelma" ja määritämme sille joitain avainarvopareja yhdessä vaiheessa. Kutakin avainarvoparia käytetään datana taulukkoa näytettäessä. Opetusmuuttuja määritetään sitten laajuusobjektille, jotta sitä voidaan käyttää näkymästä.
  2. Kullekin taulukon tietoriville käytämme ng-repeat-direktiiviä. Tämä direktiivi käy läpi kaikki avainarvoparit opetusohjelman laajuusobjektissa muuttujan ptutor avulla.
  3. Lopuksi käytämme -tunnistetta avainarvoparien (ptutor.Name ja ptutor.Description) kanssa taulukon tietojen näyttämiseen.


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