AngularJS Unit Testing: Karma Jasmine Tutorial

Una dintre cele mai strălucitoare caracteristici ale Angular.JS este Testarea aspect. Când dezvoltatorii de la Google au dezvoltat AngularJS, au ținut cont de testare și s-au asigurat că întregul cadru AngularJS poate fi testat.

În AngularJS, testarea este în mod normal efectuată folosind Karma (cadru). Testarea Angular JS poate fi efectuată fără Karma, dar cadrul Karma are o funcționalitate atât de strălucitoare pentru testarea codului AngularJS, încât are sens să utilizați acest cadru.

• În AngularJS, putem performa Testarea unității separat pentru controlori și directive.
• De asemenea, putem efectua testarea finală a AngularJS, care este testarea din perspectiva utilizatorului.

Introducere și instalare a cadrului Karma

Karma este o instrument de automatizare de testare creat de echipa Angular JS de la Google. Primul pas pentru utilizarea Karma este instalarea Karma. Karma este instalat prin npm (care este un manager de pachete folosit pentru instalarea ușoară a modulelor pe o mașină locală).

Instalarea Karma

Instalarea Karma prin npm se face într-un proces în doi pași.

Pas 1) Executați linia de mai jos din linia de comandă

npm install karma karma-chrome-launcher karma-jasmine

în care,

1. npm este utilitarul de linie de comandă pentru managerul de pachete nod utilizat pentru instalarea modulelor personalizate pe orice mașină.
2. Parametrul de instalare indică utilitarului de linie de comandă npm că este necesară instalarea.
3. Există 3 biblioteci specificate în linia de comandă care sunt necesare pentru a lucra cu karma.
• karma este biblioteca de bază care va fi folosită în scopuri de testare.
• karma-chrome-launcher este o bibliotecă separată care permite comenzilor karma să fie recunoscute de browserul Chrome.
• karma-jasmine – Aceasta instalează iasomie, care este un cadru dependent pentru Karma.

Pas 2) Următorul pas este să instalați utilitarul de linie de comandă karma. Acest lucru este necesar pentru executarea comenzilor din linia karma. Utilitarul karma line va fi folosit pentru a inițializa mediul karma pentru testare.

Pentru a instala utilitarul de linie de comandă, executați linia de mai jos din linia de comandă

npm install karma-cli

în care,

karma-cli este folosit pentru a instala interfața de linie de comandă pentru karma, care va fi folosită pentru a scrie comenzile karma în interfața de linie de comandă.

Configurarea cadrului Karma

Următorul pas este configurarea karmei, care poate fi făcută prin intermediul comenzii

"karma –init"

După ce pasul de mai sus este executat, karma va crea un fișier karma.conf.js. Fișierul va arăta probabil ca fragmentul de mai jos

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

Fișierele de configurare de mai sus îi spun motorului de rulare karma următoarele lucruri

1. „Numele aplicației dvs.” – Acesta va fi înlocuit cu numele aplicației dvs.
2. "Numele aplicației dvs."/AngularJS/AngularJS.js" – Acest lucru îi spune karmei că aplicația dvs. depinde de modulele de bază din AngularJS
3. „Numele aplicației dvs.”/AngularJS-mocks/AngularJS-mocks.js” – Aceasta îi spune karmei să folosească funcționalitatea Unit Testing pentru AngularJS din fișierul Angular.JS-mocks.js.
4. Toate fișierele principale ale aplicației sau ale logicii de afaceri sunt prezente în folderul lib al aplicației dvs.
5. Dosarul de teste va conține toate testele unitare.

Pentru a verifica dacă karma funcționează, creați un fișier numit Sample.js, introduceți codul de mai jos și plasați-l în directorul de testare.

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

Codul de mai sus are următoarele aspecte

1. Funcția descrie este folosită pentru a oferi o descriere a testului. În cazul nostru, dăm descrierea „Sample test” testului nostru.
2. Funcția „it” este folosită pentru a da un nume testului. În cazul nostru, dăm numele testului nostru ca „Condiția este adevărată”. Numele testului trebuie să aibă sens.
3. Combinația dintre cuvintele cheie „așteptați” și „toBe” indică care este valoarea așteptată și reală a rezultatului testului. Dacă valoarea reală și cea așteptată este aceeași, atunci testul va trece, altfel va eșua.

Când executați următoarea linie la promptul de comandă, acesta va executa fișierul de testare de mai sus

KARMA start

Ieșirea de mai jos este preluată din IDE Webstorm în care au fost efectuate etapele de mai sus.

1. Ieșirea vine în exploratorul Karma din interior Webstorm. Această fereastră arată execuția tuturor testelor care sunt definite în cadrul karma.
2. Aici puteți vedea că este afișată descrierea testului executat care este „Sample test”.
3. Apoi, puteți vedea că testul în sine, care are numele „Condiția este adevărată”, este executat.
4. Rețineți că, deoarece toate testele au lângă el pictograma verde „Ok”, care simbolizează că toate testele au trecut.

Testarea controlerelor AngularJS

