AngularJS egységtesztelés Karmával és Jasmine-nel

Az AngularJS egyik legzseniálisabb tulajdonsága a Tesztelés szempont. Amikor a fejlesztők a Google Az AngularJS fejlesztésekor a tesztelést tartották szem előtt, és ügyeltek arra, 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 AngularJS tesztelés Karma nélkül is elvégezhető, de a Karma keretrendszer olyan zseniális funkcionalitással rendelkezik az AngularJS kód teszteléséhez, hogy logikus ezt a keretrendszert használni.

• Az AngularJS-ben teljesíthetünk Egység tesztelése külön a vezérlőkhöz és az irányelvekhez.
• Felléphetünk mi is teljes körű tesztelés az AngularJS-ből, 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 az AngularJS csapata készítette a következő címen: GoogleA 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 (ami egy csomagkezelő, amely a modulok egyszerű telepítésére szolgál 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 --save-dev

ahol,

1. Az npm a node csomagkezelő parancssori segédprogramja, amely egyéni modulok telepítésére szolgál bármely gépre. A csomag tartalmazza a következőt: node.js.
2. Az install paraméter utasítja az npm parancssori segédprogramot, hogy a telepítés szükséges.
3. 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 -g karma-cli

• A karma-cli a karma parancssori felületének telepítésére szolgál, amelyet a karma parancsok parancssori felületen történő írásához kell használni. A -g kapcsoló globálisan telepíti, így a karma parancs bármely mappából elérhető.

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: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-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

1. szögletes.js – Ez azt jelzi a karmának, hogy az alkalmazásod az AngularJS alapvető moduljaitól függ.
2. angular-mocks.js – Ez utasítja a karmát, hogy az AngularJS Unit Testing funkcióját használja az angular-mocks.js fájlból.
3. Az összes fő alkalmazás vagy üzleti logikai fájl megtalálható az alkalmazás lib mappájában.
4. 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

1. 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.
2. 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.
3. 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.

1. 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.
2. Itt láthatja, hogy megjelenik a végrehajtott teszt leírása, amely „Mintateszt”.
3. Ezután láthatja, hogy maga a „Feltétel igaz” nevű teszt végrehajtásra kerül.
4. Vegye figyelembe, hogy mivel minden teszt mellett van egy zöld „Ok” ikon, amely az összes teszt sikerességét szimbolizálja.

Mi a Jasmine az AngularJS egységtesztelésben?

A Karma dönti el, hogy hol futnak a tesztek, míg a Jasmine dönti el, hogyan íródnak meg. A Jasmine egy viselkedésvezérelt specifikációs keretrendszer, amely biztosítja az ezen az oldalon található összes példában használt szókincset, ezért telepítettük a karma-jasmine adaptert a futtató mellett.

Jázmin négy építőelemmel járul hozzá a fejlődéshez:

• leírás(): A kapcsolódó specifikációkat egy készletbe csoportosítja, és elfogadja a tesztelt egység olvasható leírását.
• azt(): Egyetlen specifikációt deklarál. A névnek az ellenőrizendő viselkedést kell megneveznie, nem pedig a meghívott metódust.
• expect() függvény párosítókkal: Összehasonlít egy tényleges értéket egy várható értékkel. Gyakori egyezési kritériumok: toBe, toEqual, toContain és toBeDefined.
• beforeEach() és afterEach(): Minden specifikáció előtt és után futtasd le a beállítást és a lebontást, így minden teszt független marad.

Jasmine kémprogramokat is kínál. A kémprogram egy valós függvényt egy rögzített helyettesítővel helyettesít, így egy vezérlő tesztelhető élő HTTP végpont meghívása nélkül. Mivel a Jasmine-nak nincs szüksége DOM-ra és saját assertion könyvtárra, a Karma és a Jasmine kombinációja továbbra is a legkönnyebb módja az AngularJS futtatásának. JavaSzkript egységtesztek.

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

1. Hozzon létre egy azonosító változót, és rendelje hozzá az 5-ös értéket.
2. 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ítsd az angular-mocks könyvtárat az npm-en keresztül. Ezt a parancssorban a következő sor végrehajtásával teheted meg:

npm install angular-mocks --save-dev

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/angular.js', 'lib/angular-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 egységtesztek futtatásához az angular.js és az angular-mocks.js fájlok szükségesek.
• Az index.js fájl a vezérlő kódunkat fogja tartalmazni
• A tesztmappa az összes AngularJS-tesztünket fogja tartalmazni

Alább látható az AngularJS kódunk, amelyet Index.js fájlként tárolunk az alkalmazásunk test mappájában.

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

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

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

1. beforeEach függvény – Ez a függvény a 'sampleApp' nevű AngularJS modulunk betöltésére szolgál a teszt futtatása előtt. Fontos megjegyezni, hogy ez a modul neve egy index.js fájlban.
2. A $controller objektumot az index.js fájlunkban definiált „AngularJSController” vezérlő mockup objektumaként hozzuk létre. Bármilyen egységtesztelésnél a mock objektum egy dummy objektumot képvisel, amelyet ténylegesen a teszteléshez fogunk használni. Ez a mock objektum valójában a vezérlőnk viselkedését szimulálja.
3. 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ő.
4. var $hatókör = {}; Ez egy hamis objektum a $scope objektumhoz.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Itt egy 'AngularJSController' nevű vezérlő létezését ellenőrizzük. Itt a $scope objektumunkban található Index.js fájlban található összes változót hozzárendeljük a tesztfájlban található $scope objektumhoz.
6. 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 karmatesztelési keretrendszer egyéni direktívák tesztelésére is alkalmas funkcióval rendelkezik. Ez magában foglalja a sablont is.URLamelyeket egyéni direktívákon belül használnak.

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

1. Hozzon létre egy sampleApp nevű AngularJS modult
2. Hozz létre egy egyéni direktívát a következő névvel: – guru99
3. 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 = angular.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

1. beforeEach függvény – Ez a függvény a 'sampleApp' nevű AngularJS modulunk betöltésére szolgál a teszt futtatása előtt.
2. A $compile szolgáltatást használjuk a direktíva lefordításához. Ez a szolgáltatás kötelező, és deklarálni kell, hogy az AngularJS használni tudja az egyéni direktívánk lefordításához.
3. A $rootScope bármely AngularJS alkalmazás elsődleges hatóköre. A korábbi fejezetekben már láttuk a vezérlő $scope objektumát. Nos, a $scope objektum a $rootScope objektum gyermekobjektuma. Azért van itt deklarálva, mert egy tényleges HTML-címkét módosítunk a DOM-ban a saját direktívánkon keresztül. Ezért a $rootScope szolgáltatást kell használnunk, amely valójában figyeli vagy tudja, mikor történik bármilyen változás egy HTML-dokumentumon belül.
4. var elem = $compile(“ ”)($rootScope) – Ez azt ellenőrzi, hogy a direktívánk megfelelően lett-e befecskendezve. A direktíva a camel case névvel, a guru99-cel van regisztrálva, így az AngularJS a kisbetűs elemre illeszkedik. a jelölésben. Ezért ezt az utasítást használjuk az ellenőrzés elvégzésére.
5. expect(element.html()).toContain(“Ez AngularJS tesztelés”) – Ezzel utasítjuk az expect függvényt, hogy keresse meg azt az elemet (esetünkben a h1 címkét), amely tartalmazza az „Ez AngularJS tesztelés” innerHTML szövegét.

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

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

AngularJS alkalmazások teljes körű tesztelése

A karmatesztelési keretrendszer, valamint a Pro nevű keretrendszertracA tor képes webes alkalmazásokat tesztelni a teljes folyamatot lefedni.

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.

1. 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.
2. 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.
3. 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 = 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"}
  ];
});

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ó

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 profittractor könyvtár npm-en keresztül. Ez a parancssorban a következő sor végrehajtásával tehető meg:

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

