AngularJS egység tesztelése: Karma Jasmine oktatóanyag

Az Angular.JS egyik legragyogóbb tulajdonsága a Tesztelés vonatkozás. Amikor a Google fejlesztői kifejlesztették az AngularJS-t, szem előtt tartották a tesztelést, és gondoskodtak arról, hogy a teljes AngularJS keretrendszer tesztelhető legyen.

Az AngularJS-ben a tesztelést általában a Karma (keretrendszer) segítségével végzik. Az Angular JS tesztelése elvégezhető Karma nélkül is, de a Karma keretrendszer olyan zseniális funkciókkal rendelkezik az AngularJS kód teszteléséhez, hogy van értelme ennek a keretrendszernek a használata.

Az AngularJS-ben teljesíthetünk Egység tesztelése külön a vezérlőkhöz és az irányelvekhez.
Az AngularJS végponti tesztelését is elvégezhetjük, amely felhasználói szemszögből tesztel.

A Karma keretrendszer bemutatása és telepítése

A karma a tesztelő automatizálási eszköz a Google Angular JS csapata készítette. A Karma használatának első lépése a Karma telepítése. A Karma telepítése npm-en keresztül történik (ez egy csomagkezelő, amelyet a modulok egyszerű telepítésére használnak egy helyi gépen).

A Karma telepítése

A Karma npm-en keresztüli telepítése két lépésben történik.

Step 1) Hajtsa végre az alábbi sort a parancssorból

npm install karma karma-chrome-launcher karma-jasmine

ahol,

Az npm a csomóponti csomagkezelő parancssori segédprogramja, amellyel egyéni modulokat telepíthet bármilyen gépre.
Az install paraméter utasítja az npm parancssori segédprogramot, hogy a telepítés szükséges.
A parancssorban 3 könyvtár van megadva, amelyek szükségesek a karma kezeléséhez.

A karma az alapvető könyvtár, amelyet tesztelési célokra használnak majd.
A karma-chrome-launcher egy külön könyvtár, amely lehetővé teszi a karma parancsok felismerését a Chrome böngésző számára.
karma-jázmin – Ez telepíti a jázmint, amely a karma függő kerete.

Step 2) A következő lépés a karma parancssori segédprogram telepítése. Ez szükséges a karma sor parancsainak végrehajtásához. A karma vonal segédprogramot a karma környezet tesztelés céljából történő inicializálására fogják használni.

A parancssori segédprogram telepítéséhez hajtsa végre az alábbi sort a parancssorból

npm install karma-cli

ahol,

A karma-cli a karma parancssori felületének telepítésére szolgál, amely a karma parancsok parancssori felületen történő írására szolgál.

A Karma keretrendszer konfigurálása

A következő lépés a karma konfigurálása, amit a paranccsal lehet megtenni

"karma –init"

A fenti lépés végrehajtása után a karma létrehoz egy karma.conf.js fájlt. A fájl valószínűleg úgy fog kinézni, mint az alább látható részlet

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

A fenti konfigurációs fájlok a következőket mondják el a karma futásidejű motornak

"Az alkalmazás neve" – Ezt felváltja az alkalmazás neve.
"Az alkalmazás neve"/AngularJS/AngularJS.js" – Ez azt mondja a karmának, hogy az alkalmazásod az AngularJS alapvető moduljaitól függ
"Az alkalmazás neve"/AngularJS-mocks/AngularJS-mocks.js" – Ez arra utasítja a karmát, hogy használja az AngularJS egység tesztelési funkcióját az Angular.JS-mocks.js fájlból.
Az összes fő alkalmazás vagy üzleti logikai fájl megtalálható az alkalmazás lib mappájában.
A tesztek mappa az összes egységtesztet tartalmazza.

A karma működésének ellenőrzéséhez hozzon létre egy Sample.js nevű fájlt, írja be az alábbi kódot, és helyezze el a tesztkönyvtárba.

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

A fenti kód a következő szempontokkal rendelkezik

