AngularJS-yksikön testaus: Karma Jasmine -opastus

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

AngularJS:ssä testaus suoritetaan yleensä käyttämällä Karmaa (kehys). Angular JS -testaus voidaan suorittaa ilman Karmaa, mutta Karma-kehyksessä on niin loistava toiminnallisuus AngularJS-koodin testaamiseen, että sitä on järkevää käyttää.

AngularJS:ssä voimme esiintyä Yksikkötestaus erikseen säätimille ja ohjeille.
Voimme myös suorittaa AngularJS:n lopputestauksen, joka testaa käyttäjän näkökulmasta.

Karma-kehyksen esittely ja asennus

Karma on a testausautomaatiotyökalu loi Googlen Angular JS -tiimi. Ensimmäinen vaihe Karman käyttämisessä on Karman asentaminen. Karma asennetaan npm:n kautta (joka on paketinhallinta, jota käytetään moduulien helppoon asentamiseen paikalliselle koneelle).

Karman asennus

Karman asennus npm:n kautta tapahtuu kaksivaiheisessa prosessissa.

Vaihe 1) Suorita alla oleva rivi komentoriviltä

npm install karma karma-chrome-launcher karma-jasmine

Jossa,

npm on komentorivityökalu solmun pakettien hallintaan, jota käytetään mukautettujen moduulien asentamiseen mihin tahansa koneeseen.
Asennusparametri kertoo npm-komentorivityökalulle, että asennus vaaditaan.
Komentorivillä on määritetty 3 kirjastoa, jotka tarvitaan toimimaan karman kanssa.

karma on ydinkirjasto, jota käytetään testaustarkoituksiin.
karma-chrome-launcher on erillinen kirjasto, jonka avulla kromi-selain voi tunnistaa karma-komennot.
karma-jasmine – Tämä asentaa jasmiinin, joka on riippuvainen kehys Karmalle.

Vaihe 2) Seuraava vaihe on karma-komentorivi-apuohjelman asentaminen. Tätä tarvitaan karma rivikomentojen suorittamiseen. Karmalinja-apuohjelmaa käytetään alustamaan karmaympäristö testausta varten.

Asenna komentorivityökalu suorittamalla alla oleva rivi komentoriviltä

npm install karma-cli

jossa,

karma-cli:llä asennetaan karman komentoriviliittymä, jota käytetään karma-komentojen kirjoittamiseen komentoriviliittymään.

Karma-kehyksen konfigurointi

Seuraava askel on karman konfigurointi, joka voidaan tehdä komennon kautta

"karma –init"

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

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

Yllä olevat konfigurointitiedostot kertovat karma-ajonaikaiselle moottorille seuraavat asiat

"Hakemuksesi nimi" – Tämä korvataan sovelluksesi nimellä.
"Sovelluksesi nimi'/AngularJS/AngularJS.js' – Tämä kertoo karmalle, että sovelluksesi riippuu AngularJS:n ydinmoduuleista
"Sovelluksesi nimi"/AngularJS-mocks/AngularJS-mocks.js – Tämä käskee karmaa käyttämään AngularJS:n yksikkötestaustoimintoa Angular.JS-mocks.js-tiedostosta.
Kaikki pääsovellus- tai liiketoimintalogiikkatiedostot ovat sovelluksesi lib-kansiossa.
Testit-kansio sisältää kaikki yksikkötestit.

Tarkistaaksesi, toimiiko karma, luo tiedosto nimeltä Sample.js, lisää alla oleva koodi ja sijoita se testihakemistoon.

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

Yllä olevalla koodilla on seuraavat näkökohdat

Kuvausfunktiota käytetään testin kuvauksen antamiseen. Meidän tapauksessamme annamme testillemme kuvauksen "Näytetesti".
'it'-funktiota käytetään antamaan testille nimi. Meidän tapauksessamme annamme testimme nimeksi "ehto on tosi". Testin nimen tulee olla merkityksellinen.
Avainsanojen 'expect' ja 'toBe' yhdistelmä kertoo, mikä on testituloksen odotettu ja todellinen arvo. 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 otettu IDE:stä Webstorm jossa yllä mainitut vaiheet suoritettiin.

Tulos tulee sisällä olevasta Karma Explorerista Webstorm. Tämä ikkuna näyttää kaikkien karmakehyksessä määriteltyjen testien suorittamisen.
Tässä näet, että suoritetun testin kuvaus näytetään, joka on "Näytetesti".
Seuraavaksi voit nähdä, että itse testi, jonka nimi on "Ehto on tosi", suoritetaan.
Huomaa, että koska kaikkien testien vieressä on vihreä "Ok"-kuvake, joka symboloi kaikkien testien läpäisyä.

