12. Automatización y testing

A lo largo de este capítulo iremos echando un vistazo a las herramientas de las que disponemos para poder seguir un workflow de desarrollo en AngularJS, que integre automatización y testing de nuestras aplicaciones.

Partimos de la base de que tenemos instalado en nuestro equipo tanto node.js como npm.

12.1. Instalación de Grunt CLI

Grunt Command Line Interface (Grunt CLI) es un módulo de node.js que nos permite ejecutar tareas de Grunt en nuestro proyecto, vía línea de comandos. Así, podremos ejecutar cada tarea relacionada con el proceso de desarrollo de nuestra aplicación (verificación de sintaxis, ejecución de los tests unitarios, minificación, …​). De esta manera, grunt se convierte en el único asistente que necesitamos para cubrir las necesidades de nuestro proyecto.

Podemos instalar el Grunt CLI a través de npm:

npm install -g grunt-cli

La opción -g hace que grunt-cli se instale de manera global y podremos ejecutarla a través del comando grunt. Grunt necesita una serie de componentes adicionales, que se instalarán de manera local a nuestro proyecto.

12.2. Instalación de Bower

Otro elemento global que necesitaremos es Bower. Bower es a las librerías JavaScript de front-end lo que NPM a las librerías de backend de node.js. Este gestor de paquetes nos puede descargar librerías como AngularJS, ui-router, jQuery, etc. De manera que ya no es necesario irse al sitio web del framework/librería para descargarnos lo que necesitemos.

Bower se instala de manera similar a como hemos hecho para Grunt CLI:

npm install -g bower

12.3. Estructura inicial de nuestro proyecto

12.3.1. Gestión de dependencias

Vamos a definir las dependencias de nuestro proyecto. Necesitaremos una serie de librerías de backend, que gestionará npm, y de frontend, que gestionará Bower. Ambas herramientas necesitan un fichero de configuración JSON que define estas dependencias.

El fichero de configuración de node.js se llama package.json, y podemos inicializarlo lanzando, desde consola, el comando npm init:

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (angular-automation-testing)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Volumes/MSL64/tmp/angular-automation-testing/package.json:

{
  "name": "angular-automation-testing",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

El fichero de configuración de bower se llama bower.json, y se inicializa con el comando bower init:

$ bower init
? name: angular-automation-testing
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?:
? keywords:
? authors: Alejandro Such Berenguer <alejandro.such@gmail.com>
? license: MIT
? homepage:
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No

{
  name: 'angular-automation-testing',
  version: '0.0.0',
  authors: [
    'Alejandro Such Berenguer <alejandro.such@gmail.com>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good?: Yes

Aunque vamos a querer introducir en nuestro sistema de control de versiones estos ficheros de configuración, vamos a querer ignorar las dependencias descargadas por bower y npm:

$ echo "node_modules/" >> .gitignore
$ echo "bower_components/" >> .gitignore

Ahora las dependencias. En la parte de front-end vamos a instalar las dependencias vistas en las sesiones de este módulo:

  • AngularJS

  • ui-router

$ bower install angular --save
$ bower install angular-ui-router --save

Añadimos la opción -g, para que las dependencias aparezcan en el fichero de configuración:

{
  "name": "angular-automation-testing",
  "version": "0.0.0",
  "authors": [
    "Alejandro Such Berenguer <alejandro.such@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.3.2",
    "angular-ui-router": "~0.2.11"
  }
}

En cuanto a las dependencias de grunt, se instalan de la siguiente manera:

$ npm install angular-mocks --save-dev
$ npm install grunt --save-dev
$ npm install grunt-exec --save-dev
$ npm install grunt-contrib-clean --save-dev
$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-watch --save-dev
$ npm install grunt-contrib-concat --save-dev
$ npm install grunt-contrib-copy --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install karma --save-dev
$ npm install grunt-karma --save-dev
$ npm install karma-jasmine --save-dev
$ npm install load-grunt-tasks --save-dev
$ npm install karma-phantomjs-launcher --save-dev
$ npm install jquery --save-dev

También podemos ver que esas dependencias han aparecido en el fichero package.json:

{
  "name": "angular-automation-testing",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "angular-mocks": "^1.3.2",
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-exec": "^0.4.6",
    "grunt-karma": "^0.9.0",
    "jquery": "^2.1.3",
    "karma": "^0.12.24",
    "karma-jasmine": "^0.2.3",
    "karma-phantomjs-launcher": "^0.1.4",
    "load-grunt-tasks": "^1.0.0"
  }
}

Utilizaremos la opción --save-dev para indicar que todas estas dependendencias son depenedencias de desarrollo, y no las utilizaremos nunca en un entorno de producción, ni son necesarias para que la aplicación se ejecute.

Muy importante la librería angular-mocks. Ésta nos dará soporte para inyectar y mockear servicios de AngularJS en nuestros tests unitarios. También extiende varios servicios del core de AngularJS para que sean controlados de manera síncrona en nuestros tests (como veremos, por ejemplo, a la hora de hacer mocks de servicios HTTP).

12.3.2. Testing de filtros: nuestro primer test

Probaremos nuestra infraestructura. Para ello, seguiremos el paradigma TDD, diseñando un test para un filtro. El filtro se llamará textOrDefault, y devolverá la cadena que se le pase. En caso de no pasarse una cadena, se devolverá un valor por defecto (-), o el valor que se le pase como atributo (ej: N/D, desconocido, etc).

El fichero será test/filters/textOrDefaultSpec.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
'use strict';

describe('filter: textOrDefault', function () {
  var textOrDefault;

  //Inicializar el módulo indicado antes de caa test
  beforeEach(module('filters.textordefault'));

  //Inyección de dependencias textOrDefault se apuntará al filtro inyectado
  beforeEach(inject(function (_textOrDefaultFilter_) {
    textOrDefault = _textOrDefaultFilter_;
  }));

  it("should return '-'", function () {
    expect(textOrDefault(null)).toBe('-');
    expect(textOrDefault('')).toBe('-');
    expect(textOrDefault('   ')).toBe('-');
  });

  it("should return 'N/D'", function () {
    expect(textOrDefault(null, 'N/D')).toBe('N/D');
    expect(textOrDefault('', 'N/D')).toBe('N/D');
    expect(textOrDefault('  \n\t ', 'N/D')).toBe('N/D');
  });

  it("should return the same value", function () {
    var hello = 'hello';
    expect(textOrDefault(hello, 'N/D')).toBe(hello);
    expect(textOrDefault(hello)).toBe(hello);

    var helloWithSpaces = '   hello   ';
    expect(textOrDefault(helloWithSpaces, 'N/D')).toBe(helloWithSpaces);
    expect(textOrDefault(helloWithSpaces)).toBe(helloWithSpaces);
  });
});

Como su nombre indica, la función beforeEach es llamada antes de que se ejecute cada test dentro del describe.

Utilizaremos esta función beforeEach para cargar el el módulo donde se encuentra nuestro filtro.

Definimos cada uno de nuestros tests dentro de una función if. Y ahí utilizaremos expectations, con la función expect. Ésta recibe un valor, llamado valor real, que se encadenará con una función de matching para compararlo con el valor esperado.

La página de introducción a Jasmine dispone de ejemplos de todos y cada uno de los matchers por defecto.

Ahora, debemos establecer la configuración de Karma, para poder lanzar el test. Para ello, en la raíz del proyecto lanzaremos el comando karma init:

$ karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/**/*Spec.js
> src/**/*.js

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "[RUTA_DEL_PROYECTO]/karma.conf.js".

Esta inicialización nos habrá creado el fichero karma.conf.js. Modificaremos el atributo files (listado de ficheros que se cargarán en el navegador en el momento de realizar los tests), dejándolo de la siguiente manera:

1
2
3
4
5
6
7
8
// list of files / patterns to load in the browser
files: [
  'bower_components/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'bower_components/angular-ui-router/release/angular-ui-router.js',
  'src/**/*.js',
  'test/**/*Spec.js'
],

Si lanzamos los tests con karma start karma.conf.js, veremos cómo se levanta el navegador PhantomJS y nos devuelve un error. Esto se debe a que el test se ha lanzado, pero no se encuentra el módulo a testear. Crearemos el fichero src/filters/testOrDefault.js:

1
2
3
4
5
6
7
8
9
(function () {
    'use strict';
    angular.module('filters.textordefault', [])
        .filter('textOrDefault', function () {
            return function (input, defaultValue) {
                return input;
            };
        });
})();

Volviendo a lanzar los tests, veremos que ahora éstos fallan porque el filtro no está devolviendo los valores que esperábamos.

Modificaremos el código de nuestro filtro para que realice la funcionalidad esperada:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function () {
    'use strict';
    angular.module('filters.textordefault', [])
        .filter('textOrDefault', function () {
            return function (input, defaultValue) {
                defaultValue = defaultValue || '-';

                if (!input)
                    return defaultValue;

                if (!angular.isString(input)) {
                    if (input.toString) {
                        input = input.toString();
                    } else {
                        return defaultValue;
                    }
                }

                if (input.trim().length > 0) {
                    return input;
                }

                return defaultValue;
            };
        });
})();

Al realizar estos cambios, los tests pasarán exitosamente.

Una cosa que podemos ver es que se detectan los cambios "en caliente". A medida que modificamos el código de nuestro filtro, si salvamos, se volverán a lanzar los tests.

12.3.3. Testing de servicios

Veamos ahora cómo testear un servicio de cualquier tipo (provider, factory o service). Haremos nuestro ejemplo con un provider, ya que tiene un componente de configuración que el resto de servicios no tiene.

La idea es crear un servicio de validaciones. Tendremos por una parte una serie de validaciones predefinidas, y además podremos añadir los validadores custom al servicio.

El código de nuestro test (test/providers/expertoJeeValidationProviderSpec.js) será el siguiente:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
'use strict';

describe('provider: expertoJeeValidation', function () {
    var validationProvider;
    var undefinedVar;
    var validationService;

    beforeEach(module('providers.validation'));

    beforeEach(function () {
        // Creamos un módulo de pega, al que inyectamos el provider y definimos una función de configuración
        var fakeModule = angular
            .module('test.app.config', function(){}).config(function (expertoJeeValidationProvider) {
                validationProvider = expertoJeeValidationProvider;

                validationProvider.addConstraint('customConstraint', function (value, needsToBeFive) {
                    if (needsToBeFive) {
                        return value === 5;
                    }

                    return true;
                });
            });

        // Cargamos los módulos
        module('test.app.config');
   });

  beforeEach(
        //Inyectar los servicios en los tests
        inject(function(_expertoJeeValidation_){
          validationService = _expertoJeeValidation_;
        })
    );

    it('tests the providers has been injected', function () {
        expect(validationProvider).not.toBeUndefined();
        expect(validationService).not.toBeUndefined();
    });

    it('tests the blank constraint', function () {
        var blankConstraint = validationService.blank;

        expect(blankConstraint('', true)).toBe(true);
        expect(blankConstraint('', false)).toBe(false);

        expect(blankConstraint(undefinedVar, true)).toBe(true);
        expect(blankConstraint(undefinedVar, false)).toBe(false);

        expect(blankConstraint(null, true)).toBe(true);
        expect(blankConstraint(null, false)).toBe(false);

        expect(blankConstraint('hello', true)).toBe(true);
        expect(blankConstraint('hello', false)).toBe(true);
    });

    it('tets the creditCard constraint', function () {
        var creditCardConstraint = validationService.creditCard;
        var testFn = function () {
            creditCardConstraint(null, true);
        };

        expect(testFn).toThrow('CreditCard constraint: Not implemented yet');
    });

    it('tests the email constraint', function () {
        var emailConstraint = validationService.email;

        expect(emailConstraint('', true)).toBe(false);
        expect(emailConstraint('', false)).toBe(true);

        expect(emailConstraint(undefinedVar, true)).toBe(false);
        expect(emailConstraint(undefinedVar, false)).toBe(true);

        expect(emailConstraint(null, true)).toBe(false);
        expect(emailConstraint(null, false)).toBe(true);


        expect(emailConstraint('admin', true)).toBe(false);
        expect(emailConstraint('admin', false)).toBe(true);

        expect(emailConstraint('admin@', true)).toBe(false);
        expect(emailConstraint('admin@', false)).toBe(true);

        expect(emailConstraint('admin@admin', true)).toBe(true);
        expect(emailConstraint('admin@admin', false)).toBe(true);

        expect(emailConstraint('admin@admin.', true)).toBe(false);
        expect(emailConstraint('admin@admin.', false)).toBe(true);

        expect(emailConstraint('admin@admin.com', true)).toBe(true);
        expect(emailConstraint('admin@admin.com', false)).toBe(true);
    });

    it('tests the inList constraint', function () {
        var inListConstraint = validationService.inList;

        var testFn = function () {
            inListConstraint(null, true);
        };

        var testFn2 = function () {
            inListConstraint(null, 1);
        };

        var testFn2 = function () {
            inListConstraint(null, 'hello');
        };

        var testFn3 = function () {
            inListConstraint(null, { name: 'John', lastName: 'Locke'});
        };

        expect(testFn).toThrow('InList constraint only applies to Arrays');
        expect(testFn2).toThrow('InList constraint only applies to Arrays');
        expect(testFn3).toThrow('InList constraint only applies to Arrays');

        expect(inListConstraint('a', ['a', 'b', 'c'])).toBe(true);
        expect(inListConstraint('d', ['a', 'b', 'c'])).toBe(false);
        expect(inListConstraint(1, ['a', 'b', 'c'])).toBe(false);
        expect(inListConstraint(1, ['1', '2', '3'])).toBe(false);
        expect(inListConstraint(1, [1, 2, 3])).toBe(true);
        expect(inListConstraint(undefinedVar, [1, 2, 3])).toBe(false);
        expect(inListConstraint(undefinedVar, ['a', 'b', 'c'])).toBe(false);
        expect(inListConstraint(null, ['a', 'b', 'c'])).toBe(false);
        expect(inListConstraint(null, ['a', 'b', 'c', null])).toBe(true);
    });

    it('tests the regex constraint', function () {
        var matchesConstraint = validationService.matches;
        var emailRegex = '^[a-z0-9!#$%&\'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$';

        var testFn = function () {
            matchesConstraint(5, emailRegex);
        };

        var testFn2 = function () {
            matchesConstraint(undefinedVar, emailRegex);
        };

        var testFn3 = function () {
            matchesConstraint(null, emailRegex);
        };

        var testFn4 = function () {
            matchesConstraint([], emailRegex);
        };

        var testFn5 = function () {
            matchesConstraint({}, emailRegex);
        };

        expect(testFn).toThrow('Matches constraint only applies to Strings');
        expect(testFn2).toThrow('Matches constraint only applies to Strings');
        expect(testFn3).toThrow('Matches constraint only applies to Strings');
        expect(testFn4).toThrow('Matches constraint only applies to Strings');
        expect(testFn5).toThrow('Matches constraint only applies to Strings');

        expect(matchesConstraint('', emailRegex)).toBe(false);
        expect(matchesConstraint('admin', emailRegex)).toBe(false);
        expect(matchesConstraint('admin@', emailRegex)).toBe(false);
        expect(matchesConstraint('admin@admin', emailRegex)).toBe(true);
        expect(matchesConstraint('admin@admin.', emailRegex)).toBe(false);
        expect(matchesConstraint('admin@admin.com', emailRegex)).toBe(true);

    });

    it('tests the max constraint', function () {
        var maxConstraint = validationService.max;
        var throwErr = 'Max constraint only applies to numbers';

        var testFn = function () {
            maxConstraint('5', 4);
        };

        var testFn2 = function () {
            maxConstraint(undefinedVar, 4);
        };

        var testFn3 = function () {
            maxConstraint(null, 4);
        };

        var testFn4 = function () {
            maxConstraint([], 4);
        };

        var testFn5 = function () {
            maxConstraint({}, 4);
        };

        expect(testFn).toThrow(throwErr);
        expect(testFn2).toThrow(throwErr);
        expect(testFn3).toThrow(throwErr);
        expect(testFn4).toThrow(throwErr);
        expect(testFn5).toThrow(throwErr);

        expect(maxConstraint(1, 4)).toBe(true);
        expect(maxConstraint(4, 4)).toBe(true);
        expect(maxConstraint(5, 4)).toBe(false);
    });

    it('tests the maxSize constraint', function () {
        var maxSizeConstraint = validationService.maxSize;
        var throwErr = 'MaxSize constraint only applies to Arrays and Strings';
        var throwErr2 = 'Argument maxSize should be a number';

        var testFn = function () {
            maxSizeConstraint(undefinedVar, '');
        };

        var testFn2 = function () {
            maxSizeConstraint(undefinedVar, 4);
        };

        var testFn3 = function () {
            maxSizeConstraint(null, 4);
        };

        var testFn5 = function () {
            maxSizeConstraint({}, 4);
        };

        expect(testFn).toThrow(throwErr2);
        expect(testFn2).toThrow(throwErr);
        expect(testFn3).toThrow(throwErr);
        expect(testFn5).toThrow(throwErr);

        expect(maxSizeConstraint('hello', 4)).toBe(false);
        expect(maxSizeConstraint('hello', 5)).toBe(true);
        expect(maxSizeConstraint('hello', 6)).toBe(true);

        expect(maxSizeConstraint([1, 2, 3, 4, 5], 4)).toBe(false);
        expect(maxSizeConstraint([1, 2, 3, 4, 5], 5)).toBe(true);
        expect(maxSizeConstraint([1, 2, 3, 4, 5], 6)).toBe(true);
    });

    it('tests the min constraint', function () {
        var minConstraint = validationService.min;
        var throwErr = 'Min constraint only applies to numbers';

        var testFn = function () {
            minConstraint('5', 4);
        };

        var testFn2 = function () {
            minConstraint(undefinedVar, 4);
        };

        var testFn3 = function () {
            minConstraint(null, 4);
        };

        var testFn4 = function () {
            minConstraint([], 4);
        };

        var testFn5 = function () {
            minConstraint({}, 4);
        };

        expect(testFn).toThrow(throwErr);
        expect(testFn2).toThrow(throwErr);
        expect(testFn3).toThrow(throwErr);
        expect(testFn4).toThrow(throwErr);
        expect(testFn5).toThrow(throwErr);

        expect(minConstraint(1, 4)).toBe(false);
        expect(minConstraint(4, 4)).toBe(true);
        expect(minConstraint(5, 4)).toBe(true);
    });

    it('tests the minSize constraint', function () {
        var minSizeConstraint = validationService.minSize;
        var throwErr = 'MinSize constraint only applies to Arrays and Strings';
        var throwErr2 = 'Argument minSize should be a number';

        var testFn = function () {
            minSizeConstraint(undefinedVar, '');
        };

        var testFn2 = function () {
            minSizeConstraint(undefinedVar, 4);
        };

        var testFn3 = function () {
            minSizeConstraint(null, 4);
        };

        var testFn5 = function () {
            minSizeConstraint({}, 4);
        };

        expect(testFn).toThrow(throwErr2);
        expect(testFn2).toThrow(throwErr);
        expect(testFn3).toThrow(throwErr);
        expect(testFn5).toThrow(throwErr);

        expect(minSizeConstraint('hello', 4)).toBe(true);
        expect(minSizeConstraint('hello', 5)).toBe(true);
        expect(minSizeConstraint('hello', 6)).toBe(false);

        expect(minSizeConstraint([1, 2, 3, 4, 5], 4)).toBe(true);
        expect(minSizeConstraint([1, 2, 3, 4, 5], 5)).toBe(true);
        expect(minSizeConstraint([1, 2, 3, 4, 5], 6)).toBe(false);
    });

    it('tests the notEqual constraint', function () {
        var notEqualConstraint = validationService.notEqual;

        var testFn = function () {
            notEqualConstraint(1, 1);
        };

        expect(testFn).toThrow('NotEqual constraint: Not implemented yet');
    });

    it('tests the nullable constraint', function () {
        var nullableConstraint = validationService.nullable;

        expect(nullableConstraint('', true)).toBe(true);
        expect(nullableConstraint('', false)).toBe(true);

        expect(nullableConstraint(null, true)).toBe(true);
        expect(nullableConstraint(null, false)).toBe(false);

        expect(nullableConstraint(undefinedVar, true)).toBe(true);
        expect(nullableConstraint(undefinedVar, false)).toBe(false);
    });

    it('tests the numeric constraint', function () {
        var numericConstraint = validationService.numeric;
        var throwErr = 'Numeric constraint expects two arguments';

        var testFn = function () {
            numericConstraint('a');
        };

        expect(testFn).toThrow(throwErr);

        expect(numericConstraint(5, true)).toBe(true);
        expect(numericConstraint(5, false)).toBe(true);

        expect(numericConstraint(null, true)).toBe(false);
        expect(numericConstraint(null, false)).toBe(true);

        expect(numericConstraint(undefinedVar, true)).toBe(false);
        expect(numericConstraint(undefinedVar, false)).toBe(true);

        expect(numericConstraint('5', true)).toBe(false);
        expect(numericConstraint('5', false)).toBe(true);

        expect(numericConstraint([], true)).toBe(false);
        expect(numericConstraint([], false)).toBe(true);

        expect(numericConstraint({}, true)).toBe(false);
        expect(numericConstraint({}, false)).toBe(true);
    });

    it('tests the range constraint', function () {
        var rangeConstraint = validationService.range;
        var throwErr = 'Range constraint expects three arguments';
        var throwErr2 = 'All three values must be numbers';

        var testFn = function () {
            rangeConstraint('a', '1');
        };

        var testFn2 = function () {
            rangeConstraint('a', '1', 10);
        };

        expect(testFn).toThrow(throwErr);
        expect(testFn2).toThrow(throwErr2);

        expect(rangeConstraint(5, 0, 10)).toBe(true);
        expect(rangeConstraint(0, 0, 10)).toBe(true);
        expect(rangeConstraint(10, 0, 10)).toBe(true);
        expect(rangeConstraint(-1, 0, 10)).toBe(false);
        expect(rangeConstraint(11, 0, 10)).toBe(false);
    });

    it('tests the size constraint', function () {
        var sizeConstraint = validationService.size;
        var throwErr = 'Size constraint expects three arguments';
        var throwErr2 = 'Size constraint only applies to Arrays and Strings';
        var throwErr3 = 'Start and end values must be numbers';

        var testFn = function () {
            sizeConstraint('a', '1');
        };

        var testFn2 = function () {
            sizeConstraint({}, 1, 10);
        };

        var testFn3 = function () {
            sizeConstraint('a', '1', 10);
        };

        expect(testFn).toThrow(throwErr);
        expect(testFn2).toThrow(throwErr2);
        expect(testFn3).toThrow(throwErr3);

        expect(sizeConstraint("hello", 0, 5)).toBe(true);
        expect(sizeConstraint("", 0, 5)).toBe(true);
        expect(sizeConstraint("hi", 0, 5)).toBe(true);
        expect(sizeConstraint("hello world", 0, 5)).toBe(false);

        expect(sizeConstraint([1, 2, 3, 4, 5], 0, 5)).toBe(true);
        expect(sizeConstraint([], 0, 5)).toBe(true);
        expect(sizeConstraint([1, 2], 0, 5)).toBe(true);
        expect(sizeConstraint([1, 2, 3, 4, 5, 6, 7, 8, 9], 0, 5)).toBe(false);
    });

    it('tests the unique constraint', function () {
        var uniqueConstraint = validationService.unique;

        var throwErr = 'Unique constraint: not implemented yet';

        var testFn = function () {
            uniqueConstraint('a', true);
        };

        expect(testFn).toThrow(throwErr);
    });

    it('tests the url constraint', function () {
        var urlConstraint = validationService.url;

        var throwErr = 'Url constraint: expected 2 arguments';
        var throwErr2 = 'Url constraint: value expected to be a string';
        var throwErr3 = 'Url constraint: url expected to be a boolean';

        var testFn = function () {
            urlConstraint(1);
        };

        var testFn2 = function () {
            urlConstraint(1, true);
        };

        var testFn3 = function () {
            urlConstraint('1', 'true');
        };

        expect(testFn).toThrow(throwErr);
        expect(testFn2).toThrow(throwErr2);
        expect(testFn3).toThrow(throwErr3);

        expect(urlConstraint('www.ua.es', false)).toBe(true);
        expect(urlConstraint('asdf', true)).toBe(false);
        expect(urlConstraint('www.ua.es', true)).toBe(false);
        expect(urlConstraint('http://www.ua.es', true)).toBe(true);
    });

    it('tests a custom constraint', function () {
        var customConstraint = validationService.customConstraint;

        expect(customConstraint(5, true)).toBe(true);
        expect(customConstraint(4, false)).toBe(true);
        expect(customConstraint(54, true)).toBe(false);
    });

    it('should fail trying to override an existing constraint', function () {
        var throwErr = 'Cannot override a default constraint';
        var testFn = function () {
            validationProvider.addConstraint('url', function (value, needsToBeFive) {
                if (needsToBeFive) {
                    return value === 5;
                }

                return true;
            });
        };

        expect(testFn).toThrow(throwErr);
    });
});

La función module se utiliza para indicar al test que deberían prepararse los servicios del módulo indicado. El rol de este método es similar al de la directiva ng-app en una vista.

La función inject tiene la responsabilidad de inyectar los servicios en nuestros tests.

Por su parte, el código del provider será:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
(function () {
    'use strict';

    angular
        .module('providers.validation')
        .provider('expertoJeeValidation', function () {
            var instance = {};
            /**
             * Validates that a String value is not blank
             * @param value
             * @param blank
             * @returns {boolean}
             */
            instance.blank = function (value, blank) {
                if (typeof value !== 'undefined' && value !== null && typeof value !== 'string' && !(value instanceof String)) {
                    throw 'Blank constraint only applies to strings';
                }

                var isBlank = typeof value === 'undefined' || value === null || value.length === 0 || !value.trim();

                if (!blank) {
                    return !isBlank;
                }

                return true;
            };

            /**
             * Validates that a String value is a valid credit card number
             * @param value
             * @param creditCard
             * @returns {boolean}
             */
            instance.creditCard = function (value, creditCard) {
                throw 'CreditCard constraint: Not implemented yet';

//                return false;
            };

            /**
             * Validates that a String value is a valid email address.
             * @param value
             * @param email
             * @returns {boolean}
             */
            instance.email = function (value, email) {
                var emailRegex = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

                if (email) {
                    return emailRegex.test(value);
                }

                return true;
            };

            /**
             * Validates that a value is within a range or collection of constrained values.
             * @param value
             * @param array
             * @returns {boolean}
             */
            instance.inList = function (value, array) {
                if (!(array instanceof Array)) {
                    throw 'InList constraint only applies to Arrays';
                }

                return array.indexOf(value) !== -1;
            };

            /**
             * Validates that a String value matches a given regular expression.
             * @param value
             * @param expr
             * @returns {boolean}
             */
            instance.matches = function (value, expr) {
                if (typeof value !== 'string' && !(value instanceof String)) {
                    throw 'Matches constraint only applies to Strings';
                }

                var regexp = new RegExp(expr);

                return regexp.test(value);
            };

            /**
             * Validates that a value does not exceed the given maximum value.
             * @param value
             * @param max
             * @returns {boolean}
             */
            instance.max = function (value, max) {
                if (typeof value !== 'number' && !(value instanceof Number)) {
                    throw 'Max constraint only applies to numbers';
                }

                return value <= max;
            };

            /**
             * Validates that a value's size does not exceed the given maximum value.
             * @param value
             * @param maxSize
             * @returns {boolean}
             */
            instance.maxSize = function (value, maxSize) {
                if (value instanceof Array || value instanceof String || typeof value === 'string') {
                    return value.length <= maxSize;
                }

                if (typeof maxSize !== 'number' && !(maxSize instanceof Number)) {
                    throw 'Argument maxSize should be a number';
                }

                throw 'MaxSize constraint only applies to Arrays and Strings';
            };

            /**
             * Validates that a value does not fall below the given minimum value.
             * @param value
             * @param min
             * @returns {boolean}
             */
            instance.min = function (value, min) {
                if (typeof value !== 'number' && !(value instanceof Number)) {
                    throw 'Min constraint only applies to numbers';
                }

                return value >= min;
            };

            /**
             * Validates that a value's size does not fall below the given minimum value.
             * @param value
             * @param minSize
             * @returns {boolean}
             */
            instance.minSize = function (value, minSize) {
                if (value instanceof Array || value instanceof String || typeof value === 'string') {
                    return value.length >= minSize;
                }

                if (typeof minSize !== 'number' && !(minSize instanceof Number)) {
                    throw 'Argument minSize should be a number';
                }

                throw 'MinSize constraint only applies to Arrays and Strings';
            };

            /**
             * Validates that that a property is not equal to the specified value
             * @param value
             * @param otherValue
             * @returns {boolean}
             */
            instance.notEqual = function (value, otherValue) {
                throw 'NotEqual constraint: Not implemented yet';

//                return value !== otherValue;
            };

            /**
             * Allows a property to be set to null - defaults to true. Undefined is considered null in this constraint
             * @param value
             * @param nullable
             * @returns {boolean}
             */
            instance.nullable = function (value, nullable) {
                if (arguments.length !== 2) {
                    throw 'Constraint error. Must provide a boolean value for nullable';
                }

                if (!nullable) {
                    return value !== null && typeof value !== 'undefined';
                }

                return true;
            };

            /**
             * Ensures that the given value should be numeric
             * @param value
             * @param numeric
             */
            instance.numeric = function (value, numeric) {
                if (arguments.length !== 2) {
                    throw 'Numeric constraint expects two arguments';
                }

                var isNumeric = typeof value === 'number' || value instanceof Number;

                if (numeric) {
                    return isNumeric;
                }

                return true;
            };

            /**
             * Ensures that a property's value occurs within a specified range
             * @param value
             * @param start
             * @param end
             * @returns {boolean}
             */
            instance.range = function (value, start, end) {
                if (arguments.length !== 3) {
                    throw 'Range constraint expects three arguments';
                }

                if (!instance.numeric(value, true) || !instance.numeric(start, true) || !instance.numeric(end, true)) {
                    throw 'All three values must be numbers';
                }

                return value >= Math.min(start, end) && value <= Math.max(start, end);
            };

            /**
             * Restricts the size of a collection or the length of a String.
             * @param value
             * @param start
             * @param end
             * @returns {boolean}
             */
            instance.size = function (value, start, end) {
                if (arguments.length !== 3) {
                    throw 'Size constraint expects three arguments';
                }

                if (!instance.numeric(start, true) || !instance.numeric(end, true)) {
                    throw 'Start and end values must be numbers';
                }

                if (value instanceof Array || value instanceof String || typeof value === 'string') {
                    return value.length >= Math.min(start, end) && value.length <= Math.max(start, end);
                }

                throw 'Size constraint only applies to Arrays and Strings';
            };

            /**
             * Constrains a property as unique at the database level
             * @param value
             * @param unique
             * @returns {boolean}
             */
            instance.unique = function (value, unique) {
                throw 'Unique constraint: not implemented yet';

//                return false;
            };

            /**
             * Validates that a String value is a valid URL.
             * @param value
             * @param url
             * @returns {boolean}
             */
            instance.url = function (value, url) {
                if(arguments.length !== 2) {
                    throw 'Url constraint: expected 2 arguments';
                }

                if(typeof value !== 'string' && !(value instanceof String)) {
                    throw 'Url constraint: value expected to be a string';
                }

                if(typeof url !== 'boolean' && !(url instanceof Boolean)) {
                    throw 'Url constraint: url expected to be a boolean';
                }

                var urlRegex = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;

                if (url) {
                    return urlRegex.test(value);
                }

                return true;
            };

            var defaultConstraints = [];
            for (var i in instance) {
                defaultConstraints.push(i);
            }

            this.addConstraint = function (constraintName, fn) {
                if (defaultConstraints.indexOf(constraintName) !== -1) {
                    throw 'Cannot override a default constraint';
                }

                instance[constraintName] = fn;
            };

            this.setErrorMessage = function (constraintName, message) {
                instance[constraintName + 'Message'] = message;
            };

            instance.getErrorMessage = function (constraintName) {
                return instance[constraintName + 'Message'];
            };

            this.getInstance = this.$get = function () {
                return instance;
            };
        });
})();

Lanzando ahora el test nos dará error. Esto se debe a que el módulo del provider no está correctamente definido. Lo corregiremos para que todo funcione correctamente:

1
2
angular
    .module('providers.validation', [])

12.3.4. Sobre el método inject

inject permite que el servicio a inyectar tenga su nombre habitual (ej: $http), o bien su nombre habitual, envuelto por guiones bajos (ej: $http). Estos guiones son ignorados por el inyector a la hora de resolver el nombre del servicio, y puede ser de gran utilidad si preferimos usar su nombre habitual en nuestros tests.

Así estos dos tests serían equivalentes, solo que en un caso mantendríamos el nombre del servicio en lugar de una variable con otro nombre:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
describe('provider: expertoJeeValidation', function () {
    var expertoJeeValidation;

    beforeEach(module('providers.validation'));

    beforeEach(
        //Inyectar los servicios en los tests
        inject(function(_expertoJeeValidation_){
          expertoJeeValidation = _expertoJeeValidation_;
        })
    );

    // Resto del test. Usaremos 'expertoJeeValidation',
    // que es lo mismo que usaríamos en el código
    // de nuestra aplicación
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
describe('provider: expertoJeeValidation', function () {
    var theService;

    beforeEach(module('providers.validation'));

    beforeEach(
        //Inyectar los servicios en los tests
        inject(function(expertoJeeValidation){
          theService = expertoJeeValidation;
        })
    );

    //Resto del test. Usaremos 'theService'
}

12.3.5. Testing de controladores y Mocking de peticiones HTTP.

Vamos ahora a ver qué sería necesario para testear un controlador. Supondremos un controlador que expondrá en el scope un método llamado getUsers, que se conectará a un servicio HTTP (/users) y devolverá un listado de usuarios. El controlador también deberá contemplar posibles errores en la llamada al servicio.

Si se produjera algún error, existe una variable en el scope llamada hasError que pasaría a tener un valor cierto. Los usuarios se guardarán en una variable del scope llamada users.

El código del test (test/controller/usersCtrlSpec.js) será el siguiente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
'use strict';

describe('Controller: usersCtrl', function() {
    var scope, controller, httpBackend;

    // Inicializar el módulo antes de cada test
    beforeEach(module('expertojee.controllers'));

    // Inyección de dependencias, mockearemos $http con el servicio $httpBackend
    beforeEach(inject(function($rootScope, $controller, $httpBackend) {
        scope = $rootScope.$new();
        controller = $controller;
        httpBackend = $httpBackend;
    }));

    iit('should query the webservice', function() {
        // Definimos qué petición HTTP esperamos, y qué resultado queremos devolver
        httpBackend
          .expectGET('/users')
          .respond('[{"firstName": "Alejandro", "lastName": "Such"}, {"firstName": "Domingo", "lastName": "Gallardo"}]');

        // Inicializamos el controlador
        controller('usersCtrl', {'$scope': scope });

        //Llamamos al método del controlador
        scope.getUsers()

        // Responder a todas las peticiones HTTP
        httpBackend.flush();

        // Lanzamos scope.$apply() para que se resuelvan todas las promesas
        scope.$apply();

        // Evaluar los valores esperados
        expect(scope.users.length).toBe(2);
        expect(scope.hasError).toBe(false);
    });

    iit('should catch an error', function() {
        // Cuando se realice una petición a /users, responder con un error 500
        httpBackend
          .expectGET('/users')
          .respond(500, null);

        // Inicializar el controlador
        controller('usersCtrl', {'$scope': scope });

        // Llamamos al método del controlador
        scope.getUsers()

        // Responder a todas las peticiones HTTP
        httpBackend.flush();

        // Lanzamos scope.$apply() para que se resuelvan todas las promesas
        scope.$apply();

        // Evaluar los valores esperados
        expect(scope.hasError).toBe(true);
        expect(scope.users).toBeNull();
    });
});

A destacar que cada test se define con la función iit en lugar de it. Si en algún momento introducimos alguna función iit el resto de funciones definidas con it serán ignoradas. Esto es cómodo si nos queremos centrar en algún test en concreto.

Vemos cómo inicializamos el controlador con el servicio $controller, e inyectándole un scope que hemos creado en la función beforeEach (scope = $rootScope.$new()).

Lo más importante es el uso del servicio $httpBackend. Éste nos permite implementar llamadas falsas a un servicio y simular los resultados que queramos obtener en cada test. Al inicio de nuestro test escribimos el resultado que queremos probar en cada caso, y una vez llamada a la función que hace uso del servicio, deberemos realizar una llamada al método $httpBackend.flush() para que todas las llamadas al servicio $http que se hayan hecho en el controlador reciban su respuesta.

Aunque en el código que implementaremos no es necesario, en algunas ocasiones, dado que las peticiones http trabajan con promesas de resultados, tendremos que llamar a scope.$digest() o scope.$apply() para que los resultados pasen al scope.

Un código de controlador que pasaría los dos tests escritos es (src/controller/usersCtrl.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(){
  'use strict';

  angular
      .module('expertojee.controllers', [])
      .controller('usersCtrl', function($scope, $http){
        $scope.hasError = false;
        $scope.users = null

        $scope.getUsers = function(){
          $http
            .get('/users')
            .success(function(users){
              $scope.users = users;
              $scope.hasError = false;
            })
            .catch(function(){
              $scope.users = null
              $scope.hasError = true;
            });
        };
      });
})();

12.3.6. Testing de directivas

Finalmente, veremos cómo podemos realizar tests unitarios de directivas. Aunque pueda parecer más difícil, veremos como el proceso es bastante similar a lo que hemos hecho hasta ahora.

El truco está en que necesitaremos compilar el código HTML. Para ello utilizaremos el servicio $compile. Compilar consiste en introducir una cadena HTML en el ciclo de AngularJS, asociándole un scope.

Para testear una directiva vamos a tener que compilarla, realizar la tarea que tenemos que realizar (si fuese necesario), y finalmente invocar al método $apply() o $digest() del scope para que procesar los cambios.

Supongamos la siguiente directiva (src/directive/scheduleEvent.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function () {
  'use strict';
  angular.module('directives.schedule', [])
  .directive('scheduleEvent', function () {
    return {
      restrict: 'E',
      scope: {
        event: '=',
        deleteAction: '&'
      },
      template: '<div="schedule-event"> ' +
      '<h2> ' +
      '<span ng-if="isToday"><i class="icon ion-ios7-time-outline"></i></span> ' +
      '<span ng-if="!isToday"><i class="icon ion-ios7-calendar-outline"></i> {{ event.date | date }} - </span> ' +
      '<span ng-bind="event.date | date:\'HH:mm\'"></span>. <span ng-bind="event.title"></span> ' +
      '<p ng-if="showHolder" ng-bind="event.contact.name + \' \' + event.contact.middleName + \' \' + event.contact.lastName"></p> ' +
      '</h2> ' +
      '<a class="button" ng-click="deleteAction()">Eliminar</a> ' +
      '</div>',

      link: function (scope, element, attrs) {
        scope.isToday = scope.$eval(attrs.isToday);
        scope.showHolder = !!scope.event.contact && !scope.$eval(attrs.hideContact);

        scope.$on('$destroy', function(){
          angular.element(element).remove();
        });
      }
    };
  });
})();

Ésta consiste en una entrada de agenda, que puede estar o no asociada a un contacto. Mostrará un botón "Eliminar" Acepta los siguientes atributos:

  • event: Entrada de agenda. Objeto con los atributos title y contact. contact tiene, a su vez, los atributos firstName, middleName y lastName.

  • hideContact: Ocultar el nombre del contacto.

  • isToday: el evento es del día de hoy. Acepta los valores "true" o "false". _ deleteAction: acción a realizar cuando se hace click en el botón de eliminar

Como hemos comentado, en el test habrá que compilar primero un bloque HTML. Para ello, necesitaremos inyectar el servicio $compile antes de cada test. Como hemos dicho que este servicio asocia una cadena HTML a un scope, también haremos uso del $rootScope, donde definiremos la acción a realizar cuando hagamos click en el botón delete:

1
2
3
4
5
6
7
8
beforeEach(inject(function ($compile, $rootScope) {
  scope = $rootScope;
  compile = $compile;

  scope.deleteEvent = function () {
    console.log('deleting event');
  };
}));

En cada uno de nuestros tests, compilaremos el código HTML que deseemos probar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
//Añadir un evento al scope
scope.event = {
  date: (new Date()).getTime(),
  title: 'Entrega ejercicios sesión 1',
  contact: {
    name: 'Juan',
    middleName: 'Perez',
    lastName: 'Perez'
  }
};

//Crear nuestra plantilla
element = angular.element('<schedule-event event="event" is-today="true" delete-action="deleteEvent(event)" edit-action="editEvent(event)"></schedule-event>');

//Compilar la plantilla
element = compile(element)(scope);
scope.$apply();

Una batería de tests para esta directiva podría ser la siguiente, donde iremos probando distintas combinaciones de atributos para ver si hace lo que queremos (test/directive/scheduleEventSpec.js):

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
'use strict';

describe('directive: scheduleEvent', function () {
  var element;
  var scope;
  var compile;

  beforeEach(function(){
    module('directives.schedule')
  });

  beforeEach(inject(function ($compile, $rootScope) {
    scope = $rootScope;
    compile = $compile;

    scope.deleteEvent = function () {
      console.log('deleting event');
    };
  }));

  it('should show a today event', function () {
    scope.event = {
      date: (new Date()).getTime(),
      title: 'Entregar los ejercicios de la sesión 1',
      contact: {
        name: 'Juan',
        middleName: 'Perez',
        lastName: 'Perez'
      }
    };

    element = angular.element('<schedule-event event="event" is-today="true"></schedule-event>');
    element = compile(element)(scope);
    scope.$apply();
    var i = element.find('i');
    expect(i.hasClass('ion-ios7-time-outline')).toBe(true);
  });

  it('should show a future event', function () {
    scope.event = {
      date: (new Date()).getTime() + 86400000, //+2 days
      title: 'JPA 3,4',
      contact: {
        name: 'Juan',
        middleName: 'Perez',
        lastName: 'Perez'
      }
    };

    element = angular.element('<schedule-event event="event" is-today="false"></schedule-event>');
    element = compile(element)(scope);
    scope.$apply();
    var i = element.find('i');
    expect(i.hasClass('ion-ios7-calendar-outline')).toBe(true);
  });

  it('should show the contact block', function () {
    scope.event = {
      date: (new Date()).getTime(),
      title: 'Entrega ejercicios sesión 1',
      contact: {
        name: 'Juan',
        middleName: 'Perez',
        lastName: 'Perez'
      }
    };

    element = angular.element('<schedule-event event="event" hide-contact="false" is-today="true" delete-action="deleteEvent(event)" edit-action="editEvent(event)"></schedule-event>');
    element = compile(element)(scope);
    scope.$apply();

    expect(element.find('p')[0]).not.toBeUndefined();
    expect(element.text()).toContain('Juan Perez Perez');
    expect(element.text()).toContain('Entrega ejercicios sesión 1');
  });

  it('should\'t show the contact block', function () {
    scope.event = {
      date: (new Date()).getTime(),
      title: 'Entrega ejercicios sesión 1',
      contact: null
    };

    element = angular.element('<schedule-event event="event" is-today="true" delete-action="deleteEvent(event)" edit-action="editEvent(event)"></schedule-event>');
    element = compile(element)(scope);
    scope.$apply();

    expect(element.find('p')[0]).toBeUndefined();
    expect(element.text()).toContain('Entrega ejercicios sesión 1');
  });

  it('should\'t show the contact block despite it has a contact', function () {
    scope.event = {
      date: (new Date()).getTime(),
      title: 'Entrega ejercicios sesión 1',
      contact: {
        name: 'Juan',
        middleName: 'Perez',
        lastName: 'Perez'
      }
    };

    element = angular.element('<schedule-event event="event" is-today="true" delete-action="deleteEvent(event)" edit-action="editEvent(event)" hide-contact="true"></schedule-event>');
    element = compile(element)(scope);
    scope.$apply();

    expect(element.find('p')[0]).toBeUndefined();
    expect(element.text()).toContain('Entrega ejercicios sesión 1');
  });

  it('should trigger a delete event', function () {
    spyOn(scope, 'deleteEvent');

    scope.event = {
      date: (new Date()).getTime(),
      title: 'Entrega ejercicios sesión 1',
      contact: {
        name: 'Juan',
        middleName: 'Perez',
        lastName: 'Perez'
      }
    };

    element = angular.element('<schedule-event event="event" is-today="true" delete-action="deleteEvent(event)" edit-action="editEvent(event)"></schedule-event>');
    element = compile(element)(scope);
    scope.$apply();

    var editBtn = angular.element(element.find('a')[0]);
    editBtn.triggerHandler('click');
    scope.$apply();
    expect(scope.deleteEvent).toHaveBeenCalled();
  });
});

Cabe destacar el último test, donde utilizamos un spy, una funcionalidad de Jasmine que nos permite determinar si una función en concreto ha sido llamada.

12.4. Automatizando tareas con Grunt. Diseñando nuestro workflow

Ahora vamos a ver lo útil que puede resultarnos grunt para automatizar una serie de tareas. Para ello, crearemos un fichero llamado Gruntfile.js en la raíz de nuestro proyecto, que inicialmente será el siguiente:

1
2
3
4
5
6
7
module.exports = function (grunt) {
  // load all grunt tasks matching the `grunt-*` pattern
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({});
  grunt.registerTask('default', []);
}

En él, ya hemos introducido un módulo, llamado load-grunt-tasks, que nos permite cargar de manera más cómoda el resto de módulos que incluyamos en nuestro fichero.

12.4.1. Verificación de código

Dado que JavaScript es un lenguaje tan permisivo, siempre es importante establecer unas convenciones de código. Es ahí donde entra JSHint, una herramienta open source que detecta errores y problemas potenciales en nuestro código JavaScript, y establece una serie de convenciones. Es muy restrictivo, y podemos relajarlo en base a nuestras necesidades y las de nuestro proyecto.

Para configurar JSHint en nuestro proyecto, modificaremos el fichero Gruntfile.js de la siguiente manera:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function (grunt) {
  // load all grunt tasks matching the `grunt-*` pattern
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    'jshint' : {
      options: {
        curly: true,
        eqeqeq: true,
        eqnull: true,
        browser: true,
        globals: {
          jQuery: true
        },
      },
      default : ['src/**/*.js']
    }
  });

  grunt.registerTask('default', ['jshint']);
}

Si ahora lanzamos el comando grunt en nuestra terminal, se ejecutará la tarea default, que realiza la validación de todos los ficheros con extensión .js en alguna de las subcarpetas de src.

Veremos que nos da error en el fichero src/controller/AccessController.js porque hay un par de líneas que no hemos finalizado con punto y coma. También, nos dirá que hay una sentencia if en el fichero src/filters/textOrDefault.js que no tiene llaves

Una vez corregidos estos dos errores, la tarea se ejecutará correctamente.

12.4.2. Testing

Una vez verificado el código, haremos que los tests se lancen automáticamente con karma. Para ello, añadiremos karma a nuestro workflow:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function (grunt) {
  //...

  grunt.initConfig({
    'jshint' : {
      //...
    },

    'karma' : {
      'default' : {
        'configFile' : 'karma.conf.js',
        'options': {
          singleRun: true
        }
      }
    }
  });

  grunt.registerTask('default', ['jshint', 'karma']);
}

Como véis, hemos sobreescrito la opción singleRun para asegurarnos de que no se queda a la espera de cambios para volver a lanzar la batería de tests.

Ahora, al lanzar grunt se ejecutará JSHint y, si pasa correctamente, se lanzarán después los tests que habíamos hecho con karma.

12.4.3. Generando código de distribución

En tiempo de desarrollo, es muy cómodo y recomendable tener varios ficheros de código fuente. Sin embargo, a la hora de ir a producción, lo normal es tener un único fichero fuente con todo el código, ya sea minificado o no. El mismo angularJS, como podemos ver en su GitHub, tiene un sinfín de ficheros pero nosotros únicamente importamos el fichero angular.js o angular.min.js. Esto se realiza de una manera sencilla con los plugins grunt-contrib-concat y grunt-contrib-uglify. El primero de ellos se encargará de concatenar todos los ficheros en uno solo, mientras que el segundo utilizará este resultado para generar un fichero minificado.

Como esto no lo realizaremos siempre, registraremos una tarea, que llamaremos dist, que realizará esta labor. Es muy importante que los tests pasen correctamente antes de generar un fichero de distribución, con lo que repetiremos las vistas anteriormente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
module.exports = function (grunt) {
  // ...

  grunt.initConfig({
    'pkg': grunt.file.readJSON('package.json'),

    'jshint' : {
      // ...
    },

    'karma' : {
      // ...
    },

    'concat': {
      'dist' : {
        'src' : ['src/**/*.js'],
        'dest': 'dist/<%=pkg.name%>-<%=pkg.version%>.js'
      }
    },

    'uglify': {
      'options': {
        'mangle':false
      },
      'dist':{
        'files': {
          'dist/<%=pkg.name%>-<%=pkg.version%>.min.js' : ['dist/<%=pkg.name%>-<%=pkg.version%>.js']
        }
      }
    }
  });

  grunt.registerTask('default', ['jshint', 'karma']);
  grunt.registerTask('dist', ['jshint', 'karma', 'concat:dist', 'uglify:dist']);
}

Lanzando el comando grunt dist, veremos que se ejecuta todo, y finalmente se habrá creado una carpeta dist con dos nuevos ficheros:

.
├── Gruntfile.js
├── bower_components
├── dist
│   ├── angular-automation-testing-0.0.0.js
│   └── angular-automation-testing-0.0.0.min.js
├── karma.conf.js
├── node_modules
├── src
│   ├── controller
│   ├── directive
│   ├── filters
│   └── providers
└── test
    ├── controller
    ├── directive
    ├── filters
    └── providers

12.4.4. Observando cambios para lanzar tests

Otra tarea muy interesante que podemos programar es que los tests se lancen automáticamente tan pronto salvemos los cambios de algún fichero javascript. Para ello nos valdremos de la ayuda del plugin grunt-contrib-watch.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function (grunt) {
  // ...

  grunt.initConfig({

    // ...

    watch: {
      scripts: {
        files: ['src/**/*.js', 'test/**/*.js'],
        tasks: ['jshint', 'karma'],
        options: {
          spawn: false,
        },
      },
    },
  });

  grunt.registerTask('default', ['jshint', 'karma']);
  grunt.registerTask('dist', ['jshint', 'karma', 'concat:dist', 'uglify:dist']);
}

Lanzando ahora el comando grunt watch, veremos que la terminal se pone en espera. Modificando cualquier fichero, vemos cómo se registra el cambio y se lanzan los tests.

12.4.5. Otros plugins de utilidad

Hemos visto unos cuantos plugins que son de gran utilidad para nuestros, y ampliamente usados.

Otros plugins interesantes podrían ser:

12.5. Un paso más allá

Hoy en día tenemos una gran cantidad de servidores de integración continua que nos permiten realizar estas tareas automáticas una vez hemos hecho push en nuestro repositorio. Travis, por ejemplo, nos da este servicio de manera gratuita para proyectos open source. Podemos generar un hook que lanza los tests y genera el código de distribución, y luego despliega releases en el repositorio de nuestro proyecto.