AngularJS jedinično testiranje s Karmom i Jasmine

Jedna od najbriljantnijih značajki AngularJS-a je Ispitivanje aspekt. Kada programeri na Google Razvili su AngularJS, imajući na umu testiranje i osigurali su da je cijeli AngularJS framework testiran.

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

• U AngularJS-u možemo izvesti Ispitivanje jedinice odvojeno za kontrolere i direktive.
• Također možemo izvesti testiranje od početka do kraja AngularJS-a, koji testira iz korisničke perspektive.

Uvod i instalacija okvira Karma

Karma je a alat za automatizaciju testiranja kreirao AngularJS tim na GooglePrvi korak za korištenje Karme je instalacija Karme. Karma se instalira putem npm-a (koji je upravitelj paketa koji se koristi za jednostavnu instalaciju modula na lokalnom računalu).

Instalacija Karme

Instalacija Karme putem npm-a odvija se u dva koraka.

Korak 1) Izvršite donji redak iz naredbenog retka

npm install karma karma-chrome-launcher karma-jasmine --save-dev

pri čemu,

1. npm je uslužni program naredbenog retka za upravitelj paketa čvorova koji se koristi za instaliranje prilagođenih modula na bilo kojem računalu. Dolazi s Node.js.
2. Parametar instalacija upućuje pomoćni program naredbenog retka npm da je potrebna instalacija.
3. Postoje 3 biblioteke navedene u naredbenom retku koje su potrebne za rad s karmom.
   • karma je temeljna biblioteka koja će se koristiti u svrhe testiranja.
   • karma-chrome-launcher je zasebna biblioteka koja omogućuje da chrome preglednik prepozna karma naredbe.
   • karma-jasmine – Ovo instalira jasmine koji je ovisan okvir za Karmu.

Korak 2) Sljedeći korak je instalacija uslužnog programa naredbenog retka karma. Ovo je potrebno za izvršavanje naredbi karma linije. Pomoćni program karma line koristit će se za pokretanje karma okruženja za testiranje.

Za instalaciju uslužnog programa naredbenog retka izvršite donji redak iz naredbenog retka

npm install -g karma-cli

• karma-cli se koristi za instalaciju sučelja naredbenog retka za karmu koje će se koristiti za pisanje karma naredbi u sučelju naredbenog retka. Zastavica -g instalira ga globalno tako da je naredba karma dostupna iz bilo koje mape.

Konfiguracija okvira Karma

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

karma init

Nakon izvršenja gornjeg koraka, karma će stvoriti datoteku karma.conf.js. Datoteka će vjerojatno izgledati kao isječak prikazan u nastavku

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Gornje konfiguracijske datoteke govore karma runtime motoru sljedeće stvari

1. kutni.js – Ovo govori karmi da vaša aplikacija ovisi o osnovnim modulima u AngularJS-u.
2. angular-mocks.js – Ovo govori karmi da koristi funkcionalnost testiranja jedinica za AngularJS iz datoteke angular-mocks.js.
3. Sve glavne aplikacije ili datoteke poslovne logike prisutne su u mapi lib vaše aplikacije.
4. Mapa testova sadržavat će sve jedinične testove.

Da biste provjerili radi li karma, kreirajte datoteku pod nazivom 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 describe koristi se za opis 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, našem testu dajemo naziv 'Uvjet je istinit'. Naziv testa mora biti smislen.
3. Kombinacija ključnih riječi 'expect' i 'toBe' govori o očekivanoj i stvarnoj vrijednosti rezultata testa. Ako su stvarna i očekivana vrijednost iste, test će proći inače neće uspjeti.

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

karma start

Ispis u nastavku preuzet je iz IDE-a Webstorm u kojem su provedeni gore navedeni koraci.

