AngularJS-i üksuse testimine: Karma Jasmine'i õpetus

Üks Angular.JS-i säravamaid omadusi on Testimine aspekt. Kui Google'i arendajad AngularJS-i välja töötasid, pidasid nad silmas testimist ja veendusid, et kogu AngularJS-i raamistik on testitav.

AngularJS-is tehakse testimine tavaliselt Karma (raamistiku) abil. Angular JS testimist saab läbi viia ka ilma Karmata, kuid Karma raamistikul on AngularJS koodi testimiseks nii geniaalne funktsionaalsus, et seda raamistikku on mõttekas kasutada.

AngularJS-is saame esineda Üksuse testimine eraldi kontrollerite ja käskkirjade jaoks.
Samuti saame läbi viia AngularJS-i lõpp-testi, mis testib kasutaja vaatenurgast.

Karma raamistiku tutvustus ja paigaldamine

Karma on a testimise automatiseerimise tööriist loodud Google'i Angular JS meeskonna poolt. Karma 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

kus,

npm on sõlme paketihalduri käsurea utiliit, mida kasutatakse kohandatud moodulite installimiseks mis tahes masinasse.
Installiparameeter annab käsurea utiliidile npm juhise, et installimine on vajalik.
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 karma-cli

kus,

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

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: [
  '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

"Teie rakenduse nimi" – See asendatakse teie rakenduse nimega.
"Teie rakenduse nimi'/AngularJS/AngularJS.js' - See ütleb karmale, et teie rakendus sõltub AngularJS-i põhimoodulitest
„Teie rakenduse nimi”/AngularJS-mocks/AngularJS-mocks.js – See käsib karmal kasutada AngularJS-i jaoks üksuse testimise funktsiooni failist Angular.JS-mocks.js.
Kõik peamised rakenduse või äriloogika failid on teie rakenduse lib kaustas.
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

Testi kirjelduse andmiseks kasutatakse kirjeldamise funktsiooni. Meie puhul anname oma testile kirjelduse „Näidistesti”.
Funktsiooni "it" kasutatakse testile nime andmiseks. Meie puhul anname oma testile nimeks "Tingimus on tõene". Testi nimi peab olema tähendusrikas.
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.

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

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

Looge ID-muutuja ja määrake sellele väärtus 5.
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

Installige Angular.JS-mocksi teek npm kaudu. Seda saab teha käsurealt alloleva rea käivitamisega

npm install Angular JS-mocks

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/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

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

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

Allolev kood teeb lihtsalt järgmisi asju

Loo AngularJS moodul nimega sampleApp
Looge kontroller nimega AngularJSController
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 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

funktsioon beforeEach – seda funktsiooni kasutatakse meie mooduli AngularJS.JS laadimiseks nimega 'sampleApp' enne testkäivitust. Pange tähele, et see on faili index.js mooduli nimi.
Objekt $controller luuakse kontrolleri "Angular JSController" mudelobjektina, mis on määratletud meie failis index.js. Igasuguses ühikutestimises kujutab näidisobjekt näivat objekti, mida testimiseks tegelikult kasutatakse. See näidisobjekt simuleerib tegelikult meie kontrolleri käitumist.
beforeEach(inject(function(_$controller_)) – seda kasutatakse meie testis näidisobjekti sisestamiseks, et see käituks nagu tegelik kontroller.
var $scope = {}; See on näidisobjekt, mida luuakse objekti $scope jaoks.
var kontroller = $kontroller('AngularJSController', { $scope: $scope }); – Siin kontrollime kontrolleri nimega „Angular.JSController” olemasolu. Samuti määrame siin kõik muutujad meie kontrolleris olevast objektist $scope failis Index.js meie testfailis olevale objektile $scope
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 funktsioonid kohandatud direktiivide testimiseks. See hõlmab malli URL-e, mida kasutatakse kohandatud direktiivides.

Vaatame näidet selle kohta, kuidas seda saavutada.

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

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

var sampleApp = AngularJS.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

funktsioon beforeEach – seda funktsiooni kasutatakse meie Angular JS-i mooduli "sampleApp" laadimiseks enne testimist.
Käskkirja koostamiseks kasutatakse teenust $compile. See teenus on kohustuslik ja seda tuleb deklareerida, et Angular.JS saaks seda kasutada meie kohandatud direktiivi koostamiseks.
$rootscope on mis tahes AngularJS.JS rakenduse esmane ulatus. Varasemates peatükkides oleme näinud kontrolleri objekti $scope. Noh, objekt $scope on objekti $rootscope alamobjekt. Põhjus, miks seda siin deklareeritakse, on see, et muudame oma kohandatud direktiivi kaudu tegelikku HTML-i märgendit DOM-is. Seetõttu peame kasutama teenust $rootscope, mis tegelikult kuulab või teab, kui HTML-dokumendis toimub muudatus.
var element = $compile(“ ”) – Seda kasutatakse selleks, et kontrollida, kas meie direktiiv on süstitud nii, nagu peaks. Meie kohandatud direktiivi nimi on Guru99 ja me teame oma kohandatud direktiivide peatükist, et kui direktiiv sisestatakse meie HTML-i, sisestatakse see kui " '. Seetõttu kasutatakse seda väidet selle kontrolli tegemiseks.
expect(element.html()).toContain("See on AngularJS-i testimine") – seda kasutatakse ootusfunktsiooni juhendamiseks, et see peaks leidma elemendi (meie puhul märgendi div), mis sisaldab sisemist HTML-i 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("<ng-Guru99></ng-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 JS rakenduste testimine otsast lõpuni

Karma testimise raamistikul koos raamistikuga Protractor on veebirakenduse otsast lõpuni testimise funktsioon.

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.

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.
Tabeli iga andmerea jaoks kasutame ng-repeat direktiivi. See direktiiv läbib õpetuse ulatuse objekti iga võtme-väärtuse paari, kasutades muutujat ptutor.
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 = AngularJS.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

Installige nurgamõõtekogu npm kaudu. Seda saab teha käsurealt alloleva rea käivitamisega

"npm install 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

Brauseri funktsiooni pakub protraktori teek ja see eeldab, et meie AngularJS-i rakendus (ülal näidatud koodiga) töötab meie saidi URL-is – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -See koodirida tõmbab tegelikult ng-repeat direktiivi, mis on täidetud koodiga "ptutor in tutorial". Element ja by.repeater on erilised märksõnad, mille pakub protraktori teegi, mis võimaldab meil saada üksikasju ng-repeat direktiivi kohta.
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.

kokkuvõte

AngularJSis testimine saavutatakse karmaraamistiku abil, mille on välja töötanud Google ise.
Karma raamistik installitakse sõlme paketihalduri abil. Põhilised moodulid, mis tuleb põhitestimiseks paigaldada, on karma, karma-kroom-käivitaja, karma-jasmiin ja karma-cli.
Testid on kirjutatud eraldi js-failidesse, mida tavaliselt hoitakse teie rakenduse testkaustas. Nende testfailide asukoht tuleb mainida spetsiaalses konfiguratsioonifailis nimega karma.conf.js. Karma kasutab seda konfiguratsioonifaili kõigi testide täitmisel.
Karmat saab kasutada ka kontrollerite ja kohandatud direktiivide testimiseks.
Veebi testimise lõpuleviimiseks tuleb paketihalduri Node kaudu installida teine raamistik, mida nimetatakse protraktoriks. See raamistik pakub spetsiaalseid meetodeid, mida saab kasutada kõigi HTML-lehe elementide testimiseks.

AngularJS-i üksuse testimine: Karma Jasmine'i õpetus

Karma raamistiku tutvustus ja paigaldamine

Karma paigaldamine

Karma raamistiku konfigureerimine

AngularJS-kontrollerite testimine

AngularJS direktiivide testimine

AngularJS JS rakenduste testimine otsast lõpuni

kokkuvõte

Võta see postitus kokku järgmiselt:

Tellige uudiskiri

Karma raamistiku tutvustus ja paigaldamine

Karma paigaldamine

Karma raamistiku konfigureerimine

SEOTUD ARTIKLID

AngularJS-kontrollerite testimine

AngularJS direktiivide testimine

AngularJS JS rakenduste testimine otsast lõpuni

kokkuvõte

Võta see postitus kokku järgmiselt:

Tellige uudiskiri