AngularJS Unit Testing: Karma Jasmine Tutorial

Obsah:

Anonim

Jednou z nejskvělejších funkcí Angular.JS je aspekt Testování. Když vývojáři ve společnosti Google vyvinuli AngularJS, měli stále na paměti testování a zajistili, aby byl testovatelný celý rámec AngularJS.

V AngularJS se testování obvykle provádí pomocí Karmy (framework). Úhlové testování JS lze provádět bez Karmy, ale rámec Karma má tak skvělou funkcionalitu pro testování kódu AngularJS, že má smysl tento rámec používat.

  • V AngularJS můžeme provádět Unit Uniting samostatně pro ovladače a direktivy.
  • Můžeme také provést end-end testování AngularJS, což je testování z pohledu uživatele.

V tomto výukovém programu se naučíte

  • Úvod a instalace rámce Karma
    • Instalace Karmy
    • Konfigurace rámce Karma
  • Testování řadičů AngularJS
  • Testování směrnic AngularJS
  • End to End Testing AngularJS JS applications

Úvod a instalace rámce Karma

Karma je nástroj pro automatizaci testování vytvořený týmem Angular JS ve společnosti Google. Prvním krokem pro použití Karmy je instalace Karmy. Karma se instaluje pomocí npm (což je správce balíčků používaný pro snadnou instalaci modulů na lokálním počítači).

Instalace Karmy

Instalace Karmy pomocí npm se provádí ve dvou krocích.

Krok 1) Spusťte níže uvedený řádek z příkazového řádku

npm install karma karma-chrome-launcher karma-jasmine

Čím

  1. npm je obslužný program příkazového řádku pro správce balíků uzlů používaný pro instalaci vlastních modulů na libovolný počítač.
  2. Parametr install dává pokyn nástroji příkazového řádku npm, že je instalace nutná.
  3. V příkazovém řádku jsou specifikovány 3 knihovny, které jsou nutné pro práci s karmou
    • karma je základní knihovna, která bude použita pro účely testování.
    • karma-chrome-launcher je samostatná knihovna, která umožňuje rozpoznání příkazů karma prohlížečem chrome.
    • karma-jasmín - Tím se nainstaluje jasmín, který je pro Karmu závislým rámcem.

Krok 2) Dalším krokem je instalace nástroje příkazového řádku karma. To je vyžadováno pro provádění příkazů karmy. Obslužný program karma line bude použit k inicializaci prostředí karmy pro testování.

Chcete-li nainstalovat obslužný program příkazového řádku, proveďte níže uvedený řádek z příkazového řádku

npm install karma-cli

kde

  1. karma-cli se používá k instalaci rozhraní příkazového řádku pro karma, které se použije k zápisu příkazů karma do rozhraní příkazového řádku.

Konfigurace rámce Karma

Dalším krokem je konfigurace karmy, kterou lze provést pomocí příkazu

"karma -init"

Po provedení výše uvedeného kroku karma vytvoří soubor karma.conf.js. Soubor bude pravděpodobně vypadat jako úryvek uvedený níže

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

Výše uvedené konfigurační soubory říkají modulu runtime karma následující věci

  1. „Název vaší aplikace“ - bude nahrazen názvem vaší aplikace.
  2. ' Your application name' / AngularJS / AngularJS.js ' - This says karma that your application depends on the core modules in AngularJS
  3. 'Your application Name' / AngularJS-mocks / AngularJS-mocks.js ' - This says karma to use the Unit Testing functionality for AngularJS from the Angular.JS-mocks.js file.
  4. Ve složce lib vaší aplikace jsou všechny hlavní soubory aplikace nebo obchodní logiky.
  5. Složka testů bude obsahovat všechny testy jednotek

Chcete-li zkontrolovat, zda karma funguje, vytvořte soubor s názvem Sample.js, vložte níže uvedený kód a umístěte jej do testovacího adresáře.

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