1. Rezultat dolazi u Karma explorer unutar Webstorm. Ovaj prozor prikazuje izvršenje svih testova koji su definirani u okviru karme.
2. Ovdje možete vidjeti da je prikazan opis izvršenog testa koji je "Uzorak testa".
3. Zatim možete vidjeti da se sam test koji ima naziv "Uvjet je istinit" izvršava.
4. Imajte na umu da budući da svi testovi imaju zelenu ikonu "Ok" pored sebe koja simbolizira da su svi testovi prošli.

Što je Jasmine u AngularJS jediničnom testiranju?

Karma odlučuje gdje se testovi izvode, dok Jasmine odlučuje kako će biti napisani. Jasmine je okvir za specifikaciju vođen ponašanjem koji pruža vokabular korišten u svakom primjeru na ovoj stranici, zbog čega je adapter karma-jasmine instaliran uz runner.

Jasmina doprinosi s četiri gradivna bloka:

• opisati(): Grupira povezane specifikacije u paket i prihvaća čitljiv opis jedinice koja se testira.
• to(): Deklarira jednu specifikaciju. Naziv treba navoditi ponašanje koje se provjerava, a ne metodu koja se poziva.
• expect() s podudarnicima: Uspoređuje stvarnu vrijednost s očekivanom. Uobičajeni kriteriji za usporedbu uključuju toBe, toEqual, toContain i toBeDefined.
• prije svakog() i poslije svakog(): Pokrenite postavljanje i rastavljanje prije i nakon svake specifikacije, što svaki test čini neovisnim.

Jasmine također pruža špijune. Špijun zamjenjuje stvarnu funkciju snimljenom zamjenom, tako da se kontroler može testirati bez pozivanja aktivne HTTP krajnje točke. Budući da Jasmine ne treba DOM niti vlastitu biblioteku assertion, kombinacija Karme i Jasmine ostaje najlakši način za pokretanje AngularJS-a. JavaJedinični testovi skripti.

Testiranje AngularJS kontrolera

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

Pogledajmo primjer kako to možemo postići.

U našem primjeru,

Prvo bismo trebali definirati kontroler. Ovaj upravljač bi izvršio dolje navedene korake

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

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

Prvo moramo osigurati da su sljedeći preduvjeti na mjestu

Instalirajte biblioteku angular-mocks putem npm-a. To se može učiniti izvršavanjem donje linije u naredbenom retku

npm install angular-mocks --save-dev

Sljedeće je modificiranje datoteke karma.conf.js kako bi se osiguralo da su prave datoteke uključene u test. Donji segment samo prikazuje dio datoteke karma.conf.js koji treba modificirati

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

• Parametar 'files' u osnovi govori Karmi sve datoteke koje su potrebne za izvođenje testova.
• Za pokretanje AngularJS jediničnih testova potrebne su datoteke angular.js i angular-mocks.js.
• Datoteka index.js sadržavat će naš kod za kontroler
• Testna mapa sadržavat će sve naše AngularJS testove

Ispod je naš AngularJS kod koji će biti pohranjen kao datoteka Index.js u testnoj mapi naše aplikacije.

Donji kod radi samo sljedeće stvari

1. Napravite AngularJS modul pod nazivom sampleApp
2. Napravite kontroler pod nazivom AngularJSController
3. Napravite varijablu pod nazivom ID, dajte joj vrijednost 5 i dodijelite je objektu $scope

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

Nakon što se gornji kod uspješno izvrši, sljedeći korak bio bi stvaranje a Testni slučaj kako bi se osiguralo da je kôd ispravno napisan i izveden.

Kod za naš test bit će prikazan u nastavku.

Kod će biti u zasebnoj datoteci pod nazivom ControllerTest.js, koja će biti smještena u testnu mapu. Donji kod radi samo sljedeće ključne stvari

