Jedinstveno testiranje AngularJS: Vodič za Karmu Jasmine

Sadržaj:

Anonim

Jedna od najsjajnijih karakteristika Angular.JS je aspekt testiranja. Kad su programeri na Googleu razvili AngularJS, imali su na umu testiranje i pobrinuli se da se provjeri cjelokupni okvir AngularJS.

U AngularJS testiranje se obično provodi pomoću Karme (framework). Angular JS testiranje može se provesti bez Karme, ali Karma framework ima tako sjajnu funkcionalnost za testiranje AngularJS koda da ima smisla koristiti ovaj okvir.

  • U AngularJS-u možemo zasebno izvesti jedinstveno testiranje za kontrolere i direktive.
  • Također možemo izvršiti krajnje krajnje testiranje AngularJS-a, koje se testira iz korisničke perspektive.

U ovom vodiču naučit ćete-

  • Uvod i instalacija Karma okvira
    • Instalacija Karme
    • Konfiguracija okvira Karma
  • Testiranje AngularJS kontrolera
  • Testiranje AngularJS direktiva
  • Ispitivanje od kraja do kraja AngularJS JS aplikacije

Uvod i instalacija Karma okvira

Karma je alat za automatizaciju testiranja koji je stvorio tim Angular JS pri Googleu. Prvi korak za korištenje Karme je instalacija Karme. Karma se instalira putem npm (što je upravitelj paketa koji se koristi za jednostavnu instalaciju modula na lokalnom stroju).

Instalacija Karme

Instalacija Karme putem npm vrši se u dva koraka.

Korak 1) Izvršite donji redak unutar naredbenog retka

npm install karma karma-chrome-launcher karma-jasmine

Pri čemu

  1. npm je uslužni program naredbenog retka za upravitelj paketa čvorova koji se koristi za instaliranje prilagođenih modula na bilo koji stroj.
  2. Parametar install upućuje npm uslužni program naredbenog retka da je potrebna instalacija.
  3. U naredbenom retku navedene su 3 biblioteke koje su potrebne za rad s karmom
    • karma je temeljna knjižnica koja će se koristiti u svrhe testiranja.
    • karma-chrome-launcher je zasebna biblioteka koja omogućuje prepoznavanje karma naredbi u pregledniku chrome.
    • karma-jasmin - Instalira jasmin koji je ovisan okvir za Karmu.

Korak 2) Sljedeći je korak instaliranje uslužnog programa karma naredbenog retka. To je potrebno za izvršavanje naredbi karma linije. Uslužni program karma linija koristit će se za inicijalizaciju karma okruženja za testiranje.

Da biste instalirali uslužni program naredbenog retka, izvedite donji redak unutar naredbenog retka

npm install karma-cli

pri čemu,

  1. karma-cli se koristi za instaliranje sučelja naredbenog retka za karmu koje će se koristiti za pisanje karma naredbi u sučelje naredbenog retka.

Konfiguracija okvira Karma

Sljedeći je korak konfiguriranje karme što se može učiniti putem naredbe

"karma -init"

Nakon izvršenja gornjeg koraka, karma će stvoriti karma.conf.js datoteku. Datoteka će vjerojatno izgledati poput isječka prikazanog u nastavku

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

Gore navedene konfiguracijske datoteke govore karma runtime engineu sljedeće stvari

  1. 'Ime vaše prijave' - ovo će biti zamijenjeno nazivom vaše prijave.
  2. ' Ime vaše aplikacije' / AngularJS / AngularJS.js ' - Ovo govori karmi da vaša aplikacija ovisi o temeljnim modulima u AngularJS
  3. 'Ime vaše aplikacije' / AngularJS-mocks / AngularJS-mocks.js ' - Ovo govori karmi da koristi funkcionalnost jediničnog testiranja za AngularJS iz datoteke Angular.JS-mocks.js.
  4. Sve glavne datoteke aplikacije ili poslovne logike nalaze se u mapi mape vaše aplikacije.
  5. Mapa testova sadržavat će sve jedinične testove

Da biste provjerili radi li karma, stvorite datoteku koja se zove Sample.js, stavite donji kod i smjestite je u testni direktorij.

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

