AngularJS ühiktestimine Karma ja Jasmine'iga

Üks AngularJS-i säravamaid omadusi on see, et Testimine aspekt. Kui arendajad Google AngularJS-i arendades pidasid nad silmas testimist ja veendusid, et kogu AngularJS-i raamistik oleks testitav.

AngularJS-is tehakse testimist tavaliselt Karma (raamistiku) abil. AngularJS-i testimist saab teha ka ilma Karmata, kuid Karma raamistikul on AngularJS-i koodi testimiseks nii suurepärane funktsionaalsus, et selle raamistiku kasutamine on mõistlik.

• AngularJS-is saame esineda Üksuse testimine eraldi kontrollerite ja käskkirjade jaoks.
• Saame ka esineda otsast lõpuni testimine AngularJS-ist, mis testib kasutaja vaatenurgast.

Karma raamistiku tutvustus ja paigaldamine

Karma on a testimise automatiseerimise tööriist loodud AngularJS meeskonna poolt aadressil GoogleKarma kasutamise esimene samm on Karma installimine. Karma installitakse npm-i kaudu (mis on paketihaldur, mida kasutatakse moodulite lihtsaks installimiseks kohalikku masinasse).

Karma paigaldamine

Karma installimine npm-i kaudu toimub kaheastmelise protsessina.

Step 1) Käivitage allolev rida käsurealt

npm install karma karma-chrome-launcher karma-jasmine --save-dev

kus,

1. npm on käsurea utiliit sõlme paketihaldurile, mida kasutatakse kohandatud moodulite installimiseks mis tahes masinasse. See on varustatud Node.js.
2. Installiparameeter annab käsurea utiliidile npm juhise, et installimine on vajalik.
3. Käsureale on määratud 3 teeki, mis on vajalikud karmaga töötamiseks.
   • karma on põhiteek, mida kasutatakse testimise eesmärgil.
   • karma-chrome-launcher on eraldi teek, mis võimaldab Chrome'i brauseril karma käske ära tunda.
   • karma-jasmiin – see paigaldab jasmiini, mis on Karma sõltuv raamistik.

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

Käsurea utiliidi installimiseks käivitage allolev rida käsurealt

npm install -g karma-cli

• karma-cli abil installitakse karma käsurea liides, mida kasutatakse karma käskude kirjutamiseks käsurea liides. Lipp -g installib selle globaalselt, nii et karma käsk on saadaval igast kaustast.

Karma raamistiku konfigureerimine

Järgmine samm on karma konfigureerimine, mida saab teha käsuga

karma init

Pärast ülaltoodud sammu täitmist loob karma faili karma.conf.js. Tõenäoliselt näeb fail välja nagu allpool näidatud katkend

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

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

1. angular.js – See annab karmale teada, et teie rakendus sõltub AngularJS-i põhimoodulitest.
2. angular-mocks.js – See annab karmale käsu kasutada AngularJS-i ühiktestimise funktsiooni failist angular-mocks.js.
3. Kõik peamised rakenduse või äriloogika failid on teie rakenduse lib kaustas.
4. Testide kaust sisaldab kõiki ühikuteste.

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. Testi kirjelduse andmiseks kasutatakse kirjeldamise funktsiooni. Meie puhul anname oma testile kirjelduse „Näidistesti”.
2. Funktsiooni "it" kasutatakse testile nime andmiseks. Meie puhul anname oma testile nimeks "Tingimus on tõene". Testi nimi peab olema tähendusrikas.
3. Märksõnade 'expect' ja 'toBe' kombinatsioon näitab, milline on testitulemuse eeldatav ja tegelik väärtus. Kui tegelik ja eeldatav väärtus on samad, siis test läbib, muidu see ebaõnnestub.

Kui käivitate käsureal järgmise rea, käivitab see ülaltoodud testfaili

karma start

Allolev väljund on võetud IDE-st Webstorm kus ülaltoodud sammud läbi viidi.

1. Väljund tuleb sees olevasse Karma uurijasse Webstorm. See aken näitab kõigi karma raamistikus määratletud testide täitmist.
2. Siin näete, et kuvatakse sooritatud testi kirjeldus, mis on "Näidistesti".
3. Järgmisena näete, et test ise, mille nimi on "Tingimus on tõene", käivitatakse.
4. Pange tähele, et kuna kõigi testide kõrval on roheline ikoon "Ok", mis sümboliseerib kõigi testide läbimist.