1. Funkcija beforeEach – Ova se funkcija koristi za učitavanje našeg AngularJS modula pod nazivom 'sampleApp' prije testiranja. Imajte na umu da je ovo naziv modula u datoteci index.js.
2. Objekt $controller kreiran je kao mockup objekt za kontroler "AngularJSController" koji je definiran u našoj index.js datoteci. U bilo kojoj vrsti jediničnog testiranja, mock objekt predstavlja lažni objekt koji će se zapravo koristiti za testiranje. Ovaj mock objekt će zapravo simulirati ponašanje našeg kontrolera.
3. beforeEach(inject(function(_$controller_) – Ovo se koristi za ubacivanje lažnog objekta u našem testu tako da se ponaša kao stvarni kontroler.
4. var $scope = {}; Ovo je lažni objekt koji se stvara za objekt $scope.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Ovdje provjeravamo postojanje kontrolera pod nazivom 'AngularJSController'. Ovdje također dodjeljujemo sve varijable iz našeg objekta $scope u našem kontroleru u datoteci Index.js objektu $scope u našoj testnoj datoteci
6. Na kraju, 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);
    });
  });
});

Gore navedeni test pokrenut će se u karma pregledniku i dati će isti prolazni rezultat 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 predložakURLkoji 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 radi sljedeće stvari

1. Napravite AngularJS modul pod nazivom sampleApp
2. Izradite prilagođenu direktivu s nazivom – guru99
3. Napravite funkciju koja vraća predložak s oznakom zaglavlja koja prikazuje tekst "Ovo je AngularJS testiranje."

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

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

Kod će biti u zasebnoj datoteci pod nazivom DirectiveTest.js, koja će biti smještena u testnu mapu. Donji kod radi samo sljedeće ključne stvari

1. Funkcija beforeEach – Ova se funkcija koristi za učitavanje našeg AngularJS modula pod nazivom 'sampleApp' prije pokretanja testa.
2. Za kompajliranje direktive koristi se servis $compile. Ovaj servis je obavezan i potrebno ga je deklarirati kako bi ga AngularJS mogao koristiti za kompajliranje naše prilagođene direktive.
3. Objekt $rootScope je primarni opseg bilo koje AngularJS aplikacije. Objekt $scope kontrolera vidjeli smo u ranijim poglavljima. Objekt $scope je podređeni objekt objekta $rootScope. Razlog zašto je ovo ovdje deklarirano je taj što mijenjamo stvarnu HTML oznaku u DOM-u putem naše prilagođene direktive. Stoga moramo koristiti uslugu $rootScope koja zapravo sluša ili zna kada se dogodi bilo kakva promjena unutar HTML dokumenta.
4. var element = $compile(" ”)($rootScope) – Ovo se koristi za provjeru je li naša direktiva ubrizgana kako treba. Direktiva je registrirana s imenom guru99, koje se piše velikim i malim slovima, pa AngularJS odgovara elementu s malim slovima u označavanju. Stoga se ova naredba koristi za tu provjeru.
5. expect(element.html()).toContain(“Ovo je AngularJS testiranje”) – Ovo se koristi za uputu funkciji expect da pronađe element (u našem slučaju h1 tag) koji sadrži unutarnji HTML tekst “Ovo je AngularJS testiranje”.

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("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

Testiranje AngularJS aplikacija od početka do kraja

Okvir za testiranje karme zajedno s okvirom pod nazivom ProtracTor ima funkcionalnost testiranja web aplikacije od početka 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 AngularJS aplikaciju koja stvara podatkovnu tablicu pomoću direktive ng-repeat.

1. Prvo stvaramo varijablu pod nazivom "tutorial" i dodjeljujemo joj parove ključ-vrijednost u jednom koraku. Svaki par ključ-vrijednost koristit će se kao podatak prilikom prikaza tablice. Varijabla vodiča se zatim dodjeljuje objektu opsega tako da mu se može pristupiti iz našeg pogleda.
2. Za svaki redak podataka u tablici koristimo direktivu ng-repeat. Ova direktiva prolazi kroz svaki par ključ-vrijednost u objektu opsega vodiča pomoću varijable ptutor.
3. Konačno, koristimo se oznaku zajedno s parovima vrijednosti ključa (ptutor.Name i ptutor.Description) za prikaz podataka tablice.

<table>
  <tr ng-repeat="ptutor in tutorial">
    <td>{{ ptutor.Name }}</td>
    <td>{{ ptutor.Description }}</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var app = angular.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"}
  ];
});

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