Gornji kod ima sljedeće aspekte

  1. Funkcija opisivanja koristi se za opisivanje testa. U našem slučaju našem testu dajemo opis "Uzorak testa".
  2. Funkcija 'it' koristi se za davanje naziva testu. U našem slučaju naziv našeg testa dajemo kao „Stanje je točno“. Naziv testa mora imati značenje.
  3. Kombinacija ključne riječi 'očekivati' i 'toBe' navodi o očekivanoj i stvarnoj vrijednosti rezultata testa. Ako su stvarna i očekivana vrijednost iste, tada će test proći jer neće uspjeti.

Kada izvršite sljedeći redak u naredbenom retku, izvršit će gornju testnu datoteku

KARMA start

Izlaz u nastavku preuzet je iz IDE Webstorma u kojem su provedeni gornji koraci.

  1. Rezultat dolazi u Karma Exploreru unutar Webstorma. Ovaj prozor prikazuje izvršavanje svih testova koji su definirani u okviru karme.
  2. Ovdje možete vidjeti da je prikazan opis izvedenog testa koji je "Uzorak testa".
  3. Dalje možete vidjeti da se izvršava sam test koji ima naziv "Stanje je točno".
  4. Imajte na umu da budući da svi testovi imaju zelenu ikonu "Ok" koja simbolizira da su svi testovi položeni.

Testiranje AngularJS kontrolera

Okvir za testiranje karme također ima funkcionalnost za testiranje kontrolera od kraja do kraja. To uključuje testiranje $ scope objekta koji se koristi u Controllerima.

Pogledajmo primjer kako to možemo postići.

U našem primjeru,

Prvo bismo trebali definirati kontroler. Ovaj kontroler će izvršiti dolje navedene korake

  1. Stvorite varijablu ID i dodijelite joj vrijednost 5.
  2. Dodijelite varijablu ID objektu $ scope.

Naš test će testirati postojanje ovog kontrolera, a također će provjeriti je li varijabla ID objekta $ scope postavljena na 5.

Prvo moramo osigurati da postoji sljedeći preduvjet

    1. Instalirajte knjižnicu Angular.JS-mocks putem npm. To se može učiniti izvršavanjem donjeg retka u naredbenom retku
npm install Angular JS-mocks
  1. Sljedeće je izmijeniti karma.conf.js datoteku kako bi se osiguralo da su prave datoteke uključene u test. Sljedeći segment samo prikazuje datoteke dio karma.conf.js koji treba izmijeniti 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parametar "datoteke" u osnovi govori Karmi sve datoteke potrebne za izvođenje testova.
  • Datoteka AngularJS.js i AngularJS-mocks.js potrebne su za pokretanje jedinstvenih testova AngularJS
  • Datoteka index.js sadržavat će naš kod za kontroler
  • Mapa za testiranje sadržavat će sve naše AngularJS testove

Ispod je naš Angular.JS kôd koji će biti pohranjen kao datoteka Index.js u testnoj mapi naše aplikacije.

Kôd u nastavku samo čini sljedeće stvari

  1. Stvorite kutni JS modul nazvan sampleApp
  2. Stvorite kontroler nazvan AngularJSController
  3. Stvorite varijablu koja se zove ID, dajte joj vrijednost 5 i dodijelite je $ range objektu
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Nakon što se gornji kôd uspješno izvrši, sljedeći bi korak bio stvaranje test slučaja kako bi se osiguralo da je kôd pravilno napisan i izvršen.

Kôd za naš test bit će prikazan dolje.

Kôd će biti u zasebnoj datoteci nazvanoj ControllerTest.js, koja će biti smještena u testnu mapu. Kôd u nastavku samo čini sljedeće ključne stvari

  1. beforeEach funkcija - Ova se funkcija koristi za učitavanje našeg modula AngularJS.JS pod nazivom 'sampleApp' prije probnog rada. Imajte na umu da je ovo ime modula u datoteci index.js.

  2. Objekt $ controller stvoren je kao model makete za kontroler '' Angular JSController '' koji je definiran u našoj datoteci index.js. U bilo kojoj vrsti Jedinstvenog testiranja, lažni objekt predstavlja lažni objekt koji će se zapravo koristiti za testiranje. Ovaj lažni objekt zapravo će simulirati ponašanje našeg kontrolera.

  3. beforeEach (inject (function (_ $ controller_)) - Koristi se za ubrizgavanje lažnog objekta u naš test tako da se ponaša kao stvarni kontroler.

  4. var $ doseg = {}; Ovo je lažni objekt koji se kreira za objekt $ scope.

  5. var kontroler = $ kontroler ('AngularJSController', {$ opseg: $ opseg}); - Ovdje provjeravamo postoji li kontroler pod nazivom 'Angular.JSController'. Ovdje također dodjeljujemo sve varijable iz našeg objekta $ scope u našem kontroleru u datoteci Index.js u objekt $ scope u našoj testnoj datoteci

  6. Konačno, uspoređujemo $ 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);});});});

