Unit Testing Javascript

What we need?

• Browser
• Test Framework
• Test Runner
• Assertions library
• Un modo per implementare i test doubles

Test runner: karma

https://karma-runner.github.io

Karma

Karma is a test runner, that makes automated tests simpler and faster

• creato dagli ideatori di AngularJS
• configuration file
• supporta diverse suite di test
• supporta diversi browsers (reali o headless)

Karma

Architettura Client-Server con un canale di comunicazione bidirezionale tra client e server

Il server gira in ambiente nodejs sulla macchina locale, e si occupa di:

• watching sui file
• comunicare con i client
• generare reportistica sui risultati del test
• servire staticamente la parte di codice client side

Karma

Architettura Client-Server con un canale di comunicazione bidirezionale tra client e server

Il client è il luogo in cui tutti test vengono eseguiti:

• tipicamente un browser
• gira sulla stessa macchina del server
• comunica col server via socket.io
• esegue i test in un iframe

Karma

npm install karma --save-dev

karma init

karma

module.exports = function(config) {
  config.set({
    basePath: '../..',
    frameworks: ['jasmine'],
    autoWatch : false,
    browsers : [ 'PhantomJS' ]
  });
};

Per lanciare i test:

karma start

Jasmine

• describe: identifica la suite
• it: identifica la specifica
• expect: identifica l'assertion

Hook globali:

• beforeEach
• afterEach
• beforeAll
• afterAll

Esercitazione 01

Soluzione (1/2)

it('#addProduct should add a product to an empty shopping list', function() {
  var product = {
    id: 1,
    title: "This is a title",
    price: 5.99,
    quantity: 0
  };

  shoppingCart.addProduct(product);

  var data = JSON.parse(window.localStorage.getItem("shoppingcart"));
  expect(data.summary).toBeDefined();
  expect(data.summary.total).toBe(5.99);

  expect(data.shoppingList['1']).toBeDefined();
  expect(data.shoppingList['1'].title).toBe("This is a title");
  expect(data.shoppingList['1'].price).toBe(5.99);
  expect(data.shoppingList['1'].quantity).toBe(1);
});

Soluzione (2/2)

it('#addProduct should add a product to an existing shopping list and increment the summary', function() {
  var product1 = {
    id: 1,
    title: "This is a title 1",
    price: 5,
    quantity: 0
  };
  var product2 = {
    id: 2,
    title: "This is a title 2",
    price: 10,
    quantity: 0
  };
  shoppingCart.addProduct(product1);
  shoppingCart.addProduct(product2);

  var data = JSON.parse(window.localStorage.getItem("shoppingcart"));
  expect(data.summary).toBeDefined();
  expect(data.summary.total).toBe(15.0);

  expect(data.shoppingList['1']).toBeDefined();
  expect(data.shoppingList['1'].title).toBe("This is a title 1");
  expect(data.shoppingList['2']).toBeDefined();
  expect(data.shoppingList['2'].title).toBe("This is a title 2");
});

Esercitazione 02

Soluzione (1/2)

• ShoppingCart.removeProduct()

ShoppingCart.prototype.removeProduct = function(product) {
  this.shoppingList[product.id].quantity--;
  if (this.shoppingList[product.id].quantity <= 0) {
    delete this.shoppingList[product.id];
  }
  this.summary.total -= product.price;

  // save to localStorage
  window.localStorage.setItem("shoppingcart", JSON.stringify({
    summary: this.summary,
    shoppingList: this.shoppingList
  }));
};

Soluzione (2/2)

• Catalog.getProductsList()

var Catalog = function() {
  this.products = [
    { id: 1, title: "AngularJS in 21 giorni", price: 9.99 },
    { id: 2, title: "AngularJS: ora o mai piu'", price: 19.99 },
    { id: 3, title: "JavaScript - The Good Parts", price: 24.99 }
  ];
}

Catalog.prototype.getProductsList = function() {
  return this.products;
}