Naš test zapravo će testirati direktivu ng-repeat i osigurati da sadrži 3 retka podataka kao što bi trebalo iz gornjeg primjera.

Prvo moramo osigurati da su sljedeći preduvjeti na mjestu

Instalirajte profesionalcatractor biblioteku putem npm-a. To se može učiniti izvršavanjem donje linije u naredbenom retku

npm install -g protractor

Kod za naš test bit će prikazan u nastavku.

Kod će biti u zasebnoj datoteci pod nazivom CompleteTest.js, koja će biti smještena u testnu mapu. Donji kod radi samo sljedeće ključne stvari

1. Funkciju preglednika osigurava protractor biblioteku i pretpostavlja da naša AngularJS aplikacija (s gore prikazanim kodom) radi na našoj web stranici URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); -Ovaj redak koda zapravo dohvaća direktivu ng-repeat koja je popunjena kodom 'ptutor in tutorial'. Element i by.repeater su posebne ključne riječi koje pruža protractor biblioteka koja nam omogućuje dobivanje detalja o direktivi ng-repeat.
3. očekuj(list.count()).toEqual(3); – Na kraju, koristimo funkciju expect da bismo vidjeli da doista dobivamo 3 stavke koje se popunjavaju u našoj tablici kao rezultat direktive 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);
  });
});

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

Karma protiv Jasmine protiv Protractor: Ključne razlike

Tri alata korištena na ovoj stranici često se brkaju jer se pojavljuju u istoj naredbenoj liniji. Svaki zauzima drugačiji sloj testnog stoga, kao što je jasno iz donje tablice.

Ukratko, Jasmine piše test, Karma ga izvršava, a ProtracTor proširuje istu Jasmine sintaksu na potpuno renderiranu stranicu.

Najbolje prakse za AngularJS jedinično testiranje

Mali skup navika održava AngularJS paket brzim i pouzdanim kako aplikacija raste.

1. Testirajte jednu jedinicu istovremeno. U beforeEach učitajte samo modul koji se testira i ismijavajte svakog suradnika tako da neuspjeh ukazuje na jednu datoteku.
2. Nikad ne zovi pravi backend. Koristite uslugu $httpBackend iz angular-mocksa za vraćanje unaprijed pripremljenih odgovora. Testovi se zatim izvode izvan mreže i daju identične rezultate na svakom računalu.
3. Održavajte bihevioralne nazive specifikacija. Naziv poput „vraća 5 kada se kontroler inicijalizira“ bolje se čita u izvješću nego „test1“.
4. Uvijek isperite ciklus probave. Pozovite $rootScope.$digest() nakon promjene podataka opsega, inače se povezivanja i promatrači nikada neće ažurirati, a tvrdnje će propasti iz pogrešnog razloga.
5. Izmjerite pokrivenost, ali pažljivo je procijenite. Dodajte karma-pokrivenost kako biste vidjeli netestirane grane. Visoka pokrivenost sa slabim tvrdnjama i dalje skriva nedostatke.
6. Pokrenite paket u kontinuiranoj integraciji. Koristite Chromeov launcher bez glave kako bi se iste specifikacije izvršavale na svakom commitu, a ne samo na računalu programera.

Primjena ovih pravila pretvara gornje primjere iz izoliranih demonstracija u sigurnosnu mrežu regresije za naslijeđenu AngularJS kodnu bazu. Za širu sliku pogledajte AngularJS tutorial Serija.

Pitanja i odgovori