Mis on Jasmine AngularJS-i ühiktestimises?

Karma otsustab, kus testid käivitatakse, samas kui Jasmine otsustab, kuidas need kirjutatakse. Jasmine on käitumispõhine spetsifikatsiooniraamistik, mis pakub sellel lehel olevates näidetes kasutatavat sõnavara, mistõttu on käivitaja kõrvale installitud ka karma-jasmine adapter.

Jasmine panustab nelja ehitusplokki:

• kirjelda(): Rühmitab seotud spetsifikatsioonid komplekti ja aktsepteerib testitava üksuse loetavat kirjeldust.
• see(): Deklareerib ühe spetsifikatsiooni. Nimi peaks näitama kontrollitavat käitumist, mitte kutsutavat meetodit.
• expect() vastete leidmiseks: Võrdleb tegelikku väärtust oodatavaga. Levinud vastete hulka kuuluvad „toBe”, „toEqual”, „toContain” ja „toBeDefined”.
• enneIga() ja pärastIga(): Käivita seadistamine ja lahtivõtmine enne ja pärast iga spetsifikatsiooni, mis hoiab iga testi sõltumatuna.

Jasmine pakub ka spioone. Spioon asendab reaalse funktsiooni salvestatud asendusfunktsiooniga, nii et kontrollerit saab testida ilma reaalajas HTTP-lõpp-punkti kutsumata. Kuna Jasmine ei vaja DOM-i ega omaenda kinnitusteeki, on Karma ja Jasmine'i kombinatsioon kõige lihtsam viis AngularJS-i käitamiseks. JavaSkripti ühikutestid.

AngularJS-kontrollerite testimine

Karma testimise raamistikul on ka funktsioonid kontrollerite otsast lõpuni testimiseks. See hõlmab kontrollerites kasutatava objekti $scope testimist.

Vaatame näidet selle kohta, kuidas seda saavutada.

Meie näites

Kõigepealt peaksime määratlema kontrolleri. See kontroller viib läbi alltoodud toimingud

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

Meie test testib selle kontrolleri olemasolu ja kontrollib ka seda, kas $scope objekti ID-muutuja on seatud väärtusele 5.

Kõigepealt peame tagama, et järgmised eeltingimused on paigas

Paigalda angular-mocks teek npm kaudu. Seda saab teha käsurealt järgmise rea käivitamisega:

npm install angular-mocks --save-dev

Järgmiseks tuleb muuta faili karma.conf.js, et tagada testi jaoks õigete failide kaasamine. Allolev segment näitab lihtsalt karma.conf.js failiosa, mida tuleb muuta

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

• Failiparameeter annab Karmale põhimõtteliselt teada kõik failid, mida testide läbiviimiseks vaja on.
• AngularJS ühiktestide käivitamiseks on vaja faile angular.js ja angular-mocks.js.
• Fail index.js hakkab sisaldama meie kontrolleri koodi
• Testkaust sisaldab kõiki meie AngularJS-i teste

Allpool on meie AngularJS kood, mis salvestatakse failina Index.js meie rakenduse testkausta.

Allolev kood teeb lihtsalt järgmisi asju

1. Loo AngularJS 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 = angular.module('sampleApp', []);
sampleApp.controller('AngularJSController', function($scope) {
  $scope.ID = 5;
});

Kui ülaltoodud kood on edukalt käivitatud, oleks järgmine samm luua a Testjuhtum tagamaks, et kood on õigesti kirjutatud ja täidetud.

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

Kood asub eraldi failis ControllerTest.js, mis paigutatakse testkausta. Allolev kood teeb lihtsalt järgmisi põhitoiminguid