A leírás függvény a teszt leírására szolgál. Esetünkben tesztünkhöz a „Mintateszt” leírást adjuk.
Az 'it' függvény a teszt elnevezésére szolgál. Esetünkben tesztünk nevét „A feltétel igaz”-ként adjuk meg. A teszt nevének értelmesnek kell lennie.
Az "expect" és a "toBe" kulcsszó kombinációja azt mondja ki, hogy mi a teszteredmény várható és tényleges értéke. Ha a tényleges és a várt érték megegyezik, akkor a teszt sikeres lesz, különben sikertelen lesz.

Amikor végrehajtja a következő sort a parancssorban, akkor a fenti tesztfájlt hajtja végre

KARMA start

Az alábbi kimenet az IDE-ből származik Webstorm amelyben a fenti lépéseket végrehajtották.

A kimenet a benne lévő Karma felfedezőben érkezik Webstorm. Ez az ablak a karma keretrendszerben meghatározott összes teszt végrehajtását mutatja.
Itt láthatja, hogy megjelenik a végrehajtott teszt leírása, amely „Mintateszt”.
Ezután láthatja, hogy maga a „Feltétel igaz” nevű teszt végrehajtásra kerül.
Vegye figyelembe, hogy mivel minden teszt mellett van egy zöld „Ok” ikon, amely az összes teszt sikerességét szimbolizálja.

Az AngularJS vezérlők tesztelése

A karma tesztelési keretrendszer rendelkezik azzal a funkcióval is, hogy tesztelje a vezérlőket a végétől a végéig. Ez magában foglalja a vezérlőkben használt $scope objektum tesztelését.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

A mi példánkban

Először meg kell határoznunk egy vezérlőt. Ez a vezérlő hajtja végre az alábbi lépéseket

Hozzon létre egy azonosító változót, és rendelje hozzá az 5-ös értéket.
Rendelje hozzá az azonosító változót a $scope objektumhoz.

Tesztünk megvizsgálja ennek a vezérlőnek a létezését, és azt is, hogy a $scope objektum ID változója 5-re van-e állítva.

Először is meg kell győződnünk arról, hogy a következő előfeltételek teljesülnek

Telepítse az Angular.JS-mocks könyvtárat az npm-en keresztül. Ezt a parancssor alatti sor végrehajtásával teheti meg

npm install Angular JS-mocks

A következő lépés a karma.conf.js fájl módosítása annak biztosítása érdekében, hogy a megfelelő fájlok szerepeljenek a tesztben. Az alábbi szegmens csak a karma.conf.js fájl azon részét mutatja, amelyet módosítani kell

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

A 'files' paraméter alapvetően elmondja a Karmának a tesztek futtatásához szükséges összes fájlt.
Az AngularJS.js és az AngularJS-mocks.js fájl szükséges az AngularJS egységtesztek futtatásához
Az index.js fájl a vezérlő kódunkat fogja tartalmazni
A tesztmappa az összes AngularJS-tesztünket fogja tartalmazni

Az alábbiakban látható az Angular.JS kódunk, amelyet Index.js fájlként tárolunk alkalmazásunk tesztmappájában.

Az alábbi kód csak a következő dolgokat hajtja végre

Létrehozása AngularJS modul mintaapp néven
Hozzon létre egy AngularJSController nevű vezérlőt
Hozzon létre egy ID nevű változót, adjon neki 5 értéket, és rendelje hozzá a $scope objektumhoz

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

A fenti kód sikeres végrehajtása után a következő lépés az a Teszt eset hogy megbizonyosodjon a kód helyes megírásáról és végrehajtásáról.

Tesztünk kódja az alábbiak szerint lesz látható.

A kód egy különálló, ControllerTest.js nevű fájlban lesz, amely a tesztmappába kerül. Az alábbi kód csak a következő kulcsfontosságú dolgokat hajtja végre

