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

Tartalomjegyzék:

Anonim

Az Angular.JS egyik legragyogóbb jellemzője a Tesztelés szempont. Amikor a Google fejlesztői fejlesztették az AngularJS-t, folyamatosan szem előtt tartották a tesztelést, és megbizonyosodtak arról, hogy a teljes AngularJS keretrendszer tesztelhető volt.

Az AngularJS-ben a teszteket általában a Karma (keretrendszer) segítségével hajtják végre. Az Angular JS teszt Karma nélkül is elvégezhető, de a Karma keretrendszer olyan ragyogó funkcionalitással rendelkezik az AngularJS kód teszteléséhez, hogy van értelme ezt a keretrendszert használni.

  • Az AngularJS-ben külön elvégezhetjük az egység tesztelését a vezérlők és az irányelvek számára.
  • Elvégezhetjük az AngularJS end end end tesztelését is, amely felhasználói szempontból tesztel.

Ebben az oktatóanyagban megtanulja-

  • A Karma keretrendszer bemutatása és telepítése
    • A Karma telepítése
    • A Karma keretrendszer konfigurálása
  • Az AngularJS vezérlők tesztelése
  • Az AngularJS irányelvek tesztelése
  • Az AngularJS JS alkalmazások tesztelése

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

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

A Karma telepítése

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

1. lépés: Hajtsa végre az alábbi sort a parancssorból

npm install karma karma-chrome-launcher karma-jasmine

Hová

  1. Az npm a csomópont csomagkezelő parancssori segédprogramja, amelyet egyedi modulok telepítésére használnak bármely gépre.
  2. A telepítési paraméter utasítja az npm parancssori segédprogramot, hogy telepítésre van szükség.
  3. A parancssorban 3 könyvtár van megadva, amelyek szükségesek a karmával való együttműködéshez
    • A karma a központi könyvtár, amelyet tesztelési célokra fognak használni.
    • 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őben.
    • karma-jázmin - Ez telepíti a jázmint, amely a Karma függő kerete.

2. lépés) A következő lépés a karma parancssori segédprogram telepítése. Erre szükség van a karma sor parancsok végrehajtásához. A karmavonal segédprogramot használjuk a karmakörnyezet inicializálására tesztelés céljából.

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

npm install karma-cli

ahol

  1. A karma-cli segítségével telepíthető a karma parancssori felülete, amely a karma parancsok parancssori felületre 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, amelyet a parancs segítségével lehet végrehajtani

"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ó

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ő dolgokat mondják el a karma futási motornak

  1. „Az alkalmazás neve” - Ezt felváltja az alkalmazás neve.
  2. ' Az alkalmazás neve' / AngularJS / AngularJS.js ' - Ez megmondja a karmának, hogy alkalmazása az AngularJS központi moduljaitól függ
  3. 'Az alkalmazás neve' / AngularJS-mocks / AngularJS-mocks.js ' - Ez megmondja a karmának, hogy használja az Unit Testing funkciót az AngularJS számára az Angular.JS-mocks.js fájlból.
  4. Az összes fő alkalmazás vagy üzleti logikai fájl megtalálható az alkalmazás lib mappájában.
  5. 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 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

  1. A leírás funkcióval a teszt leírható. Esetünkben a „Minta teszt” leírást adjuk tesztünkhöz.
  2. Az 'it' funkcióval nevet adunk a tesztnek. Esetünkben tesztünk nevét a „feltétel igaz” néven adjuk meg. A teszt nevének értelmesnek kell lennie.
  3. A 'vár' és a 'toBe' kulcsszó kombinációja megadja, hogy mi a teszt eredmény várható és tényleges értéke. Ha a tényleges és a várható érték megegyezik, akkor a teszt sikeres lesz, máskülönben nem fog sikerülni.

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

KARMA start

Az alábbi kimenet abból az IDE Webstormból származik, amelyben a fenti lépéseket végrehajtották.

  1. A kimenet a Karma explorerben érkezik a Webstormon belül. Ez az ablak a karma keretrendszerben definiált összes teszt végrehajtását mutatja.
  2. Itt láthatja, hogy a végrehajtott teszt leírása megjelenik, amely a "Minta teszt".
  3. Ezután láthatja, hogy maga a teszt is végrehajtásra kerül, amelynek neve "Feltétel igaz".
  4. Vegye figyelembe, hogy mivel az összes teszt mellett a zöld "Ok" ikon látható, amely azt jelzi, hogy az összes teszt sikeres volt.

Az AngularJS vezérlők tesztelése

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

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

Példánkban

Először meg kellene határoznunk egy vezérlőt. Ez a vezérlő elvégzi az alább említett lépéseket

  1. Hozzon létre egy ID változót, és rendelje hozzá az 5 értéket.
  2. Rendelje hozzá az ID változót a $ hatókör objektumhoz.

Tesztünk teszteli 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 biztosítanunk kell a következő előfeltétel meglétét

    1. Telepítse az Angular.JS-mocks könyvtárat az npm segítségével. Ezt úgy teheti meg, hogy végrehajtja az alábbi sort a parancssorban
npm install Angular JS-mocks
  1. 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 szakasz csak a karma.conf.js fájlrészét mutatja, amelyet módosítani kell 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • A 'fájlok' paraméter alapvetően megmondja Karmának az összes fájlt, amelyre a tesztek futtatásához szükség van.
  • Az AngularJS.js és az AngularJS-mocks.js fájlokra van szükség az AngularJS egység tesztek futtatásához
  • Az index.js fájl tartalmazza a vezérlő kódját
  • A tesztmappa az összes AngularJS tesztünket tartalmazza

