Testovanie jednotky AngularJS: Výukový program Karma Jasmine

Obsah:

Anonim

Jednou z najskvelejších funkcií Angular.JS je aspekt Testovanie. Keď vývojári v spoločnosti Google vyvinuli AngularJS, mali neustále na pamäti testovanie a zabezpečili, aby bol testovateľný celý rámec AngularJS.

V AngularJS sa testovanie zvyčajne vykonáva pomocou Karmy (framework). Uhlové testovanie JS sa dá uskutočniť aj bez Karmy, ale rámec Karma má tak skvelú funkcionalitu na testovanie kódu AngularJS, že má zmysel tento rámec používať.

  • V AngularJS môžeme vykonávať Unit Uniting samostatne pre kontroléry a smernice.
  • Môžeme tiež vykonať end-end testovanie AngularJS, ktoré testuje z pohľadu používateľa.

V tomto návode sa naučíte

  • Úvod a inštalácia rámca Karma
    • Inštalácia Karmy
    • Konfigurácia rámca Karma
  • Testovanie ovládačov AngularJS
  • Testovanie smerníc AngularJS
  • Kompletné testovanie aplikácií AngularJS JS

Úvod a inštalácia rámca Karma

Karma je nástroj na automatizáciu testovania vytvorený tímom Angular JS v spoločnosti Google. Prvým krokom pri používaní Karmy je inštalácia Karmy. Karma sa inštaluje cez npm (čo je správca balíkov používaný na ľahkú inštaláciu modulov na lokálny počítač).

Inštalácia Karmy

Inštalácia Karmy cez npm sa uskutočňuje v dvoch krokoch.

Krok 1) Vykonajte nižšie uvedený riadok z príkazového riadku

npm install karma karma-chrome-launcher karma-jasmine

Čím

  1. npm je obslužný program príkazového riadku pre správcu balíkov uzlov, ktorý sa používa na inštaláciu vlastných modulov na ľubovoľný počítač.
  2. Inštalačný parameter dáva pokyn obslužnému programu príkazového riadku npm, že je potrebná inštalácia.
  3. V príkazovom riadku sú špecifikované 3 knižnice, ktoré sú potrebné na prácu s karmou
    • karma je hlavná knižnica, ktorá sa použije na účely testovania.
    • karma-chrome-launcher je samostatná knižnica, ktorá umožňuje rozpoznávanie príkazov karmy v prehliadači chrome.
    • karma-jasmín - Týmto sa nainštaluje jazmín, ktorý je závislým rámcom pre Karmu.

Krok 2) Ďalším krokom je inštalácia pomôcky príkazového riadku karma. To je potrebné na vykonávanie príkazov karmy. Obslužný program karma line sa použije na inicializáciu karmového prostredia na testovanie.

Ak chcete nainštalovať obslužný program príkazového riadku, spustite nasledujúci riadok z príkazového riadku

npm install karma-cli

kde,

  1. karma-cli sa používa na inštaláciu rozhrania príkazového riadku pre karmu, ktoré sa použije na zápis príkazov karma do rozhrania príkazového riadku.

Konfigurácia rámca Karma

Ďalším krokom je konfigurácia karmy, ktorú je možné vykonať pomocou príkazu

"karma -init"

Po vykonaní vyššie uvedeného kroku karma vytvorí súbor karma.conf.js. Súbor bude pravdepodobne vyzerať ako útržok uvedený nižšie

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

Vyššie uvedené konfiguračné súbory hovoria modulu runtime karma o nasledujúcich veciach

  1. „Názov vašej aplikácie“ - nahradí sa názvom vašej aplikácie.
  2. ' Your application name' / AngularJS / AngularJS.js ' - Toto informuje karmu, že vaša aplikácia závisí od základných modulov v AngularJS.
  3. 'Your application name' / AngularJS-mocks / AngularJS-mocks.js ' - Toto povedie karme, aby použila funkčnosť Unit Testing pre AngularJS zo súboru Angular.JS-mocks.js.
  4. Všetky hlavné súbory aplikácie alebo obchodnej logiky sa nachádzajú v priečinku lib vašej aplikácie.
  5. Priečinok testy bude obsahovať všetky jednotkové testy

Ak chcete skontrolovať, či karma funguje, vytvorte súbor s názvom Sample.js, vložte nižšie uvedený kód a vložte ho do testovacieho adresára.

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

