This document discusses testing Angular JS applications. It introduces tools like Karma and Jasmine for running tests and making assertions. It covers how to set up Karma and configure it to run tests. The document demonstrates different types of Jasmine tests like describing suites, specs, spies, beforeEach and afterEach hooks. It also discusses testing Angular components like services, controllers, directives by injecting dependencies and making assertions. Finally, it provides an example application architecture and shows how to test units like services, controllers and directives.

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

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

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

4. Herramientas testing
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.

5. Herramientas testing
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

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

7. Configuración Karma
karma.conf.js

8. Test unitarios - Jasmine
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/

9. Test unitarios - Jasmine
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);
});
});

10. Test unitarios - Jasmine
Spies
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

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

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

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

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

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

16. Aplicación demo - Arquitectura
Estructura directorio para los tests

17. Aplicación demo - Arquitectura
bt-setup-controller
bt-setup
SELECT_SHIP

18. 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:

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

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

21. 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'}]]

22. 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]]

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

24. Test Unitario Angular - Controllers
SetupControllerDirective SetupController
SELECT_SHIP
checkSetupShip
resetCellClass

25. 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'
],

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

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