AngularJS Unit Testing: Karma Jasmine Tutorial

Jednou z nejskvělejších vlastností Angular.JS je Testování aspekt. Když vývojáři z Google vyvíjeli AngularJS, měli na paměti testování a ujistili se, že celý framework AngularJS je testovatelný.

V AngularJS se testování normálně provádí pomocí Karma (rámce). Testování Angular 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 Testování jednotek zvlášť pro kontrolory a směrnice.
• Můžeme také provést end-end testování AngularJS, což je testování z pohledu uživatele.

Úvod a instalace rámce Karma

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

Instalace karmy

Instalace Karmy přes 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

přičemž

1. npm je nástroj příkazového řádku pro správce balíčků uzlů používaný k instalaci vlastních modulů na libovolný počítač.
2. Parametr install dává obslužnému programu příkazového řádku npm pokyn, že je vyžadována instalace.
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 testovací účely.
• karma-chrome-launcher je samostatná knihovna, která umožňuje rozpoznání příkazů karmy prohlížečem chrome.
• karma-jasmine – Nainstaluje jasmín, který je závislým rámcem pro Karmu.

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ů linie karmy. Nástroj karma line bude použit k inicializaci prostředí karmy pro testování.

Chcete-li nainstalovat nástroj příkazového řádku, spusťte níže uvedený řádek z příkazového řádku

npm install karma-cli

kde

karma-cli se používá k instalaci rozhraní příkazového řádku pro karmu, které bude použito k zápisu příkazů karma v 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 zobrazený 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 sdělují karma runtime engine následující věci

1. 'Název vaší aplikace' – Toto bude nahrazeno názvem vaší aplikace.
2. "Název vaší aplikace'/AngularJS/AngularJS.js' – To říká karmě, že vaše aplikace závisí na základních modulech v AngularJS
3. 'Název vaší aplikace'/AngularJS-mocks/AngularJS-mocks.js' – Toto řekne karmě, aby použila funkci Unit Testing pro AngularJS ze souboru Angular.JS-mocks.js.
4. Všechny soubory hlavní aplikace nebo obchodní logiky jsou přítomny ve složce lib vaší aplikace.
5. Složka testy 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 adresáře test.

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 se používá 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 pravdivá'. Název testu musí být smysluplný.
3. Kombinace klíčových slov 'očekávat' a 'toBe' udává, 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, spustí se 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 uvnitř Webstorm. Toto okno ukazuje provedení 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 pravdivá“.
4. Všimněte si, že protože všechny testy mají vedle sebe zelenou ikonu „Ok“, která symbolizuje, že všechny testy prošly úspěšně.

Testování ovladačů AngularJS

Rámec 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 rámci Controllers.

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

V našem příkladu

Nejprve bychom potřebovali definovat regulátor. Tento ovladač 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 objektu $scope.

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

Nejprve se musíme ujistit, že jsou splněny následující předpoklady

Nainstalujte 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

Dále je třeba upravit soubor karma.conf.js, aby bylo zajištěno, že do testu budou zahrnuty správné soubory. Níže uvedený segment pouze zobrazuje soubory části karma.conf.js, které je třeba upravit

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

• Parametr 'files' v podstatě říká Karmě všechny soubory, které jsou vyžadovány pro běh testů.
• Ke spuštění testů jednotek AngularJS jsou vyžadovány soubory AngularJS.js a AngularJS-mocks.js
• Soubor index.js bude obsahovat náš kód pro řadič
• Složka test bude obsahovat všechny naše testy AngularJS

Níže je náš kód Angular.JS, 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řit Modul AngularJS s názvem sampleApp
2. Vytvořte řadič s názvem AngularJSController
3. Vytvořte proměnnou s názvem ID, přiřaďte 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í a Testovací případ abyste se ujistili, že kód byl napsán a správně proveden.

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