AngularJS-ohjainten testaus

Karman testauskehyksessä on myös toiminnot ohjainten testaamiseen päästä päähän. Tämä sisältää ohjaimissa käytettävän $scope-objektin testauksen.

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

Esimerkissämme

Ensin meidän on määriteltävä ohjain. Tämä ohjain suorittaa alla mainitut vaiheet

Luo tunnusmuuttuja ja anna sille arvo 5.
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 meidän on varmistettava, että seuraavat edellytykset täyttyvät

Asenna Angular.JS-mocks-kirjasto npm:n kautta. Tämä voidaan tehdä suorittamalla alla oleva rivi komentokehotteessa

npm install Angular JS-mocks

Seuraavaksi karma.conf.js-tiedostoa muokataan varmistaaksesi, että oikeat tiedostot sisällytetään testiin. Alla oleva segmentti näyttää vain karma.conf.js:n tiedostoosan, jota on muokattava

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

'Files'-parametri periaatteessa kertoo Karmalle kaikki testien suorittamiseen tarvittavat tiedostot.
AngularJS.js- ja AngularJS-mocks.js-tiedostot vaaditaan AngularJS-yksikkötestien suorittamiseen
Index.js-tiedosto sisältää ohjaimen koodimme
Testikansio sisältää kaikki AngularJS-testimme

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

Alla oleva koodi tekee vain seuraavat asiat

Luo AngularJS-moduuli nimeltä sampleApp
Luo ohjain nimeltä AngularJSController
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 vaihe on luoda a Testitapaus varmistaaksesi, että koodi on kirjoitettu ja suoritettu oikein.

Testimme koodi on alla olevan kuvan mukainen.

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