Bower (1/2)

Client side package manager

• gestisce le dipendenze dell'applicazione (frameworks, librerie, assets..)
• tiene traccia dei package necessari attraverso il file manifest bower.json

Installazione bower:

npm install -g bower

http://bower.io

Bower (2/3)

# Creazione manifest
bower init

# Installazione package
bower install PACKAGE_NAME --save

# Ricerca package
bower search PATTERN

Bower (3/3)

Utilizzo degli asset gestiti:

• inclusione mediante loader (es. RequireJS)
• inclusione diretta

<script src="bower_components/jquery/dist/jquery.min.js"></script>

Test AngularJS

• AngularJS ha tra gli obiettivi principali la testabilità
• Fornisce meccanismi solidi per la separazione del codice
  • Dependency injection
  • Separazione dei modelli dal DOM
  • Componenti disaccoppiate (Services, Controllers, Filters, Directives...)

Angular Test helpers

module and inject

• module: carica e configura il modulo da testare
• inject: utilizzato per risolvere le reference all'interno del modulo caricato

var ShopCartService;
module('service.cart');
inject(function(_ShopCartService_){
  ShopCartService = _ShopCartService_;
});

Servizi principali:

• $httpBackend: fake http backend
• $controller: utilizzato per istanziare un controller

$httpBackend

beforeEach(inject(function(_$httpBackend_){
  $httpBackend = _$httpBackend_;
  newsPostsHandler = $httpBackend.when('GET', 'http://jsonplaceholder.typicode.com/posts');
}));

...

newsPostsHandler.respond(200, [{
  id: 1,
  title: "This is a title",
  body: "This is a body"
}]);

Esercitazione 03 (Angularjs Testing)

Soluzione (1/2)

it('sets the proper posts variable into the scope', function() {
  newsPostsHandler.respond(200, [{
    id: 1,
    title: "This is a title",
    body: "This is a body"
  }]);
  var $scope = {};
  var controller = $controller('NewsPostController', { $scope: $scope });

  expect($scope.loading).toBeTruthy();
  $httpBackend.flush();
  expect($scope.posts).toBeDefined();
  expect($scope.loading).toBeFalsy();
  expect($scope.posts[0].title).toBe("This is a title");
});

Soluzione (2/2)

it('sets the error post on error response', function() {
  newsPostsHandler.respond(400, null, null, "Some errors occourred");
  var $scope = {};
  var controller = $controller('NewsPostController', { $scope: $scope });

  expect($scope.loading).toBeTruthy();
  $httpBackend.flush();
  expect($scope.posts).toBeDefined();
  expect($scope.loading).toBeFalsy();
  expect($scope.posts[0].title).toBe("ERRORE");
  expect($scope.posts[0].body).toBe("Some errors occourred");
});

Esercitazione 04 (Angularjs Testing)

Soluzione

app.controller("NewsPhotoController", function($scope, $http) {
  $scope.loading = true;

  $http.get("http://jsonplaceholder.typicode.com/photos")
  .then(function(res) {
    $scope.loading = false;

    if (res.status === 200) {
      $scope.images = res.data;
    }
  });
});

E2E testing: Protractor

• Framework per il testing E2E di applicazioni AngularJS
• Wrap di Selenium-Webdriver (estensioni angular-specific)
• Esegue suite di test sull'applicazione all'interno del browser
• Interagisce con l'applicazione simulando le azioni di un utente reale

Selenium

Selenium: una suite di strumenti per il test e2e.

Il principio alla base si chiama "proxy injection"

Selenium-Webdriver

• WebDriver è un protocollo HTTP based per la comunicazione con un web browser.
• Selenium2 (anche detto Selenium2/Webdriver) implementa questo protocollo.
• Le librerie client, quando il driver nativo è disponibile usano quello, quando non è disponibile si utilizza il metodo "proxy injection"

Setup

#installazione protactor come modulo node globale
npm install -g protractor

