Testing angular js

TESTING
ANGULAR JS
Juan José Galán López

Acerca de
Desarrollador Web Full Stack
Symfony, Drupal, Magento
LESS, SASS, AngularJS, JavaScript

Indice
Herramientas testing
Instalación/Configuración Karma
Test unitarios - Jasmine
ngMock
Test unitarios AngularJS
Arquitectura aplicación Demo
Testing sobre Servicios, Controlador, Directiva

Karma - Test runner
Protractor - Testing framework
Nos permite correr un comando que determina si un conjunto de test pasan o no.
Permite automatizar los test funcionales a través de la interacción con el navegador.

Jasmine - Testing framework
Alternativas a Jasmine
Integración por defecto con Karma
Herramientas como: spies, fakes…
Sintaxis limpia, test con formato que describen la conducta que estamos testeando
Selenium, Mocha

Instalación Karma
* npm init
npm install karma -g
karma init
Necesitaremos instalar Jasmine y el lanzador de Chrome
npm install jasmine-core -g
npm install karma-jasmine -g
npm install karma-chrome-launcher -g
karma start
Comprobamos la instalación: karma --version

Configuración Karma
karma.conf.js

describe
it
expect
matchers
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});
https://www.cheatography.com/citguy/cheat-sheets/jasmine-js-testing/

beforeEach
Es llamado antes de ejecutar el test del bloque
describe en el que se encuentra.
afterEach
Es llamado después de ejecutar el test del bloque
describe en el que se encuentra.
describe("A spec (with setup and tear-down)", function() {
var foo;
beforeEach(function() {
foo = 0;
foo += 1;
});
afterEach(function() {
foo = 0;
});
it("is just a function, so it can contain any code", function() {
expect(foo).toEqual(1);
});
it("can have more than one expectation", function() {
expect(foo).toEqual(1);
expect(true).toEqual(true);
});
});

Spies
describe("A spy", function() {
var foo, bar = null;
foo = {
setBar: function(value) {
bar = value;
}
};
spyOn(foo, 'setBar');
foo.setBar(456, 'another param');
});
it("tracks that the spy was called", function() {
expect(foo.setBar).toHaveBeenCalled();
});
it("tracks that the spy was called x times", function() {
expect(foo.setBar).toHaveBeenCalledTimes(2);
});
it("tracks all the arguments of its calls", function() {
expect(foo.setBar).toHaveBeenCalledWith(456, 'another param');
});
});
Algunos matchers para los Spies:
toHaveBeenCalled
toHaveBeenCalledTimes
toHaveBeenCalledWith

Spies describe("A spy, when configured with an alternate implementation", function() {
var foo, fetchedBar;
spyOn(foo, "getBar").and.callFake(function(arguments, can, be, received) {
return 1001;
});
});
fetchedBar = foo.getBar();
it("tracks that the spy was called", function() {
expect(foo.getBar).toHaveBeenCalled();
});
it("when called returns the requested value", function() {
expect(fetchedBar).toEqual(1001);
});
});
Encadenando and.callFake.

Existen otros muchos elementos en Jasmine que podéis consultar en:
https://jasmine.github.io/pages/docs_home.html

Test unitarios - ngMock
Elementos de test necesarios para testear apps Angular JS
$httpBackend
Inject
$controller
$compile
...

Test unitarios AngularJS
Elementos bajo test:
● Servicios
● Controllers
● Directiva
● Eventos

Aplicación demo - Arquitectura
bt-setup-table
Proxies
Services
Controllers
Directives
Transformers
Controllers
Templates
App

Estructura directorio para los tests

bt-setup-controller
bt-setup
SELECT_SHIP

Test Unitario Angular
1. Describimos la suite de test
describe('Setup Table Service test', function () {
1. Cargamos el módulo que contiene el código a ejecutar
beforeEach(module('battleShip'));
1. Definimos cada spec o test
Pasos comunes:

$httpBackend
Test Unitario Angular - SetupTableProxy
SetupTableProxy$http
[[0, 0], [0, 0]]

fakeSetupTableProxy
Test Unitario Angular - SetupTableGetService
SetupTableProxy SetupTableGetService
[[0, 0], [0, 0]]

Test Unitario Angular - SetupTableTransformer
SetupTableTransformer[[0, 0], [0, 0]] [[ { value: 0, class: 'water'}, { value: 0, class: 'water'}],
[ { value: 0, class: 'water'}, { value: 0, class: 'water'}]]

fakeSetupTableTransformerfakeSetupTableGetService
Test Unitario Angular - SetupTableService
SetupTableGetService
[[0, 0], [0, 0]]
[[ { value: 0, class: 'water'}, { value: 0, class: 'water'}],
SetupTableGetService SetupTableTransformer
[[0, 0], [0, 0]]

Test Unitario Angular - SetupTableCheckService
SetupTableCheckService
[[ { value: 0, class: 'water'}, { value: 0, class: 'water'}],
x y length isVertical
true/false

Test Unitario Angular - Controllers
SetupControllerDirective SetupController
SELECT_SHIP
checkSetupShip
resetCellClass

Test Unitario Angular - Directive
Template
https://github.com/karma-runner/karma-ng-html2js-preprocessor
npm install karma-ng-html2js-preprocessor --save-dev module.exports = function(config) {
config.set({
preprocessors: {
'**/*.html': ['ng-html2js']
},
...
ngHtml2JsPreprocessor: {
moduleName: 'templates'
},
….
files: [
...
'**/*.html'
],

Test Unitario Angular - Directive
setupTableDirective
● Comprobación de creación de tablero
● Conducta tras pasar por las celdas mouseenter/mouseleave

Referencias
https://jasmine.github.io/2.5/introduction
AngularJS By Example - Packt Publishing
https://github.com/atomicposts/battleship

Testing angular js

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Testing angular js (20)

Recently uploaded (20)

Testing angular js