AngularJS Unit Testing with Karma & Jasmine

One of the most brilliant features of AngularJS is the Ispitivanje aspekt. Kada programeri na Google Razvili su AngularJS, imajući na umu testiranje i osigurali su da je cijeli AngularJS framework testiran.

In AngularJS, testing is normally carried out using Karma (framework). AngularJS testing can be carried out without Karma, but the Karma framework has such a brilliant functionality for testing AngularJS code, that it makes sense to use this framework.

• U AngularJS-u možemo izvesti Ispitivanje jedinice odvojeno za kontrolere i direktive.
• Također možemo izvesti end to end testing of AngularJS, which is testing from a user perspective.

Uvod i instalacija okvira Karma

Karma je a alat za automatizaciju testiranja created by the AngularJS team at 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 is the command line utility for the node package manager used for installing custom modules on any machine. It ships with 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 is used to install the command line interface for karma which will be used to write the karma commands in the command line interface. The -g flag installs it globally so that the karma command is available from any folder.

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 – This tells karma that your application depends on the core modules in AngularJS.
2. angular-mocks.js – This tells karma to use the Unit Testing functionality for AngularJS from the angular-mocks.js file.
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.

What is Jasmine in AngularJS Unit Testing?

Karma decides where tests run, while Jasmine decides how they are written. Jasmine is a behaviour driven specification framework that supplies the vocabulary used in every example on this page, which is why the karma-jasmine adapter is installed alongside the runner.

Jasmine contributes four building blocks:

• describe(): Groups related specifications into a suite and accepts a readable description of the unit under test.
• it(): Declares a single specification. The name should state the behaviour being verified rather than the method being called.
• expect() with matchers: Compares an actual value against an expected one. Common matchers include toBe, toEqual, toContain, and toBeDefined.
• beforeEach() and afterEach(): Run setup and teardown before and after every specification, which keeps each test independent.

Jasmine also provides spies. A spy replaces a real function with a recorded stand in, so a controller can be tested without calling a live HTTP endpoint. Because Jasmine needs no DOM and no assertion library of its own, the combination of Karma and Jasmine remains the lightest way to run AngularJS JavaScript unit tests.

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

Install the angular-mocks library via npm. This can be done by executing the below line in the command prompt

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.
• The angular.js and angular-mocks.js file are required to run AngularJS unit tests
• Datoteka index.js sadržavat će naš kod za kontroler
• Testna mapa sadržavat će sve naše AngularJS testove

Below is our AngularJS code which will be stored as a file Index.js in the test folder of our application.

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. beforeEach function – This function is used to load our AngularJS module called ‘sampleApp’ before the test run. Note that this is the name of the module in an index.js file.
2. The $controller object is created as a mockup object for the controller “AngularJSController” which is defined in our index.js file. In any sort of Unit Testing, a mock object represents a dummy object which will actually be used for the testing. This mock object will actually simulate the behavior of our controller.
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 }); – Here we are checking for the existence of a controller named ‘AngularJSController’. In here we are also assigning all variables from our $scope object in our controller in the Index.js file to the $scope object in our test file
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. Create a custom directive with the name – 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. beforeEach function – This function is used to load our AngularJS module called ‘sampleApp’ before the test run.
2. The $compile service is used to compile the directive. This service is mandatory and needs to be declared so that AngularJS can use it to compile our custom directive.
3. The $rootScope is the primary scope of any AngularJS application. We have seen the $scope object of the controller in earlier chapters. Well, the $scope object is the child object of the $rootScope object. The reason this is declared here is because we are making a change to an actual HTML tag in the DOM via our custom directive. Hence, we need to use the $rootScope service which actually listens or knows when any change happens from within an HTML document.
4. var element = $compile(“<guru99></guru99>”)($rootScope) – This is used to check whether our directive gets injected as it should. The directive is registered with the camel case name guru99, so AngularJS matches the lowercase element <guru99> in the markup. Hence this statement is used to make that check.
5. expect(element.html()).toContain(“This is AngularJS Testing”) – This is used to instruct the expect function that it should find the element(in our case the h1 tag) to contain the innerHTML text of “This is AngularJS Testing”.

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.

End to End Testing AngularJS applications

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’)); -This line of code is actually fetching the ng-repeat directive which is populated by the code ‘ptutor in tutorial’. The element and by.repeater are special keywords provided by the 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 vs Jasmine vs Protractor: Key Differences

The three tools used across this page are often confused because they appear in the same command line. Each one occupies a different layer of the testing stack, as the table below makes clear.

In short, Jasmine writes the test, Karma executes it, and Protractor extends the same Jasmine syntax to a fully rendered page.

Best Practices for AngularJS Unit Testing

A small set of habits keeps an AngularJS suite fast and trustworthy as the application grows.

1. Test one unit at a time. Load only the module under test inside beforeEach, and mock every collaborator so a failure points at a single file.
2. Never call a real backend. Use the $httpBackend service from angular-mocks to return canned responses. Tests then run offline and produce identical results on every machine.
3. Keep specification names behavioural. A name such as “returns 5 when the controller initialises” reads better in a report than “test1”.
4. Always flush the digest cycle. Call $rootScope.$digest() after changing scope data, otherwise bindings and watchers never update and assertions fail for the wrong reason.
5. Measure coverage, but judge it carefully. Add karma-coverage to see untested branches. High coverage with weak assertions still hides defects.
6. Run the suite in continuous integration. Use a headless Chrome launcher so the same specifications execute on every commit rather than only on a developer machine.

Applying these rules turns the examples above from isolated demonstrations into a regression safety net for a legacy AngularJS codebase. For the wider picture, see the AngularJS tutorial Serija.

Pitanja i odgovori