Výše uvedený kód má následující aspekty

  1. Funkce description slouží k popisu testu. V našem případě dáváme našemu testu popis „Ukázkový test“.
  2. Funkce „it“ se používá k pojmenování testu. V našem případě dáváme název našeho testu jako „Podmínka je pravda“. Název testu musí být smysluplný.
  3. Kombinace klíčového slova „expect“ a „toBe“ uvádí, jaká je očekávaná a skutečná hodnota výsledku testu. Pokud je skutečná a očekávaná hodnota stejná, pak test projde, jinak selže.

Když na příkazovém řádku spustíte následující řádek, provede výše uvedený testovací soubor

KARMA start

Níže uvedený výstup je převzat z IDE Webstorm, ve kterém byly provedeny výše uvedené kroky.

  1. Výstup přichází v průzkumníku Karma v rámci Webstorm. Toto okno zobrazuje provádění všech testů, které jsou definovány v rámci karmy.
  2. Zde vidíte, že je zobrazen popis provedeného testu, který je „Ukázkový test“.
  3. Dále můžete vidět, že je proveden samotný test, který má název „Podmínka je pravda“.
  4. Protože všechny testy mají vedle sebe zelenou ikonu „Ok“, která symbolizuje, že všechny testy prošly.

Testování řadičů AngularJS

Rámec pro testování karmy má také funkcionalitu pro testování kontrolérů od začátku do konce. To zahrnuje testování objektu $ scope, který se používá v Controllers.

Podívejme se na příklad, jak toho můžeme dosáhnout.

V našem příkladu

Nejprve bychom museli definovat správce. Tento řadič by provedl níže uvedené kroky

  1. Vytvořte proměnnou ID a přiřaďte jí hodnotu 5.
  2. Přiřaďte proměnnou ID k objektu $ scope.

Náš test otestuje existenci tohoto řadiče a také otestuje, zda je proměnná ID objektu $ scope nastavena na 5.

Nejprve musíme zajistit, aby byl splněn následující předpoklad

    1. Nainstalujte si knihovnu Angular.JS-mocks přes npm. To lze provést spuštěním níže uvedeného řádku v příkazovém řádku
npm install Angular JS-mocks
  1. Další je upravit soubor karma.conf.js, aby bylo zajištěno, že jsou pro test zahrnuty správné soubory. Níže uvedený segment pouze zobrazuje část souborů karma.conf.js, kterou je třeba upravit 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parametr „soubory“ v podstatě řekne Karmě všechny soubory, které jsou vyžadovány při provádění testů.
  • Ke spuštění jednotkových testů AngularJS je zapotřebí soubor AngularJS.js a AngularJS-mocks.js
  • Soubor index.js bude obsahovat náš kód pro řadič
  • Testovací složka bude obsahovat všechny naše testy AngularJS

Níže je uveden náš Angular.JS kód, který bude uložen jako soubor Index.js v testovací složce naší aplikace.

Níže uvedený kód dělá pouze následující věci

  1. Vytvořte modul Angular JS s názvem sampleApp
  2. Vytvořte ovladač s názvem AngularJSController
  3. Vytvořte proměnnou nazvanou ID, dejte jí hodnotu 5 a přiřaďte ji k objektu $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Jakmile je výše uvedený kód úspěšně proveden, dalším krokem by bylo vytvoření testovacího případu, který zajistí, že byl kód napsán a proveden správně.

Kód pro náš test bude uveden níže.

Kód bude v samostatném souboru s názvem ControllerTest.js, který bude umístěn do testovací složky. Níže uvedený kód provádí pouze následující klíčové věci

  1. beforeEach function - Tato funkce se používá k načtení našeho modulu AngularJS.JS s názvem 'sampleApp' před testovacím spuštěním. Všimněte si, že toto je název modulu v souboru index.js.

  2. Objekt $ controller je vytvořen jako maketa objektu pro řadič '' Angular JSController '', který je definován v našem souboru index.js. V jakémkoli druhu testování jednotek představuje falešný objekt fiktivní objekt, který bude skutečně použit pro testování. Tento falešný objekt bude ve skutečnosti simulovat chování našeho řadiče.

  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 falešný objekt vytvářený pro objekt $ scope.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Zde kontrolujeme existenci řadiče s názvem 'Angular.JSController'. Zde také přiřazujeme všechny proměnné z našeho objektu $ scope v našem řadiči v souboru Index.js k objektu $ scope v našem testovacím souboru

  6. Nakonec porovnává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);});});});