Gornji test pokrenut će se u karma pregledniku i dati će isti rezultat prolaska kao što je prikazano u prethodnoj temi.

Testiranje AngularJS direktiva

Okvir za testiranje karme također ima funkcionalnost za testiranje prilagođenih direktiva. To uključuje templateURL-ove koji se koriste unutar prilagođenih direktiva.

Pogledajmo primjer kako to možemo postići.

U našem primjeru prvo ćemo definirati prilagođenu direktivu koja čini sljedeće stvari

  1. Stvorite modul AngularJS pod nazivom sampleApp
  2. Stvorite prilagođenu direktivu s imenom - Guru99
  3. Stvorite funkciju koja vraća predložak s oznakom zaglavlja koji prikazuje tekst "Ovo je AngularJS testiranje."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Nakon što se gornji kôd uspješno izvrši, sljedeći korak bio bi stvaranje testnog slučaja kako bi se osiguralo da je kôd pravilno napisan i izvršen. Kôd za naš test bit će prikazan u nastavku

Kôd će se nalaziti u zasebnoj datoteci pod nazivom DirectiveTest.js, koja će biti smještena u testnu mapu. Kôd u nastavku samo čini sljedeće ključne stvari

  1. beforeEach funkcija - Ova se funkcija koristi za učitavanje našeg kutnog JS modula pod nazivom 'sampleApp' prije probnog rada.

  2. Usluga $ compile koristi se za sastavljanje direktive. Ova je usluga obavezna i treba je prijaviti kako bi je Angular.JS mogao koristiti za sastavljanje naše prilagođene direktive.

  3. $ Rootcope je primarni opseg bilo koje aplikacije AngularJS.JS. Objekt $ scope kontrolora vidjeli smo u ranijim poglavljima. Pa, objekt $ scope je podređeni objekt objekta $ rootcope. Razlog zašto je ovo ovdje deklarirano je taj što mijenjamo stvarnu HTML oznaku u DOM-u putem naše prilagođene direktive. Stoga trebamo koristiti uslugu $ rootcope koja zapravo preslušava ili zna kada se dogodi neka promjena unutar HTML dokumenta.

  4. var element = $ compile (" ") - Koristi se za provjeru ubrizgava li se naša direktiva kako treba. Naziv naše prilagođene direktive je Guru99, a iz poglavlja naših prilagođenih smjernica znamo da će se, kada se direktiva ubrizga u naš HTML, ubrizgati kao ' '. Stoga se ova izjava koristi za tu provjeru.

  5. očekivati ​​(element.html ()). toContain ("Ovo je testiranje AngularJS") - To se koristi za navođenje funkcije očekivanja da treba pronaći element (u našem slučaju div oznaku) koji sadrži unutarnji HTML tekst "Ovo je Ispitivanje 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");});});

Gornji test pokrenut će se u karma pregledniku i dati će isti rezultat prolaska kao što je prikazano u prethodnoj temi.

Ispitivanje od kraja do kraja AngularJS JS aplikacije

Okvir za testiranje karme, zajedno s okvirom nazvanim Protractor, ima funkcionalnost testiranja web aplikacije od kraja do kraja.

Dakle, to nije samo testiranje direktiva i kontrolera, već i testiranje bilo čega drugog što se može pojaviti na HTML stranici.

Pogledajmo primjer kako to možemo postići.

U našem primjeru u nastavku imat ćemo aplikaciju AngularJS koja stvara tablicu podataka pomoću direktive ng-repeat.

  1. Prvo stvaramo varijablu koja se naziva "tutorial" i dodijeljujemo joj nekoliko parova ključ / vrijednost u jednom koraku. Svaki par ključ / vrijednost koristit će se kao podaci prilikom prikazivanja tablice. Vodič varijable tada se dodjeljuje objektu opsega tako da joj se može pristupiti iz našeg pogleda.
  2. Za svaki redak podataka u tablici koristimo ng-repeat direktivu. Ova direktiva prolazi kroz svaki par ključ / vrijednost u objektu udžbeničkog opsega pomoću varijable ptutor.
  3. Napokon, koristimo oznaku zajedno s parovima vrijednosti ključeva (ptutor.Name i ptutor.Description) za prikaz podataka tablice.


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