AngularJS Unit Testing: Karma Jasmine Tutorial

Cuprins:

Anonim

Una dintre cele mai strălucite caracteristici ale Angular.JS este aspectul Testing. Când dezvoltatorii de la Google au dezvoltat AngularJS, au ținut cont de testări și s-au asigurat că întregul cadru AngularJS este testabil.

În AngularJS, testarea se efectuează în mod normal 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ă se utilizeze acest cadru.

  • În AngularJS, putem efectua teste unitare separat pentru controlere și directive.
  • De asemenea, putem efectua testarea finală și finală a AngularJS, care testează din perspectiva utilizatorului.

În acest tutorial, veți învăța-

  • Introducere și instalare a cadrului Karma
    • Instalarea Karma
    • Configurarea cadrului Karma
  • Testarea controlerelor AngularJS
  • Testarea directivelor AngularJS
  • Testarea cap la cap a aplicațiilor AngularJS JS

Introducere și instalare a cadrului Karma

Karma este un instrument de automatizare a testării 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 utilizat 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.

Pasul 1) Executați linia de mai jos din interiorul liniei de comandă

npm install karma karma-chrome-launcher karma-jasmine

Unde

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

Pasul 2) Următorul pas este instalarea utilitarului linie de comandă karma. Acest lucru este necesar pentru executarea comenzilor de linie karma. Utilitarul liniei karma va fi utilizat pentru a inițializa mediul karma pentru testare.

Pentru a instala utilitarul liniei de comandă executați linia de mai jos din interiorul liniei de comandă

npm install karma-cli

în care,

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

Configurarea cadrului Karma

Următorul pas este configurarea karmei care poate fi realizată prin comandă

"karma -init"

După executarea etapei de mai sus, 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 spun motorului karma runtime 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 ” - Aceasta 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ă utilizeze funcționalitatea de testare a unității pentru AngularJS din fișierul Angular.JS-mocks.js.
  4. Toate aplicațiile principale sau fișierele logice de afaceri sunt prezente în folderul lib al aplicației dvs.
  5. Dosarul testelor 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 de descriere este utilizată pentru a da o descriere a testului. În cazul nostru, oferim descrierea „Test de probă” testului nostru.
  2. Funcția „it” este utilizată pentru a da un nume testului. În cazul nostru, dăm numele testului nostru ca „Starea este adevărată”. Numele testului trebuie să fie semnificativ.
  3. Combinația cuvântului cheie „așteptați” și „toBe” indică care este valoarea reală așteptată și rezultatul testului. Dacă valoarea reală și cea așteptată este aceeași, testul va trece altfel va eșua.

Când executați următoarea linie la promptul de comandă, acesta va executa fișierul de test 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. Rezultatul vine în exploratorul Karma din Webstorm. Această fereastră arată executarea tuturor testelor definite în cadrul karma.
  2. Aici puteți vedea că este afișată descrierea testului executat care este „Test de probă”.
  3. Apoi, puteți vedea că testul în sine, care poartă numele „Condiția este adevărată”, este executat.
  4. Rețineți că, deoarece toate testele au pictograma verde „Ok” lângă ea, care simbolizează că toate testele au trecut.

Testarea controlerelor AngularJS

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

Să vedem un exemplu al modului în care putem realiza acest lucru.

În exemplul nostru,

Mai întâi ar trebui să definim un controler. Acest controler va efectua pașii de 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 va testa, de asemenea, pentru a vedea dacă variabila ID a obiectului $ scope este setată la 5.

Mai întâi trebuie să ne asigurăm că următoarele condiții prealabile sunt în vigoare

    1. Instalați biblioteca Angular.JS-mocks prin npm. Acest lucru se poate face executând linia de mai jos în promptul de comandă
npm install Angular JS-mocks
  1. Următorul este să modificați fișierul karma.conf.js pentru a vă asigura că sunt incluse fișierele potrivite pentru test. Segmentul de mai jos arată doar fișierele din karma.conf.js care trebuie modificate 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parametrul „fișiere” indică practic Karmei toate fișierele necesare în desfășurarea 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 un modul JS angular numit sampleApp
  2. Creați un controler numit AngularJSController
  3. Creați o variabilă numită ID, daț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 ne asigura că codul a fost scris și executat corect.

Codul pentru testul nostru va fi cel prezentat 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. funcția beforeEach - Această funcție este utilizată pentru a încărca modulul nostru AngularJS.JS numit „sampleApp” înainte de a rula testul. Rețineți că acesta este numele modulului dintr-un fișier index.js.

  2. Obiectul $ controller este creat ca obiect de machetă pentru controlerul „Angular JSController” care este definit în fișierul index.js. În orice tip 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 (funcție (_ $ controller_) - Acesta este utilizat pentru a injecta obiectul simulat în testul nostru, astfel încât să se comporte ca controlerul real.

  4. var $ scope = {}; Acesta este un obiect fals creat pentru obiectul $ scope.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Aici verificăm existența unui controler numit „Angular.JSController”. Aici alocăm, de asemenea, toate variabilele din 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 oferi același rezultat de trecere așa cum a fost arătat în subiectul anterior.

Testarea directivelor AngularJS

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

Să vedem un exemplu al modului în care 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 testul AngularJS”.
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Odată ce codul de mai sus este executat cu succes, următorul pas ar fi crearea unui caz de testare pentru a ne asigura că codul a fost scris și executat corect. Codul pentru testul nostru va fi cel prezentat 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. funcția beforeEach - Această funcție este utilizată pentru a încărca modulul nostru Angular JS numit „sampleApp” înainte de test.

  2. Serviciul $ compile este utilizat pentru a compila directiva. Acest serviciu este obligatoriu și trebuie declarat astfel încât Angular.JS să îl poată utiliza pentru a compila directiva noastră personalizată.

  3. $ Rootscope este domeniul de aplicare 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 că modificăm o etichetă HTML reală în DOM prin intermediul directivei noastre personalizate. Prin urmare, trebuie să folosim serviciul $ rootscope care ascultă de fapt sau știe când se întâmplă orice modificare dintr-un document HTML.

  4. var element = $ 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 directivelor noastre personalizate că atunci când directiva este injectată în codul nostru HTML, aceasta va fi injectată ca „ ”. Prin urmare, această afirmație este utilizată pentru a face această verificare.

  5. expect (element.html ()). toContain („Acesta este testul AngularJS”) - Acesta este folosit pentru a instrui funcția expect că ar trebui să găsească elementul (în cazul nostru eticheta div) care 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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

Testul de mai sus va rula în browserul karma și va oferi același rezultat de trecere așa cum a fost arătat în subiectul anterior.

Testarea cap la cap a aplicațiilor AngularJS JS

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

Deci nu este doar testarea directivelor și controlorilor, ci și testarea a orice altceva care poate apărea pe o pagină HTML.

Să vedem un exemplu al modului în care 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 utilizată ca date la afișarea tabelului. Variabila tutorial este apoi atribuită obiectului scop, 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ă trece prin fiecare pereche cheie-valoare din obiectul tutorial scop utilizând variabila ptutor.
  3. În cele din urmă, folosim eticheta împreună cu perechile de valori cheie (ptutor.Name și ptutor.Description) pentru a afișa datele din tabel.


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