1. A böngésző funkciót a profi biztosítja.tractor könyvtárat, és feltételezi, hogy az AngularJS alkalmazásunk (a fent látható kóddal) fut az oldalunkon URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); -Ez a kódsor valójában az ng-repeat direktívát kéri le, amelyet a 'ptutor in tutorial' kód tölt fel. Az element és a by.repeater a pro által biztosított speciális kulcsszavak.tractor könyvtár, amely lehetővé teszi számunkra, hogy részleteket kapjunk az ng-repeat direktíváról.
3. 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.

Karma vs. Jázmin vs. Profitractor: Főbb különbségek

Az ezen az oldalon használt három eszközt gyakran összekeverik, mivel ugyanabban a parancssorban jelennek meg. Mindegyik a tesztelési verem egy másik rétegét foglalja el, amint az alábbi táblázat is mutatja.

Röviden, Jasmine megírja a tesztet, Karma végrehajtja, és a Pro...tracA tor ugyanazt a Jasmine szintaxist kiterjeszti egy teljesen renderelt oldalra.

Az AngularJS egységtesztelés bevált gyakorlatai

Néhány szokás segít abban, hogy az AngularJS csomag gyorsan és megbízhatóan működjön, ahogy az alkalmazás növekszik.

1. Egyszerre egy egységet teszteljen. Csak a tesztelt modult töltsd be a beforeEach fájlba, és minden együttműködőt mockold, hogy a hiba egyetlen fájlra mutasson.
2. Soha ne hívj igazi háttérrendszert. Használd az angular-mocks $httpBackend szolgáltatását az előre elkészített válaszok visszaadásához. A tesztek ezután offline futnak, és minden gépen azonos eredményeket produkálnak.
3. Tartsa a specifikációs neveket viselkedésfüggően. Egy olyan név, mint például a „5-öt ad vissza a vezérlő inicializálásakor”, jobban olvasható egy jelentésben, mint a „teszt1”.
4. Mindig öblítsd át az emésztőrendszert. A hatókör adatainak módosítása után hívja meg a $rootScope.$digest() függvényt, különben a kötések és figyelők soha nem frissülnek, és az assertion-ök rossz okból hiúsulnak meg.
5. Mérd fel a lefedettséget, de gondosan ítéld meg. Karma-lefedettség hozzáadása a nem tesztelt ágak megtekintéséhez. A gyenge állítások melletti magas lefedettség továbbra is elrejti a hibákat.
6. Futtassa a csomagot folyamatos integrációban. Használj fej nélküli Chrome indítót, hogy ugyanazok a specifikációk minden commitnál futjanak, ne csak a fejlesztői gépen.

Ezen szabályok alkalmazása a fenti példákat az elszigetelt bemutatókból egy korábbi AngularJS kódbázis regressziós biztonsági hálójává alakítja. A tágabb képért lásd a AngularJS oktatóanyag sorozat.

GYIK