Az alábbiakban az Angular.JS kódot találjuk, 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

  1. Hozzon létre egy szögletes JS modult, amelynek neve: sampleApp
  2. Hozzon létre egy AngularJSController nevű vezérlőt
  3. Hozzon létre egy ID nevű változót, adjon 5-ös értéket, és rendelje hozzá a $ scope objektumhoz
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Miután a fenti kód sikeresen végrehajtásra került, a következő lépés egy teszteset létrehozása lenne, amely biztosítja a kód megfelelő megírását és végrehajtását.

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

A kód külön, a 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

  1. beforeEach függvény - Ez a függvény a „sampleApp” nevű AngularJS.JS modulunk betöltésére szolgál a teszt futtatása előtt. Vegye figyelembe, hogy ez a modul neve az index.js fájlban.

  2. A $ controller objektum az index.js fájlban definiált „Angular JSController” vezérlő makett objektumaként jön létre. Bármilyen egységtesztelésnél az álobjektum egy próbatestet jelent, amelyet ténylegesen felhasználnak a teszteléshez. Ez az álobjektum valójában a vezérlőnk viselkedését fogja szimulálni.

  3. beforeEach (inject (function (_ $ controller_) - Ez arra szolgál, hogy a tesztünkbe bejuttassuk az álobjektumot, hogy az úgy viselkedjen, mint a tényleges vezérlő.

  4. var $ hatókör = {}; Ez egy álobjektum, amelyet a $ scope objektumhoz hoznak létre.

  5. var vezérlő = $ vezérlő ('AngularJSController', {$ hatókör: $ hatókör}); - Itt ellenőrizzük, hogy létezik-e egy „Angular.JSController” nevű vezérlő. Itt szintén az Index.js fájlban található vezérlőnkben szereplő $ scope objektumunk összes változóját hozzárendeljük a tesztfájlunkban szereplő $ scope objektumhoz

  6. Végül összehasonlítjuk a $ scope.ID-t 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 fog futni, és ugyanazt az eredményt adja, mint az előző témában.

Az AngularJS irányelvek tesztelése

A karma tesztelési keretrendszer rendelkezik az egyedi irányelvek tesztelésére szolgáló funkcióval is. Ez magában foglalja az egyedi irányelvekben használt templateURL-eket.

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

Példánkban először meghatározunk egy egyéni irányelvet, amely a következő dolgokat teszi

  1. Hozzon létre egy AngularJS modult, amelynek neve: sampleApp
  2. Hozzon létre egy egyedi utasítást a Guru99 névvel
  3. Hozzon létre egy függvényt, amely egy sablont ad vissza egy fejléccímkével, amely az "Ez AngularJS tesztelés" szöveget jeleníti meg.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Miután a fenti kód sikeresen végrehajtásra került, a következő lépés egy teszteset létrehozása lenne, amely biztosítja a kód megfelelő megírását és végrehajtását. Tesztünk kódja az alábbiakban látható lesz

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

  1. beforeEach függvény - Ez a függvény a „sampleApp” nevű szögletes JS modulunk betöltésére szolgál a tesztfuttatás előtt.

  2. A $ compile szolgáltatást használják az irányelv fordításához. Ez a szolgáltatás kötelező, és be kell jelenteni, hogy az Angular.JS felhasználhassa egyéni irányelvünk összeállításához.

  3. A $ rootscope minden AngularJS.JS alkalmazás elsődleges hatóköre. Korábbi fejezetekben láttuk a vezérlő $ scope objektumát. Nos, a $ scope objektum a $ rootscope objektum gyermekobjektuma. Azért deklarálják ezt itt, mert az egyedi irányelvünkön keresztül változtatunk egy tényleges HTML címkén a DOM-ban. Ezért ki kell használnunk a $ rootscope szolgáltatást, amely valóban hallgat vagy tudja, ha bármilyen változás történik egy HTML dokumentumon belül.

  4. var element = $ compile (" ") - Ez annak ellenőrzésére szolgál, hogy az irányelvünk be van-e adva a megfelelő módon. Egyéni irányelvünk neve Guru99, és az egyéni irányelvek fejezetünkből tudjuk, hogy amikor az irányelvet beillesztjük a HTML-be, akkor azt „ ” néven injektáljuk. Ezért ezt az állítást használják az ellenőrzés elvégzésére.

  5. várható (element.html ()). toContain ("Ez az AngularJS tesztelés") - Ez arra szolgál, hogy utasítsa az várható függvényt, hogy az elemnek (esetünkben a div tagnek) meg kell találnia 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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

A fenti teszt a karma böngészőben fog futni, és ugyanazt az eredményt adja, mint az előző témában.

Az AngularJS JS alkalmazások tesztelése

A karma tesztelési keretrendszer és a Protractor nevű keretrendszer funkciói egy webalkalmazás tesztelése végpontokig.

Tehát nem csak az irányelvek és a vezérlők tesztelése, hanem minden más tesztelése is, ami megjelenhet egy HTML oldalon.

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

Az alábbi példánkban lesz egy AngularJS alkalmazás, amely létrehoz egy adattáblát az ng-repeat irányelv segítségével.

  1. Először létrehozunk egy "tutorial" nevű változót, és egy lépésben hozzárendelünk hozzá néhány kulcs-érték párot. Minden kulcs-érték pár adatként lesz felhasználva a táblázat megjelenítésekor. Ezután az oktatói változó hozzá van rendelve a hatókörobjektumhoz, hogy az a mi nézetünkből elérhető legyen.
  2. A táblázat minden adatsorához az ng-repeat direktívát használjuk. Ez az irányelv a ptutor változó használatával végigveszi az oktatóanyag-objektum minden kulcs-érték párját.
  3. Végül a címkét a kulcsértékpárokkal (ptutor.Name és ptutor.Description) együtt használjuk a táblázat adatainak megjelenítéséhez.


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