Kód bude v samostatném souboru s názvem ControllerTest.js, který bude umístěn ve složce test. Níže uvedený kód dělá 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 spuštěním testu. Všimněte si, že toto je název modulu v souboru index.js.
2. Objekt $controller je vytvořen jako maketa objektu pro kontrolér ”Angular JSController”, který je definován v našem souboru index.js. V jakémkoliv typu Unit Testing 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 ovladače.
3. beforeEach(inject(function(_$controller_)) – Používá se k vložení falešného objektu v našem testu tak, aby se choval jako skutečný ovladač.
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 kontroléru 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 se spustí v prohlížeči karmy a poskytne stejný výsledek, jaký byl ukázán v předchozím tématu.

Testování směrnic AngularJS

Rámec testování karmy má také funkce pro testování vlastních direktiv. To zahrnuje šablony URL, které se používají v rámci vlastních direktiv.

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

V našem příkladu nejprve definujeme vlastní direktivu, která dělá 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á vrátí šablonu se značkou záhlaví, která zobrazí text „Toto je AngularJS Testing“.

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

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

Kód bude v samostatném souboru s názvem DirectiveTest.js, který bude umístěn ve složce test. Níže uvedený kód dělá pouze následující klíčové věci

1. Před každou funkcí – Tato funkce se používá k načtení našeho modulu Angular JS s názvem „sampleApp“ před testovacím provozem.
2. Ke kompilaci směrnice se používá služba $compile. 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. $rootscope je primární rozsah jakékoli aplikace AngularJS.JS. Objekt $scope ovladače jsme viděli v předchozích kapitolách. Objekt $scope je potomkem objektu $rootscope. Důvod, proč je to zde deklarováno, je ten, že provádíme změnu skutečné HTML značky v DOM prostřednictvím naší vlastní direktivy. Proto musíme použít službu $rootscope, která skutečně naslouchá nebo ví, když dojde k jakékoli změně v dokumentu HTML.
4. var element = $compile(“ “) – Používá se ke kontrole, zda je naše směrnice aplikována tak, jak má. Název naší vlastní směrnice je Guru99 a z kapitoly o vlastních direktivách víme, že když je směrnice vložena do našeho HTML, bude vložena jako „ '. Proto se toto prohlášení používá k provedení této kontroly.
5. expect(element.html()).toContain(“Toto je AngularJS Testing”) – Používá se k instruování funkce očekávat, že by měla najít prvek (v našem případě značku div), který obsahuje vnitřní HTML text „Toto je 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 directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Výše uvedený test se spustí v prohlížeči karmy a poskytne stejný výsledek, jaký byl ukázán v předchozím tématu.

End to End testování aplikací AngularJS JS

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

Nejde tedy pouze o testování direktiv a kontrolérů, ale také testování čehokoli jiného, ​​co se může na stránce HTML 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 několik párů klíč–hodnota. Každý pár klíč–hodnota bude použit jako data při zobrazení tabulky. Proměnná tutoriálu je pak přiřazena k objektu scope, takže k ní lze přistupovat z našeho pohledu.
2. Pro každý řádek dat v tabulce používáme direktivu ng-repeat. Tato direktiva prochází každý pár klíč–hodnota v objektu rozsahu kurzu pomocí proměnné ptutor.
3. Nakonec používáme tag spolu s páry klíč-hodnota (ptutor.Name a ptutor.Description) pro zobrazení dat tabulky.

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

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

Náš test ve skutečnosti otestuje direktivu ng-repeat a zajistí, že obsahuje 3 řádky dat, jak by měla z výše uvedeného příkladu.

Nejprve se musíme ujistit, že jsou splněny následující předpoklady

Nainstalujte knihovnu úhloměrů přes npm. To lze provést spuštěním níže uvedeného řádku v příkazovém řádku

"npm install protractor"

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

Kód bude v samostatném souboru s názvem CompleteTest.js , který bude umístěn ve složce test. Níže uvedený kód dělá pouze následující klíčové věci

1. Funkce prohlížeče je poskytována knihovnou úhloměrů a předpokládá, že naše aplikace AngularJS (s kódem uvedeným výše) běží na adrese URL našeho webu – http://localhost:8080/Guru99/
2. var list=element.all(by.repeater(ptutor v tutoriálu')); -Tento řádek kódu ve skutečnosti načítá direktivu ng-repeat, která je vyplněna kódem 'ptutor in tutorial'. Element a by.repeater jsou speciální klíčová slova poskytovaná knihovnou protractor, která nám umožňuje získat podrobnosti o direktivě ng-repeat.
3. očekávat(seznam.počet()).rovnocen(3); – Nakonec používáme funkci očekávat, abychom viděli, že v naší tabulce jsou skutečně zaplňovány 3 položky v důsledku direktivy ng-repeat.

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

Výše uvedený test se spustí v prohlížeči karmy a poskytne stejný výsledek, jaký byl ukázán v předchozím tématu.

Shrnutí

• Testování v AngularJS se provádí pomocí rámce karma, rámce, který vyvinul sám Google.
• Rámec karmy se instaluje pomocí správce balíčků uzlů. Klíčové moduly, které je nutné nainstalovat pro základní testování, jsou karma, karma-chrom-launcher, karma-jasmín a karma-cli.
• Testy jsou zapsány v samostatných souborech js, které se obvykle uchovávají ve složce test vaší aplikace. Umístění těchto testovacích souborů musí být uvedeno ve speciálním konfiguračním souboru s názvem karma.conf.js. Karma používá tento konfigurační soubor při provádění všech testů.
• Karmu lze také použít k testování ovladačů a vlastních direktiv.
• Pro úplné testování webu je třeba nainstalovat další rámec zvaný úhloměr prostřednictvím správce balíčků Node. Tento rámec poskytuje speciální metody, které lze použít k testování všech prvků na stránce HTML.