Testiranje jedinice AngularJS: Vodič za Karma Jasmine

Jedna od najbriljantnijih značajki Angular.JS je Ispitivanje aspekt. Kad su programeri u Googleu razvili AngularJS, imali su na umu testiranje i pobrinuli se da se cijeli okvir AngularJS može testirati.

U AngularJS-u testiranje se obično provodi pomoću Karme (okvir). Angular JS testiranje može se provesti 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 izvršiti end-end-end testiranje AngularJS-a, što je testiranje iz korisničke perspektive.

Uvod i instalacija okvira Karma

Karma je a alat za automatizaciju testiranja kreirao Angular JS tim u Googleu. Prvi korak za korištenje Karme je instaliranje 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

pri čemu,

npm je uslužni program naredbenog retka za upravitelj paketa čvorova koji se koristi za instaliranje prilagođenih modula na bilo kojem računalu.
Parametar instalacija upućuje pomoćni program naredbenog retka npm da je potrebna instalacija.
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 karma-cli

pri čemu,

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

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: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Gornje konfiguracijske datoteke govore karma runtime motoru sljedeće stvari

'Naziv vaše aplikacije' – Ovo će biti zamijenjeno nazivom vaše aplikacije.
'Ime vaše aplikacije'/AngularJS/AngularJS.js' – Ovo govori karmi da vaša aplikacija ovisi o osnovnim modulima u AngularJS
'Naziv vaše aplikacije'/AngularJS-mocks/AngularJS-mocks.js' – Ovo govori karmi da koristi funkciju testiranja jedinice za AngularJS iz datoteke Angular.JS-mocks.js.
Sve glavne aplikacije ili datoteke poslovne logike prisutne su u mapi lib vaše aplikacije.
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

Funkcija describe koristi se za opis testa. U našem slučaju, našem testu dajemo opis 'Uzorak testa'.
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.
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.

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

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

Napravite ID varijablu i dodijelite joj vrijednost 5.
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.JS-mocks putem npm-a. To se može učiniti izvršavanjem donjeg retka u naredbenom retku

npm install Angular JS-mocks

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/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

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

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

Donji kod radi samo sljedeće stvari

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

var sampleApp = AngularJS.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

beforeEach funkcija – Ova se funkcija koristi za učitavanje našeg AngularJS.JS modula pod nazivom 'sampleApp' prije testnog izvođenja. Imajte na umu da je ovo naziv modula u datoteci index.js.
Objekt $controller kreiran je kao mockup objekt za kontroler ”Angular JSController” koji je definiran u našoj datoteci index.js. U bilo kojoj vrsti jediničnog 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.
beforeEach(inject(function(_$controller_) – Ovo se koristi za ubacivanje lažnog objekta u našem testu tako da se ponaša kao stvarni kontroler.
var $scope = {}; Ovo je lažni objekt koji se stvara za objekt $scope.
var controller = $controller('AngularJSController', { $scope: $scope }); – Ovdje provjeravamo postojanje kontrolera pod nazivom 'Angular.JSController'. Ovdje također dodjeljujemo sve varijable iz našeg $scope objekta u našem kontroleru u datoteci Index.js objektu $scope u našoj testnoj datoteci
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. Ovo uključuje URL-ove predložaka 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 radi sljedeće stvari

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

var sampleApp = AngularJS.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

beforeEach funkcija – Ova se funkcija koristi za učitavanje našeg Angular JS modula pod nazivom 'sampleApp' prije testnog izvođenja.
Usluga $compile koristi se za prevođenje direktive. Ova je usluga obavezna i treba je deklarirati kako bi je Angular.JS mogao koristiti za kompajliranje naše prilagođene direktive.
$rootscope je primarni opseg svake AngularJS.JS aplikacije. Vidjeli smo $scope objekt kontrolera u ranijim poglavljima. Pa, objekt $scope je podređeni objekt $rootscope objekta. Razlog zbog kojeg je ovo ovdje navedeno je taj što mijenjamo stvarnu HTML oznaku u DOM-u putem naše prilagođene direktive. Stoga moramo koristiti uslugu $rootscope koja zapravo osluškuje ili zna kada se dogodi neka promjena unutar HTML dokumenta.
var element = $compile(“ ”) – Ovo se koristi za provjeru da li se naša direktiva ubacuje kako treba. Naziv naše prilagođene direktive je Guru99, a znamo iz našeg poglavlja o prilagođenim direktivama da kada se direktiva ubaci u naš HTML, bit će umetnuta kao ' '. Stoga se ova izjava koristi za provjeru.
expect(element.html()).toContain(“Ovo je AngularJS testiranje”) – Ovo se koristi za naredbuexpekt funkciji da treba pronaći element (u našem slučaju div oznaku) koji sadrži innerHTML 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("<ng-Guru99></ng-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.

End to End Testiranje AngularJS JS aplikacija

Okvir za testiranje karme zajedno s okvirom koji se zove 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 AngularJS aplikaciju koja stvara podatkovnu tablicu pomoću direktive ng-repeat.

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

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 knjižnicu kutomjera putem npm-a. To se može učiniti izvršavanjem donjeg retka u naredbenom retku

"npm install 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

Funkciju preglednika pruža knjižnica kutomjera i pretpostavlja da se naša AngularJS aplikacija (s gore prikazanim kodom) izvodi na URL-u naše stranice – http://localhost:8080/Guru99/
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 posebne su ključne riječi koje pruža knjižnica kutomjera koja nam omogućuje dobivanje detalja direktive ng-repeat.
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.

Rezime

Testiranje u AngularJS-u postiže se korištenjem okvira karma, okvira koji je razvio sam Google.
Karma okvir se instalira pomoću upravitelja paketa čvorova. Ključni moduli koje je potrebno instalirati za osnovno testiranje su karma, karma-chrome-launcher, karma-jasmine i karma-cli.
Testovi su napisani u zasebnim js datotekama, koje se obično čuvaju u testnoj mapi vaše aplikacije. Lokacija ovih testnih datoteka mora biti navedena u posebnoj konfiguracijskoj datoteci koja se zove karma.conf.js. Karma koristi ovu konfiguracijsku datoteku prilikom izvođenja svih testova.
Karma se također može koristiti za testiranje kontrolera i prilagođenih direktiva.
Za end to end web testiranje, još jedan okvir koji se zove kutomjer treba instalirati putem Nodea, upravitelja paketa. Ovaj okvir pruža posebne metode koje se mogu koristiti za testiranje svih elemenata na HTML stranici.

Uvod i instalacija okvira Karma

Instalacija Karme

Konfiguracija okvira Karma

POVEZANI ČLANCI

Testiranje AngularJS kontrolera

Testiranje AngularJS direktiva

End to End Testiranje AngularJS JS aplikacija

Rezime

Prijavite se za bilten