#installazione di un'istanza completa di Selenium-Webdriver
webdriver-manager update

#avvio di Selenium
webdriver-manager start

È possibile ottenere informazioni sullo stato del server Selenium caricando l'URL http://localhost:4444/wd/hub

Esecuzione di una test suite

Protractor necessita di almeno due file per essere eseguito:

• spec file (suite di test javascript)
• file di configurazione

Lo spec file può essere scritto mediante il framework Jasmine, utilizzando le API specifiche di Protractor

Spec file

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    //Caricamento applicazione
    browser.get('<Application URL>');

    //Selezione elemento della UI e invio testo di prova
    element(by.model('list.todoText')).sendKeys('example text');

    //Jasmine expectation
    expect(...).toEqual(...);
  });
});

Configuration file

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['todo-spec.js']
};

Avvio test E2E:

protractor conf.js

Reference: https://github.com/.../referenceConf.js

Anatomia test E2E (1/2)

Le funzionalità base di una suite di test E2E per applicazioni WEB sono:

• la selezione di nodi del DOM in base a determinati paramentri
• l'interazione con gli elementi selezionati
• il recupero delle informazioni relative allo stato dell'applicazione

Anatomia test E2E (2/2)

Le suite di test E2E sono caratterizzate, come per i test unit dalle seguenti fasi:

• Setup: caricamento applicazione e preparazione dello stato iniziale
• Action: simulazione dell'interazione con l'applicazione
• Assert: verifica dei valori attesi rispetto alle azioni compiute
• Teardown: reset dell'applicazione allo stato iniziale

Oggetto browser

Protractor istanzia la variabile globale browser per esporre le funzionalità browser-level:

• get(): naviga un URL e carica gli eventuali mock modules prima di Angular
• refresh(): effettua un ricaricamento completo della pagina corrente
• restart(): riavvia l'istanza corrente del browser
• setLocation(): naviga verso un'altra pagina (in page navigation)
• ...

Protractor locators (1/2)

Protractor locators (2/2)

Lo scopo di un locator è indicare il modo in cui un elemento del DOM deve essere recuperato:

// find an element using a css selector
by.css('.myclass')

// find an element with the given id
by.id('myid')

// find an element with a certain ng-model
by.model('name')

// find an element bound to the given variable
by.binding('bindingname')

Chained locators

È possibile incatenare le funzioni element ed element.all:

// find sub.element
element(by.css('some-css')).element(by.tagName('tag-within-css'));

// find a list of sub.elements
element(by.css('some-css')).all(by.tagName('tag-within-css'));

// get/first/last
element.all(by.css('css')).first().element(by.tagName('tag'));
element.all(by.css('css')).get(index).element(by.tagName('tag'));
element.all(by.css('css')).last().element(by.tagName('tag'));

Actions (1/2)

L'oggetto ElementFinder contatta il browser attraverso un comando Selenium nel momento in cui viene invocata una action:

// Click on the element
el.click();

// Send keys to the element (usually an input)
el.sendKeys('my text');

// Clear the text in an element (usually an input)
el.clear();

// Get the value of an attribute
el.getAttribute('value');

Sono supportate tutte le action esposte da WebDriverJS

Actions (2/2)

Tutte le actions sono metodi asincroni e ritornano un oggetto promise:

var el = element(locator);
el.getText().then(function(text) {
  console.log(text);
});

Jasmine integration

expect(el.getText()).toBe('Hello, World!')

el.getText().then(function(text) {
  expect(text).toBe('Hello, World!');
});

Esercitazione 05 (E2E tests)

Completare il test e2e mancante

Soluzione

it("should add the same product to the cart for n times", function() {
  var n = 4;
  for (var i = 0; i < n; i++) {
    page.addProductToCart(0);
  }

  expect(page.cartItems.count()).toEqual(1);
  expect(page.getProduct(0).title).toBe(page.getCartItem(0).title);
  expect(page.getCartItem(0).quantity).toBe("x" + n);
});