Vyššie uvedený kód má nasledujúce aspekty

  1. Funkcia description sa používa na popísanie testu. V našom prípade dávame nášmu testu popis „Ukážkový test“.
  2. Funkcia „it“ sa používa na pomenovanie testu. V našom prípade uvádzame názov nášho testu ako „Podmienka je pravda“. Názov testu musí byť zmysluplný.
  3. Kombinácia kľúčového slova „expect“ a „toBe“ uvádza, aká je očakávaná a skutočná hodnota výsledku testu. Ak je skutočná a očakávaná hodnota rovnaká, potom test prejde, inak zlyhá.

Keď na príkazovom riadku spustíte nasledujúci riadok, vykoná sa vyššie uvedený testovací súbor

KARMA start

Nižšie uvedený výstup je prevzatý z IDE Webstorm, v ktorej boli vykonané vyššie uvedené kroky.

  1. Výstup pochádza z prieskumníka Karma v rámci Webstorm. Toto okno zobrazuje vykonávanie všetkých testov, ktoré sú definované v rámci karmy.
  2. Tu vidíte, že sa zobrazuje popis vykonaného testu, ktorý je „Ukážkový test“.
  3. Ďalej môžete vidieť, že sa vykoná samotný test s názvom „Podmienka je pravda“.
  4. Pretože všetky testy majú vedľa seba zelenú ikonu „Ok“, ktorá symbolizuje, že všetky testy prešli.

Testovanie ovládačov AngularJS

Rámec na testovanie karmy má tiež funkcionalitu na testovanie ovládačov medzi koncami. To zahrnuje testovanie objektu $ scope, ktorý sa používa v Controllers.

Pozrime sa na príklad toho, ako to môžeme dosiahnuť.

V našom príklade

Najprv by sme potrebovali definovať kontrolór. Tento kontrolór by vykonal nižšie uvedené kroky

  1. Vytvorte premennú ID a priraďte jej hodnotu 5.
  2. Priraďte premennú ID k objektu $ scope.

Náš test otestuje existenciu tohto radiča a tiež otestuje, či je premenná ID objektu $ scope nastavená na 5.

Najskôr sa musíme ubezpečiť, že je splnený nasledujúci predpoklad

    1. Nainštalujte si knižnicu Angular.JS-mocks cez npm. To je možné vykonať vykonaním nižšie uvedeného riadku v príkazovom riadku
npm install Angular JS-mocks
  1. Ďalej je potrebné upraviť súbor karma.conf.js, aby sa zabezpečilo, že pre test budú zahrnuté správne súbory. Nasledujúci segment zobrazuje iba časť súborov karma.conf.js, ktorú je potrebné upraviť 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parameter „súbory“ v podstate informuje Karma o všetkých súboroch, ktoré sú potrebné pri uskutočňovaní testov.
  • Na vykonávanie jednotkových testov AngularJS sú potrebné súbory AngularJS.js a AngularJS-mocks.js
  • Súbor index.js bude obsahovať náš kód pre kontrolór
  • Testovací priečinok bude obsahovať všetky naše testy AngularJS

Ďalej je uvedený náš kód Angular.JS, ktorý bude uložený ako súbor Index.js v testovacom priečinku našej aplikácie.

Nasledujúci kód slúži iba na vykonanie nasledujúcich vecí

  1. Vytvorte modul Angular JS s názvom sampleApp
  2. Vytvorte radič s názvom AngularJSController
  3. Vytvorte premennú nazvanú ID, dajte jej hodnotu 5 a priraďte ju k objektu $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Po úspešnom vykonaní vyššie uvedeného kódu bude ďalším krokom vytvorenie testovacieho prípadu, ktorý zabezpečí správne napísanie a vykonanie kódu.

Kód nášho testu bude uvedený nižšie.

Kód bude v samostatnom súbore s názvom ControllerTest.js, ktorý bude umiestnený v testovacom priečinku. Nasledujúci kód slúži iba na vykonanie nasledujúcich kľúčových vecí

  1. beforeEach function - Táto funkcia sa používa na načítanie nášho modulu AngularJS.JS s názvom „sampleApp“ pred skúšobnou prevádzkou. Upozorňujeme, že toto je názov modulu v súbore index.js.

  2. Objekt $ controller je vytvorený ako maketa objektu pre radič '' Angular JSController '', ktorý je definovaný v našom súbore index.js. V akomkoľvek druhu testovania jednotiek predstavuje falošný objekt fiktívny objekt, ktorý sa skutočne použije na testovanie. Tento simulovaný objekt bude skutočne simulovať správanie nášho radiča.

  3. beforeEach (inject (function (_ $ controller_) - This is used to inject the mock object in our test so that it behaves like the actual controller.

  4. var $ scope = {}; Toto je falošný objekt vytváraný pre objekt $ scope.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Tu kontrolujeme existenciu radiča s názvom „Angular.JSController“. Tu tiež priraďujeme všetky premenné z nášho objektu $ scope v našom ovládači v súbore Index.js k objektu $ scope v našom testovacom súbore

  6. Na záver porovnáme $ scope.ID s 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);});});});