Cadrul de testare a karmei are, de asemenea, funcționalitatea de a testa controlerele cap la cap. Aceasta include testarea obiectului $scope care este utilizat în Controllers.

Să ne uităm la un exemplu despre cum putem realiza acest lucru.

În exemplul nostru,

Mai întâi ar trebui să definim un controler. Acest controlor va efectua pașii menționați mai jos

1. Creați o variabilă ID și atribuiți-i valoarea 5.
2. Atribuiți variabila ID obiectului $scope.

Testul nostru va testa existența acestui controler și, de asemenea, va testa pentru a vedea dacă variabila ID a obiectului $scope este setată la 5.

Mai întâi trebuie să ne asigurăm că este îndeplinită următoarea cerință prealabilă

Instalați biblioteca Angular.JS-mocks prin npm. Acest lucru se poate face prin executarea liniei de mai jos în promptul de comandă

npm install Angular JS-mocks

Următorul este să modificați fișierul karma.conf.js pentru a vă asigura că fișierele potrivite sunt incluse pentru test. Segmentul de mai jos arată doar părțile fișierelor din karma.conf.js care trebuie modificate

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

• Parametrul „fișiere” îi spune practic Karma toate fișierele care sunt necesare în derularea testelor.
• Fișierul AngularJS.js și AngularJS-mocks.js sunt necesare pentru a rula testele unitare AngularJS
• Fișierul index.js va conține codul nostru pentru controler
• Dosarul de testare va conține toate testele noastre AngularJS

Mai jos este codul nostru Angular.JS care va fi stocat ca fișier Index.js în folderul de testare al aplicației noastre.

Codul de mai jos face doar următoarele lucruri

1. Creați o Modulul AngularJS numit sampleApp
2. Creați un controler numit AngularJSController
3. Creați o variabilă numită ID, acordați-i o valoare de 5 și atribuiți-o obiectului $scope

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

Odată ce codul de mai sus este executat cu succes, următorul pas ar fi crearea unui Caz de testare pentru a se asigura că codul a fost scris și executat corect.

Codul pentru testul nostru va fi așa cum se arată mai jos.

Codul va fi într-un fișier separat numit ControllerTest.js, care va fi plasat în folderul de testare. Codul de mai jos face doar următoarele lucruri cheie

1. beforeEach funcția – Această funcție este folosită pentru a încărca modulul nostru AngularJS.JS numit „sampleApp” înainte de rularea testului. Rețineți că acesta este numele modulului dintr-un fișier index.js.
2. Obiectul $controller este creat ca obiect model pentru controlerul ”Angular JSController”, care este definit în fișierul nostru index.js. În orice fel de testare unitară, un obiect simulat reprezintă un obiect fals care va fi de fapt folosit pentru testare. Acest obiect simulat va simula de fapt comportamentul controlerului nostru.
3. beforeEach(inject(function(_$controller_)) – Acesta este folosit pentru a injecta obiectul simulat în testul nostru, astfel încât acesta să se comporte ca controlerul real.
4. var $scope = {}; Acesta este un obiect simulat care este creat pentru obiectul $scope.
5. var controller = $controller('AngularJSColler', { $scope: $scope }); – Aici verificăm existența unui controler numit „Angular.JSController”. Aici, de asemenea, atribuim toate variabilele de la obiectul nostru $scope din controlerul nostru din fișierul Index.js obiectului $scope din fișierul nostru de testare
6. În cele din urmă, comparăm $scope.ID cu 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);
        });
    });
});

Testul de mai sus va rula în browserul karma și va da același rezultat de trecere ca și în subiectul anterior.

Testarea directivelor AngularJS

Cadrul de testare a karmei are, de asemenea, funcționalitatea de a testa directivele personalizate. Aceasta include templateURL-urile care sunt utilizate în cadrul directivelor personalizate.

Să ne uităm la un exemplu despre cum putem realiza acest lucru.

În exemplul nostru, vom defini mai întâi o directivă personalizată care face următoarele lucruri

1. Creați un modul AngularJS numit sampleApp
2. Creați o directivă personalizată cu numele – Guru99
3. Creați o funcție care returnează un șablon cu o etichetă de antet care afișează textul „Acesta este testarea AngularJS”.

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

Odată ce codul de mai sus este executat cu succes, următorul pas ar fi crearea unui caz de testare pentru a vă asigura că codul a fost scris și executat corect. Codul pentru testul nostru va fi așa cum se arată mai jos

Codul va fi într-un fișier separat numit DirectiveTest.js, care va fi plasat în folderul de testare. Codul de mai jos face doar următoarele lucruri cheie