1. beforeEach funktsioon – seda funktsiooni kasutatakse meie AngularJS mooduli nimega 'sampleApp' laadimiseks enne testi käivitamist. Pane tähele, et see on mooduli nimi index.js failis.
2. $controller objekt luuakse maketiobjektina kontrollerile „AngularJSController”, mis on defineeritud meie index.js failis. Igasuguses ühiktestimises esindab mock-objekt testobjekti, mida tegelikult testimiseks kasutatakse. See mock-objekt simuleerib tegelikult meie kontrolleri käitumist.
3. beforeEach(inject(function(_$controller_)) – seda kasutatakse meie testis näidisobjekti sisestamiseks, et see käituks nagu tegelik kontroller.
4. var $scope = {}; See on näidisobjekt, mida luuakse objekti $scope jaoks.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Siin kontrollime 'AngularJSController' nimelise kontrolleri olemasolu. Samuti määrame kõik meie kontrolleri $scope objekti muutujad Index.js failis testfaili $scope objektile.
6. Lõpuks võrdleme $scope.ID-ga 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);
    });
  });
});

Ülaltoodud test jookseb karmabrauseris ja annab sama läbimise tulemuse, nagu oli näidatud eelmises teemas.

AngularJS direktiivide testimine

Karma testimise raamistikul on ka funktsionaalsus kohandatud direktiivide testimiseks. See hõlmab malliURL, mida kasutatakse kohandatud direktiivide sees.

Vaatame näidet selle kohta, kuidas seda saavutada.

Meie näites määratleme esmalt kohandatud direktiivi, mis teeb järgmisi asju

1. Looge AngularJS-i moodul nimega sampleApp
2. Loo kohandatud direktiiv nimega – guru99
3. Looge funktsioon, mis tagastab malli koos päisesildiga, mis kuvab teksti "See on AngularJS-i testimine".

var sampleApp = angular.module('sampleApp', []);
sampleApp.directive('guru99', function () {
  return {
    restrict: 'E',
    replace: true,
    template: '<h1>This is AngularJS Testing</h1>'
  };
});

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

Kood asub eraldi failis nimega DirektiivTest.js, mis paigutatakse testkausta. Allolev kood teeb lihtsalt järgmisi põhitoiminguid

1. beforeEach funktsioon – seda funktsiooni kasutatakse meie AngularJS mooduli 'sampleApp' laadimiseks enne testi käivitamist.
2. Direktiivi kompileerimiseks kasutatakse teenust $compile. See teenus on kohustuslik ja tuleb deklareerida, et AngularJS saaks seda meie kohandatud direktiivi kompileerimiseks kasutada.
3. $rootScope on iga AngularJS-i rakenduse peamine ulatus. Oleme varasemates peatükkides näinud kontrolleri $scope-objekti. $scope-objekt on $rootScope-objekti alamobjekt. See deklareeritakse siin seetõttu, et me muudame DOM-is olevat HTML-silti oma kohandatud direktiivi kaudu. Seega peame kasutama $rootScope-teenust, mis tegelikult kuulab või teab, millal HTML-dokumendis toimub mõni muudatus.
4. muutuv element = $kompileeri(“ ”)($rootScope) – Seda kasutatakse selleks, et kontrollida, kas meie direktiiv sisestatakse õigesti. Direktiiv registreeritakse kaamelisuuruse nimega guru99, seega AngularJS vastab väiketähelisele elemendile. märgistuses. Seega kasutatakse seda lauset selle kontrolli tegemiseks.
5. expect(element.html()).toContain(“See on AngularJS testimine”) – Seda kasutatakse funktsiooni expect juhendamiseks, et see peaks leidma elemendi (meie puhul h1 sildi), mis sisaldab sisemist HTML-teksti „See on AngularJS 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 directive
    var element = $compile("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Ülaltoodud test jookseb karmabrauseris ja annab sama läbimise tulemuse, nagu oli näidatud eelmises teemas.

AngularJS rakenduste otsast lõpuni testimine

Karma testimise raamistik koos raamistikuga nimega ProtracToril on funktsionaalsus veebirakenduse otsast lõpuni testimiseks.

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

Vaatame näidet selle kohta, kuidas seda saavutada.

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

1. Esmalt loome muutuja nimega "õpetus" ja määrame sellele ühes etapis mõned võtme-väärtuste paarid. Iga võtme-väärtuse paari kasutatakse tabeli kuvamisel andmetena. Seejärel määratakse õpetusmuutuja ulatuse objektile, nii et sellele pääseb juurde meie vaatest.
2. Tabeli iga andmerea jaoks kasutame ng-repeat direktiivi. See direktiiv läbib õpetuse ulatuse objekti iga võtme-väärtuse paari, kasutades muutujat ptutor.
3. Lõpuks kasutame silt koos võtmeväärtuste paaridega (ptutor.Name ja ptutor.Descriptioon) tabeliandmete kuvamiseks.

<table>
  <tr ng-repeat="ptutor in tutorial">
    <td>{{ ptutor.Name }}</td>
    <td>{{ ptutor.Description }}</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

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

Meie test testib tegelikult ng-repeat direktiivi ja tagab, et see sisaldab 3 rida andmeid, nagu peaks ülaltoodud näitest.

Kõigepealt peame tagama, et järgmised eeltingimused on paigas

Paigaldage profftractor teeki npm kaudu. Seda saab teha käsurealt järgmise rea käivitamisega

npm install -g protractor

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

Kood asub eraldi failis nimega CompleteTest.js , mis paigutatakse testkausta. Allolev kood teeb lihtsalt järgmisi põhitoiminguid

1. Brauseri funktsiooni pakub protractor teek ja eeldab, et meie AngularJS rakendus (ülal näidatud koodiga) töötab meie saidil URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); -See koodirida hangib tegelikult ng-repeat direktiivi, mille täidab kood 'ptutor in tutorial'. Element ja by.repeater on pro poolt pakutavad spetsiaalsed märksõnad.tractor teek, mis võimaldab meil saada ng-repeat direktiivi üksikasju.
3. oodata(loend.count()).toEqual(3); – Lõpetuseks kasutame ootusfunktsiooni, et näha, et ng-repeat direktiivi tulemusel kantakse meie tabelisse tõepoolest 3 üksust.