Vyššie uvedený test bude prebiehať v prehliadači karmy a poskytne rovnaký výsledok výsledku, ako bol uvedený v predchádzajúcej téme.

Testovanie smerníc AngularJS

Rámec na testovanie karmy má tiež funkcionalitu na testovanie vlastných smerníc. Patria sem šablónyURL, ktoré sa používajú vo vlastných smerniciach.

Pozrime sa na príklad toho, ako to môžeme dosiahnuť.

V našom príklade si najskôr zadefinujeme vlastnú smernicu, ktorá robí nasledujúce veci

  1. Vytvorte modul AngularJS s názvom sampleApp
  2. Vytvorte vlastnú smernicu s názvom - Guru99
  3. Vytvorte funkciu, ktorá vráti šablónu so značkou hlavičky, ktorá zobrazuje text „Toto je testovanie AngularJS“.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Po úspešnom vykonaní vyššie uvedeného kódu bude ďalším krokom vytvorenie testovacieho prípadu, ktorý zabezpečí, že bol kód napísaný a vykonaný správne. Kód nášho testu bude uvedený nižšie

Kód bude v samostatnom súbore s názvom DirectiveTest.js, ktorý bude umiestnený v testovacom priečinku. Nasledujúci kód slúži iba na vykonanie nasledujúcich kľúčových vecí

  1. beforeEach function - Táto funkcia sa používa na načítanie nášho modulu Angular JS s názvom 'sampleApp' pred skúšobnou prevádzkou.

  2. Na kompiláciu smernice sa používa služba $ compile. Táto služba je povinná a musí byť deklarovaná, aby ju služba Angular.JS mohla použiť na zostavenie našej vlastnej smernice.

  3. $ Rootcope je primárnym rozsahom akejkoľvek aplikácie AngularJS.JS. Objekt $ scope radiča sme videli v predchádzajúcich kapitolách. Objekt $ scope je podradeným objektom objektu $ rootcope. Dôvod, prečo je to tu deklarované, je ten, že robíme zmenu skutočnej značky HTML v DOM prostredníctvom našej vlastnej smernice. Preto musíme použiť službu $ rootcope, ktorá skutočne počúva alebo vie, keď dôjde k akejkoľvek zmene z dokumentu HTML.

  4. var element = $ compile (" ") - slúži na kontrolu, či je naša smernica injektovaná tak, ako má. Názov našej vlastnej smernice je Guru99 a z našej kapitoly o vlastných smerniciach vieme, že keď bude smernica vložená do nášho HTML, bude vložená ako „ “. Toto vyhlásenie sa preto používa na vykonanie tejto kontroly.

  5. expect (element.html ()). toContain ("This is AngularJS Testing") - Používa sa na zadanie pokynu funkcii expect, že má nájsť prvok (v našom prípade značku div) tak, aby obsahoval vnútorný text HTML textu Testovanie AngularJS ".

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

Vyššie uvedený test bude prebiehať v prehliadači karmy a poskytne rovnaký výsledok výsledku, ako bol uvedený v predchádzajúcej téme.

Kompletné testovanie aplikácií AngularJS JS

Rámec na testovanie karmy spolu s rámcom nazvaným Protractor umožňuje testovanie webových aplikácií od začiatku do konca.

Nejde teda iba o testovanie smerníc a kontrolórov, ale aj testovanie všetkého možného, ​​čo sa môže na stránke HTML objaviť.

Pozrime sa na príklad toho, ako to môžeme dosiahnuť.

V našom príklade uvedenom nižšie budeme mať aplikáciu AngularJS, ktorá vytvorí dátovú tabuľku pomocou direktívy ng-repeat.

  1. Najprv vytvárame premennú nazvanú „tutorial“ a v jednom kroku jej priradíme niekoľko párov kľúč - hodnota. Každý pár kľúč - hodnota sa použije ako dáta pri zobrazení tabuľky. Premenná výučby je potom priradená k objektu rozsahu, aby k nej bolo možné získať prístup z nášho pohľadu.
  2. Pre každý riadok s údajmi v tabuľke používame direktívu ng-repeat. Táto smernica prechádza každým párom kľúč - hodnota v objekte rozsahu výučby pomocou premennej ptutor.
  3. Nakoniec na zobrazenie údajov tabuľky používame značku a páry kľúč - hodnota (ptutor.Name a ptutor.Description).


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