beforeEach function – Tätä toimintoa käytetään AngularJS.JS-moduulin lataamiseen, nimeltään "sampleApp" ennen testiajoa. Huomaa, että tämä on index.js-tiedoston moduulin nimi.
$controller-objekti luodaan malliobjektiksi ohjaimelle ”Angular JSController”, joka on määritelty index.js-tiedostossamme. Kaikenlaisessa yksikkötestauksessa valeobjekti edustaa valeobjektia, jota todella käytetään testaukseen. Tämä valeobjekti itse asiassa simuloi ohjaimemme käyttäytymistä.
beforeEach(inject(function(_$controller_)) – Tätä käytetään valeobjektin lisäämiseen testissämme, jotta se käyttäytyy kuin varsinainen ohjain.
var $scope = {}; Tämä on valeobjekti, jota luodaan $scope-objektille.
var controller = $controller('AngularJSController', { $scope: $scope }); – Tässä tarkistamme 'Angular.JSController'-nimisen ohjaimen olemassaolon. Tässä kohdistamme myös kaikki muuttujat Index.js-tiedoston ohjaimessamme olevasta $scope-objektista testitiedostomme $scope-objektiin.
Lopuksi vertaamme $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äisytuloksen kuin edellisessä aiheessa.

AngularJS-direktiivien testaus

Karman testauskehyksessä on myös toiminnot mukautettujen ohjeiden testaamiseen. Tämä sisältää mallin URL-osoitteet, joita käytetään mukautetuissa ohjeissa.

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

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

Luo AngularJS-moduuli nimeltä sampleApp
Luo mukautettu ohje, jonka nimi on Guru99
Luo funktio, joka palauttaa mallin, jossa on otsikkotunniste, joka näyttää tekstin "Tämä on AngularJS-testaus".

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

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

Koodi on erillisessä tiedostossa, nimeltään DirektīvaTest.js, joka sijoitetaan testikansioon. Alla oleva koodi tekee vain seuraavat keskeiset asiat

beforeEach function – Tätä toimintoa käytetään Angular JS -moduulimme, nimeltään "sampleApp", lataamiseen ennen testiajoa.
Käskyn kääntämiseen käytetään $kääntämispalvelua. Tämä palvelu on pakollinen ja se on ilmoitettava, jotta Angular.JS voi käyttää sitä mukautetun ohjeemme kokoamiseen.
$rootscope on kaikkien AngularJS.JS-sovellusten ensisijainen alue. Olemme nähneet ohjaimen $scope-objektin aiemmissa luvuissa. No, $scope-objekti on $rootscope-objektin aliobjekti. Syy tähän on ilmoitettu, koska teemme muutosta todelliseen HTML-tunnisteeseen DOM:ssa mukautetun ohjeemme avulla. Siksi meidän on käytettävä $rootscope-palvelua, joka todella kuuntelee tai tietää, kun HTML-dokumentissa tapahtuu muutoksia.
var element = $compile(" ”) – Tätä käytetään tarkistamaan, tuleeko direktiivimme ruiskeena kuten pitää. Mukautetun ohjeemme nimi on Guru99, ja tiedämme mukautettujen ohjeiden luvusta, että kun direktiivi lisätään HTML-koodiimme, se lisätään muodossa " '. Siksi tätä lausuntoa käytetään tämän tarkistuksen tekemiseen.
expect(element.html()).toContain("Tämä on AngularJS-testaus") – Tätä käytetään ohjeistamaan odotusfunktiota, että sen pitäisi löytää elementti (tässä tapauksessa div-tunniste), joka sisältää sisäisen HTML-tekstin "Tämä on AngularJS-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 directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

Päästä loppuun AngularJS JS -sovellusten testaus

Karman testauskehyksellä ja Protractor-nimisellä viitekehyksellä on toiminnallisuus verkkosovelluksen testaamiseen päästä päähän.

Se ei siis ole vain ohjeiden ja ohjaimien testausta, vaan myös kaiken muun HTML-sivulla mahdollisesti esiintyvän testaamista.

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

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

Luomme ensin muuttujan nimeltä "tutorial" ja määritämme sille avainarvopareja yhdessä vaiheessa. Kutakin avain-arvo-paria käytetään datana taulukkoa näytettäessä. Opetusmuuttuja määrätään sitten laajuusobjektille, jotta sitä voidaan käyttää näkymästämme.
Jokaiselle taulukon tietoriville käytämme ng-repeat -direktiiviä. Tämä ohje käy läpi jokaisen opetusohjelman laajuusobjektin avainarvoparin käyttämällä muuttujaa ptutor.
Lopuksi käytämme -tunniste sekä avainarvoparit (ptutor.Name ja ptutor.Descriptioni) näyttääksesi taulukon tiedot.

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

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

Testimme itse asiassa testaa ng-repeat -direktiivin ja varmistaa, että se sisältää 3 riviä tietoja, kuten sen pitäisi yllä olevasta esimerkistä.

Ensin meidän on varmistettava, että seuraavat edellytykset täyttyvät

Asenna astelevykirjasto npm:n kautta. Tämä voidaan tehdä suorittamalla alla oleva rivi komentokehotteessa

"npm install protractor"

Testimme koodi on alla olevan kuvan mukainen.

Koodi on erillisessä tiedostossa nimeltä CompleteTest.js , joka sijoitetaan testikansioon. Alla oleva koodi tekee vain seuraavat keskeiset asiat

Selaintoiminnon tarjoaa astelevykirjasto, ja se olettaa, että AngularJS-sovelluksemme (yllä näkyvällä koodilla) on käynnissä sivustomme URL-osoitteessa - http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Tämä koodirivi hakee itse asiassa ng-repeat-direktiivin, joka täytetään koodilla "ptutor in tutorial". Elementti ja by.repeater ovat astelevykirjaston tarjoamia erityisiä avainsanoja, joiden avulla voimme saada tietoja ng-repeat-direktiivistä.
odottaa(list.count()).toEqual(3); – Lopuksi käytämme odotusfunktiota nähdäksemme, että ng-repeat-direktiivin seurauksena todellakin saamme taulukkoomme 3 kohdetta.

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

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

Yhteenveto

AngularJS-testaus suoritetaan käyttämällä karma-kehystä, joka on Googlen itsensä kehittämä kehys.
Karma-kehys asennetaan solmun pakettien hallinnan avulla. Tärkeimmät moduulit, jotka on asennettava perustestaukseen, ovat karma, karma-chrome-laukaisin, karma-jasmiini ja karma-cli.
Testit kirjoitetaan erillisiin js-tiedostoihin, jotka yleensä säilytetään sovelluksesi testikansiossa. Näiden testitiedostojen sijainti on mainittava erityisessä asetustiedostossa nimeltä karma.conf.js. Karma käyttää tätä asetustiedostoa suorittaessaan kaikkia testejä.
Karmaa voidaan käyttää myös ohjaimien ja mukautettujen ohjeiden testaamiseen.
Päästä loppuun verkkotestauksen suorittamiseksi toinen kehys, nimeltään astemittari, on asennettava Node-paketinhallinnan kautta. Tämä kehys tarjoaa erityisiä menetelmiä, joita voidaan käyttää kaikkien HTML-sivun elementtien testaamiseen.

Saatat tykätä:

Karma-kehyksen esittely ja asennus

Karman asennus

Karma-kehyksen konfigurointi

AIHEESEEN LIITTYVÄT ARTIKKELIT

AngularJS-ohjainten testaus

AngularJS-direktiivien testaus

Päästä loppuun AngularJS JS -sovellusten testaus

Yhteenveto