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
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