TESTING ANGULAR JS

Juan José Galán López

Acerca de

Desarrollador Web Full Stack

Symfony, Drupal, Magento

LESS, SASS, AngularJS, JavaScript

IndiceHerramientas testing

Instalación/Configuración Karma

Test unitarios - Jasmine

ngMock

Test unitarios AngularJS

Arquitectura aplicación Demo

Testing sobre Servicios, Controlador, Directiva

Herramientas testingKarma - 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.

Herramientas testingJasmine - 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 -gkarma initNecesitaremos instalar Jasmine y el lanzador de Chromenpm install jasmine-core -gnpm install karma-jasmine -gnpm install karma-chrome-launcher -gkarma start

Comprobamos la instalación: karma --version

Configuración Karma

karma.conf.js

Test unitarios - Jasminedescribe

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/

Test unitarios - JasminebeforeEachEs llamado antes de ejecutar el test del bloque describe en el que se encuentra.

afterEachEs 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); });});

Test unitarios - JasmineSpies

describe("A spy", function() { var foo, bar = null; beforeEach(function() { 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

Test unitarios - Jasmine

Spies describe("A spy, when configured with an alternate implementation", function() { var foo, fetchedBar;

beforeEach(function() {

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.

Test unitarios - JasmineExisten 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

Aplicación demo - ArquitecturaEstructura directorio para los tests

Aplicación demo - Arquitectura

bt-setup-controller

bt-setup

SELECT_SHIP

Test Unitario Angular

1. Describimos la suite de testdescribe('Setup Table Service test', function () {

2. Cargamos el módulo que contiene el código a ejecutarbeforeEach(module('battleShip'));

3. 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'}],[ { 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'}],[ { value: 0, class: 'water'}, { value: 0, class: 'water'}]] x y length isVertical

true/false

Test Unitario Angular - Controllers

SetupControllerDirective SetupControllerSELECT_SHIP

checkSetupShipresetCellClass

Test Unitario Angular - DirectiveTemplate

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