Testing de directivas en AngularJS con Jasmine

0
5775

En este tutorial vas a aprender cómo testear con Jasmine tus directivas personalizadas que puedes crear en AngularJS.

0. Índice de contenidos

1. Introducción

Ya sabes que AngularJS te permite crear tus propias directivas. En Autentia creemos en el TDD y es por ello que antes de escribir el código funcional, escribimos su correspondiente test unitario.

Utilizando el framework Jasmine puedes escribir tests unitarios para AngularJS. En este tutorial vas a aprender cómo hacer tests para tus directivas con dos ejemplos, uno para una directiva elemento HTML y otro para una directiva de validación personalizada de controles de formulario.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro Retina 15′ (2.3 Ghz Intel Core I7, 16GB DDR3).
  • Sistema Operativo: Mac OS Yosemite 10.10.3
  • Plunker – AngularJS 1.4.3 + Jasmine 2.2.1

Para añadir a tu entorno la configuración de Jasmine y Karma puedes visitar el tutorial en el que Miguel Arlandy nos explica los tests unitarios en AngularJS para filtros, servicios y controladores.

3. Testing de directiva de elemento HTML

Vamos a realizar una directiva tnt-warning para utilizar por ejemplo cuando hay que avisar al usuario de que revise una sección de un formulario en la que se encuentre.

La directiva será utilizada como etiqueta, por lo que cuando en la vista se escriba , esta será sustituida por la plantilla que se indica en la directiva, en este caso

tnt-warning-test.js

La directiva tnt-warning es la siguiente:

tnt-warning.js

El código fuente de este test se encuentra en plunker.

4. Testing de directiva de validación personalizada de formularios

4.1. Testing validación síncrona

En un tutorial anterior os explicaba cómo validar campos de formularios de manera personalizada en AngularJS utilizando directivas. Para este ejemplo vamos a hacer un test de la directiva tnt-nif-validation (si seguimos TDD, recuerda que primero hay que hacer el test y después la directiva).

La directiva tnt-nif-validation comprueba si el número de un DNI es correcto. El test que hay que preparar es el siguiente:

tnt-nif-validation-test.js

Los tests se han diseñado en base a los estados que puede tomar el controlador del modelo del control nif. El primer test comprueba que el estado inicial es válido. En el segundo, se comprueba que ante un número de DNI que no es correcto, la directiva detecta que el valor es inválido.

El código de la directiva es el siguiente:

tnt-nif-validation.js

Como puedes ver, la validación es síncrona. En el tutorial de creación de directivas de validación explicaba que también es posible hacer validaciones asíncronas, como por ejemplo, cuando queremos validar que un usuario está registrado en el sistema.

El código fuente de este test se encuentra en plunker.

4.2. Testing validación asíncrona

Para explicar la validación asíncrona se realizó la directiva tnt-user-signedup. Esta directiva simulaba con una promesa la llamada http al servicio. Para esta ocasión y poder mostrar los mocks de llamadas http para hacer tests se ha implementado la llamada al servicio.

Por tanto, lo que queremos es realizar una llamada a un servicio back-end que nos indique si un alias de usuario está dado de alta en el sistema o no. El test a realizar es el siguiente:

tnt-user-signedup-test.js

El módulo que nos permite realizar mocks en los tests de AngularJS es ng-mock, el cual hay que importar en el módulo de la aplicación. El módulo ng-mock nos provee el servicio $httpbackend para simular las llamadas a back-end. Las llamadas a servicios mockeadas pueden responder de manera síncrona, por lo que es necesario llamar a la función flush() para que se liberen las peticiones pendientes.

El código de la directiva tnt-user-signedup es el siguiente

tnt-user-signedup.js

Como puedes ver, se ha inyectado el servicio $http del módulo ng para poder realizar las llamadas al back-end. Al crear el módulo se le indica que se inyecte el módulo ng-mock.

El código fuente de este test se encuentra en plunker.

5. Conclusiones

Implementando tests para nuestras directivas estaremos más seguros durante el desarrollo de nuestra aplicación ya que nos avisarán cuando el comportamiento de la aplicación haya sido modificado de una manera que estos no contemplan.

La combinación de Jasmine, que nos ofrece una manera limpia de realizar tests unitarios, y de los servicios para mockear implementados en Angular en la directiva ng-mock, conforman una herramienta muy potente que nos ayuda y simplifica seguir la filosofía TDD.

6. Referencias

Dejar respuesta

Please enter your comment!
Please enter your name here