1. beforeEach function – Această funcție este folosită pentru a încărca modulul nostru Angular JS numit „sampleApp” înainte de rularea testului.
2. Serviciul $compile este folosit pentru a compila directiva. Acest serviciu este obligatoriu și trebuie declarat pentru ca Angular.JS să îl poată utiliza pentru a compila directiva noastră personalizată.
3. $rootscope este domeniul principal al oricărei aplicații AngularJS.JS. Am văzut obiectul $scope al controlerului în capitolele anterioare. Ei bine, obiectul $scope este obiectul copil al obiectului $rootscope. Motivul pentru care acest lucru este declarat aici este pentru că facem o modificare a unei etichete HTML reale în DOM prin directiva noastră personalizată. Prin urmare, trebuie să folosim serviciul $rootscope care de fapt ascultă sau știe când are loc vreo modificare dintr-un document HTML.
4. element var = $compile(“ ”) – Acesta este folosit pentru a verifica dacă directiva noastră este injectată așa cum ar trebui. Numele directivei noastre personalizate este Guru99 și știm din capitolul privind directivele personalizate că atunci când directiva este injectată în HTML, aceasta va fi injectată ca „ '. Prin urmare, această declarație este folosită pentru a face acea verificare.
5. expect(element.html()).toContain(„Acesta este testarea AngularJS”) – Acesta este folosit pentru a instrui funcția expect că ar trebui să găsească elementul (în cazul nostru eticheta div) să conțină textul HTML interior al „Acesta este Testarea 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");
  });
});

Testul de mai sus va rula în browserul karma și va da același rezultat de trecere ca și în subiectul anterior.

Testarea de la capăt la capăt a aplicațiilor AngularJS JS

Cadrul de testare a karmei împreună cu un cadru numit Protractor are funcționalitatea de a testa o aplicație web cap la cap.

Deci nu este vorba doar de testarea directivelor și controlerelor, ci și de testarea oricăror altceva care poate apărea pe o pagină HTML.

Să ne uităm la un exemplu despre cum putem realiza acest lucru.

În exemplul nostru de mai jos, vom avea o aplicație AngularJS care creează un tabel de date folosind directiva ng-repeat.

1. Mai întâi creăm o variabilă numită „tutorial” și îi atribuim câteva perechi cheie-valoare într-un singur pas. Fiecare pereche cheie-valoare va fi folosită ca date la afișarea tabelului. Variabila tutorial este apoi atribuită obiectului scope, astfel încât să poată fi accesată din vizualizarea noastră.
2. Pentru fiecare rând de date din tabel, folosim directiva ng-repeat. Această directivă parcurge fiecare pereche cheie-valoare din obiectul domeniului tutorial folosind variabila ptutor.
3. În cele din urmă, folosim eticheta împreună cu perechile valori-cheie (ptutor.Name și ptutor.Description) pentru a afișa datele din tabel.

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

Odată ce codul de mai sus este executat cu succes, următorul pas ar fi crearea unui caz de testare pentru a vă asigura că codul a fost scris și executat corect. Codul pentru testul nostru va fi așa cum se arată mai jos

Testul nostru va testa de fapt directiva ng-repeat și va asigura că conține 3 rânduri de date așa cum ar trebui din exemplul de mai sus.

Mai întâi trebuie să ne asigurăm că este îndeplinită următoarea cerință prealabilă

Instalați biblioteca raportorului prin npm. Acest lucru se poate face prin executarea liniei de mai jos în promptul de comandă

"npm install protractor"

Codul pentru testul nostru va fi așa cum se arată mai jos.

Codul va fi într-un fișier separat numit CompleteTest.js , care va fi plasat în folderul de testare. Codul de mai jos face doar următoarele lucruri cheie

1. Funcția de browser este furnizată de biblioteca raportorului și presupune că aplicația noastră AngularJS (cu codul afișat mai sus) rulează pe adresa URL a site-ului nostru – http://localhost:8080/Guru99/
2. var list=element.all(by.repeater(ptutor în tutorial')); -Această linie de cod preia de fapt directiva ng-repeat care este populată de codul „ptutor în tutorial”. Elementul și by.repeater sunt cuvinte cheie speciale furnizate de biblioteca raportor care ne permite să obținem detalii despre directiva ng-repeat.
3. așteptați(listă.număr()).toEqual(3); – În cele din urmă, folosim funcția expect pentru a vedea că într-adevăr primim 3 elemente populate în tabelul nostru ca urmare a directivei 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);  }); });

Testul de mai sus va rula în browserul karma și va da același rezultat de trecere ca și în subiectul anterior.

Rezumat

• Testarea în AngularJS se realizează prin utilizarea cadrului karma, un cadru care a fost dezvoltat chiar de Google.
• Cadrul karma este instalat folosind managerul de pachete nod. Modulele cheie care trebuie instalate pentru testarea de bază sunt karma, karma-chrome-launcher, karma-jasmine și karma-cli.
• Testele sunt scrise în fișiere js separate, păstrate în mod normal în folderul de testare al aplicației dumneavoastră. Locația acestor fișiere de testare trebuie menționată într-un fișier de configurare special numit karma.conf.js. Karma folosește acest fișier de configurare atunci când execută toate testele.
• Karma poate fi folosită și pentru a testa controlerele și directivele personalizate.
• Pentru o testare web de la capăt la capăt, un alt cadru numit raportor trebuie să fie instalat prin intermediul Node, manager de pachete. Acest cadru oferă metode speciale care pot fi folosite pentru a testa toate elementele dintr-o pagină HTML.