Výše uvedený test proběhne v prohlížeči karma a dá stejný výsledek, který byl uveden v předchozím tématu.

Testování směrnic AngularJS

Rámec pro testování karmy má také funkci pro testování vlastních směrnic. To zahrnuje templateURL, které se používají v rámci vlastních směrnic.

Podívejme se na příklad, jak toho můžeme dosáhnout.

V našem příkladu nejprve definujeme vlastní směrnici, která provádí následující věci

  1. Vytvořte modul AngularJS s názvem sampleApp
  2. Vytvořte vlastní direktivu s názvem - Guru99
  3. Vytvořte funkci, která vrací šablonu se značkou záhlaví, která zobrazuje text „This is AngularJS Testing.“
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Jakmile je výše uvedený kód úspěšně proveden, dalším krokem by bylo vytvoření testovacího případu, který zajistí, že byl kód napsán a proveden správně. Kód pro náš test bude uveden níže

Tento kód bude v samostatném souboru nazvaném DirectiveTest.js, který bude umístěn do testovací složky. Níže uvedený kód provádí pouze následující klíčové věci

  1. beforeEach function - Tato funkce se používá k načtení našeho modulu Angular JS s názvem 'sampleApp' před testovacím spuštěním.

  2. Služba $ compile se používá ke kompilaci směrnice. Tato služba je povinná a musí být deklarována, aby ji Angular.JS mohl použít ke kompilaci naší vlastní směrnice.

  3. $ Rootcope je primární obor jakékoli aplikace AngularJS.JS. V předchozích kapitolách jsme viděli objekt $ scope řadiče. Objekt $ scope je podřízeným objektem objektu $ rootcope. Důvod, proč je zde deklarován, je ten, že provádíme změnu skutečné značky HTML v DOM prostřednictvím naší vlastní směrnice. Proto musíme použít službu $ rootcope, která ve skutečnosti poslouchá nebo ví, kdy dojde ke změně z dokumentu HTML.

  4. var element = $ compile (" ") - Používá se ke kontrole, zda je naše směrnice injektována tak, jak má. Název naší vlastní směrnice je Guru99 a z kapitoly o vlastních směrnicích víme, že když bude směrnice vložena do našeho HTML, bude vložena jako „ “. Toto prohlášení se proto používá k provedení této kontroly.

  5. expect (element.html ()). toContain ("This is AngularJS Testing") - Používá se k instruování funkce expect, že by měl najít prvek (v našem případě tag div) tak, aby obsahoval vnitřní text HTML tohoto Testování 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");});});

Výše uvedený test proběhne v prohlížeči karma a dá stejný výsledek, který byl uveden v předchozím tématu.

End to End Testing AngularJS JS applications

Rámec pro testování karmy spolu s rámcem nazvaným Protractor má funkce testování webové aplikace od začátku do konce.

Nejde tedy jen o testování směrnic a řadičů, ale také o testování čehokoli jiného, ​​co se na stránce HTML může objevit.

Podívejme se na příklad, jak toho můžeme dosáhnout.

V našem příkladu níže budeme mít aplikaci AngularJS, která vytvoří datovou tabulku pomocí direktivy ng-repeat.

  1. Nejprve vytvoříme proměnnou nazvanou „tutorial“ a v jednom kroku jí přiřadíme pár párů klíč – hodnota. Každý pár klíč – hodnota bude použit jako data při zobrazení tabulky. Proměnná tutoriálu je poté přiřazena k objektu oboru tak, aby k ní bylo možné přistupovat z našeho pohledu.
  2. Pro každý řádek dat v tabulce používáme direktivu ng-repeat. Tato směrnice prochází každou dvojicí klíč-hodnota v objektu oboru kurzu pomocí proměnné ptutor.
  3. Nakonec používáme značku spolu s páry klíč-hodnota (ptutor.Name a ptutor.Description) k zobrazení dat tabulky.


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