describe('Unit testing end to end', function() {
  beforeEach(function() {
    browser.get('http://localhost:8080/Guru99/');
  });

  it('Check the ng directive', function() {
    var list = element.all(by.repeater('ptutor in tutorial'));
    expect(list.count()).toEqual(3);
  });
});

Ülaltoodud test jookseb karmabrauseris ja annab sama läbimise tulemuse, nagu oli näidatud eelmises teemas.

Karma vs Jasmine vs Protractor: Peamised erinevused

Sellel lehel kasutatavaid kolme tööriista aetakse sageli segi, kuna need asuvad samal käsureal. Igaüks neist hõivab testimispinu erineva kihi, nagu allolev tabel selgelt näitab.

Lühidalt, Jasmine kirjutab testi, Karma viib selle ellu ja Pro...tractor laiendab sama Jasmine'i süntaksit täielikult renderdatud lehele.

AngularJS-i ühiktestimise parimad tavad

Väike hulk harjumusi hoiab AngularJS-i komplekti rakenduse kasvades kiire ja usaldusväärse.

1. Testi ühte seadet korraga. Laadi beforeEachi sisse ainult testitav moodul ja imiteeri iga kaastöötajat, nii et tõrge osutab ühele failile.
2. Ära kunagi helista päris serverisse. Kasutage angular-mocksi teenust $httpBackend, et tagastada valmis vastuseid. Seejärel töötavad testid võrguühenduseta ja annavad igas masinas identsed tulemused.
3. Hoidke spetsifikatsioonide nimed käitumuslikult korrektsed. Nimi, näiteks „tagastab kontrolleri initsialiseerimisel 5”, loeb aruandes paremini kui „test1”.
4. Loputa seedimistsüklit alati. Pärast ulatusandmete muutmist kutsu $rootScope.$digest() välja, vastasel juhul seosed ja jälgijad ei uuene kunagi ning väited ebaõnnestuvad valel põhjusel.
5. Mõõda katvust, aga hinda seda hoolikalt. Lisa karma-katvus, et näha testimata harusid. Suur katvus nõrkade väidetega peidab ikkagi defekte.
6. Käivita komplekt pideva integratsiooni režiimis. Kasutage peata Chrome'i käivitajat, et samad spetsifikatsioonid käivituksid igal muudatuste tegemisel, mitte ainult arendaja masinas.

Nende reeglite rakendamine muudab ülaltoodud näited isoleeritud demonstratsioonidest pärand-AngularJS-i koodibaasile regressiooniturvavõrguks. Laiema pildi saamiseks vaadake AngularJS õpetus seeria.

KKK