beforeEach függvény – Ez a funkció a „sampleApp” nevű AngularJS.JS modul betöltésére szolgál a tesztfutás előtt. Vegye figyelembe, hogy ez a modul neve az index.js fájlban.
A $controller objektum az index.js fájlunkban definiált „Angular JSController” vezérlő makettobjektumaként jön létre. Bármilyen egységtesztben, egy álobjektum egy álobjektumot jelent, amelyet ténylegesen a teszteléshez használnak. Ez az álobjektum valójában a vezérlőnk viselkedését fogja szimulálni.
beforeEach(inject(function(_$controller_)) – Ez a tesztünkben a hamis objektum beillesztésére szolgál, hogy az úgy viselkedjen, mint a tényleges vezérlő.
var $hatókör = {}; Ez egy hamis objektum a $scope objektumhoz.
var controller = $controller('AngularJSController', { $scope: $scope }); – Itt egy 'Angular.JSController' nevű vezérlő létezését vizsgáljuk. Itt az Index.js fájlban lévő vezérlőnkben lévő $scope objektumból az összes változót hozzárendeljük a tesztfájlunkban lévő $scope objektumhoz.
Végül összehasonlítjuk a $scope.ID-t az 5-tel

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

A fenti teszt a karma böngészőben fut, és ugyanazt a sikeres eredményt adja, mint az előző témakörben.

Az AngularJS irányelvek tesztelése

A karma tesztelési keretrendszer rendelkezik egyéni direktívák tesztelésére is alkalmas funkciókkal. Ide tartoznak az egyéni direktívákon belül használt templateURL-ek.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

Példánkban először egy egyéni direktívát fogunk meghatározni, amely a következő dolgokat teszi

Hozzon létre egy sampleApp nevű AngularJS modult
Hozzon létre egy egyéni direktívát a Guru99 névvel
Hozzon létre egy függvényt, amely egy sablont ad vissza egy fejléccímkével, amely a „Ez AngularJS tesztelés” szöveget jeleníti meg.

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

Miután a fenti kód sikeresen lefutott, a következő lépés egy teszteset létrehozása lenne, hogy megbizonyosodjon a kód helyes megírásáról és végrehajtásáról. Tesztünk kódja az alábbiak szerint lesz látható

A kód a DirektívaTest.js nevű külön fájlban lesz, amely a tesztmappába kerül. Az alábbi kód csak a következő kulcsfontosságú dolgokat hajtja végre

beforeEach function – Ez a funkció a „sampleApp” nevű Angular JS modul betöltésére szolgál a tesztfutás előtt.
A direktíva fordításához a $compile szolgáltatás szolgál. Ez a szolgáltatás kötelező, és deklarálni kell, hogy az Angular.JS felhasználhassa egyéni direktívánk összeállításához.
A $rootscope minden AngularJS.JS alkalmazás elsődleges hatóköre. A vezérlő $scope objektumát a korábbi fejezetekben láthattuk. Nos, a $scope objektum a $rootscope objektum gyermekobjektuma. Ez azért van itt deklarálva, mert az egyéni direktíván keresztül módosítunk egy tényleges HTML-címkét a DOM-ban. Ezért a $rootscope szolgáltatást kell használnunk, amely ténylegesen figyeli vagy tudja, ha bármilyen változás történik egy HTML-dokumentumban.
var elem = $compile(“ ”) – Ezzel ellenőrizhető, hogy a direktívánkat úgy kell-e beadni, ahogy kell. Egyéni direktívánk neve Guru99, és az egyéni direktívákról szóló fejezetünkből tudjuk, hogy amikor a direktívát beadjuk a HTML-ünkbe, akkor a következőképpen lesz beszúrva. '. Ezért ezt az állítást használják az ellenőrzéshez.
expect(element.html()).toContain("Ez az AngularJS tesztelés") – Ez arra szolgál, hogy az elvárás függvényt utasítsa, hogy meg kell találnia azt az elemet (esetünkben a div címkét), amely tartalmazza az "Ez AngularJS tesztelés”.

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

A fenti teszt a karma böngészőben fut, és ugyanazt a sikeres eredményt adja, mint az előző témakörben.

Az AngularJS JS-alkalmazások végpontok közötti tesztelése

A karma tesztelési keretrendszer, valamint a Protractor nevű keretrendszer rendelkezik egy webalkalmazás tesztelésének funkciójával.

Tehát ez nem csak a direktívák és vezérlők tesztelése, hanem minden más tesztelése is, ami egy HTML oldalon megjelenhet.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

Az alábbi példánkban egy AngularJS alkalmazásunk lesz, amely adattáblázatot hoz létre az ng-repeat direktíva használatával.

Először létrehozunk egy „oktatóanyag” nevű változót, és egy lépésben hozzárendelünk néhány kulcs-érték párhoz. A táblázat megjelenítésekor minden kulcs-érték pár adatként fog szerepelni. Az oktatóanyag-változó ezután hozzá van rendelve a hatókör objektumhoz, hogy az elérhető legyen a nézetünkből.
A táblázat minden adatsorához az ng-repeat direktívát használjuk. Ez a direktíva a ptutor változó használatával végigmegy az oktatói hatókör objektumban minden kulcs-érték páron.
Végül a címkét a kulcsértékpárokkal együtt (ptutor.Name és ptutor.Description) a táblázat adatainak megjelenítéséhez.

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

Tesztünk valójában az ng-repeat direktívát fogja tesztelni, és megbizonyosodni arról, hogy 3 sornyi adatot tartalmaz, ahogyan a fenti példából kellene.

Először is meg kell győződnünk arról, hogy a következő előfeltételek teljesülnek

Telepítse a szögmérő könyvtárat az npm-en keresztül. Ezt a parancssor alatti sor végrehajtásával teheti meg

"npm install protractor"

Tesztünk kódja az alábbiak szerint lesz látható.

A kód egy különálló, CompleteTest.js nevű fájlban lesz, amely a tesztmappába kerül. Az alábbi kód csak a következő kulcsfontosságú dolgokat hajtja végre

A böngésző funkciót a szögmérő könyvtár biztosítja, és feltételezi, hogy az AngularJS alkalmazásunk (a fent látható kóddal) fut webhelyünk URL-címén – http://localhost:8080/Guru99/
var lista=elem.all(by.repeater(ptutor in tutorial')); - Ez a kódsor valójában az ng-repeat direktívát tölti be, amelyet a 'ptutor in tutorial' kód tölt be. Az elem és a by.repeater a szögmérő könyvtár által biztosított speciális kulcsszavak, amelyek lehetővé teszik az ng-repeat direktíva részleteinek megismerését.
vár(list.count()).toEqual(3); – Végül az elvárás függvényt használjuk annak ellenőrzésére, hogy az ng-repeat direktíva eredményeként valóban 3 elem kerül a táblázatunkba.

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

A fenti teszt a karma böngészőben fut, és ugyanazt a sikeres eredményt adja, mint az előző témakörben.

Összegzésként

Az AngularJS tesztelése a karma keretrendszer használatával történik, amely keretrendszert maga a Google fejlesztette ki.
A karma keretrendszer telepítése a csomóponti csomagkezelő segítségével történik. Az alapvető teszteléshez telepítendő kulcsmodulok a karma, a karma-króm-indító, a karma-jázmin és a karma-cli.
A tesztek különálló js-fájlokba vannak írva, amelyeket általában az alkalmazás tesztmappájában tárolnak. Ezeknek a tesztfájloknak a helyét meg kell említeni a karma.conf.js nevű speciális konfigurációs fájlban. A Karma ezt a konfigurációs fájlt használja az összes teszt végrehajtásakor.
A Karma használható Vezérlők és egyéni direktívák tesztelésére is.
A végpontok közötti webes teszteléshez egy másik, szögmérő nevű keretrendszert kell telepíteni a Node csomagkezelőn keresztül. Ez a keretrendszer speciális módszereket biztosít, amelyek segítségével tesztelhető a HTML-oldal összes eleme.

Talán tetszene:

A Karma keretrendszer bemutatása és telepítése

A Karma telepítése

A Karma keretrendszer konfigurálása

KAPCSOLÓDÓ CIKKEK

Az AngularJS vezérlők tesztelése

Az AngularJS irányelvek tesztelése

Az AngularJS JS-alkalmazások végpontok közötti tesztelése

Összegzésként