Tests unitarios en AngularJS

¿Qué son los test unitarios?

Los test unitarios son cada vez más importantes, aunque siempre lo han sido, porque aseguran la sostenibilidad del software, y porque aseguran que cada vez que insertemos código nuevo en la aplicación, lo anterior va a funcionar sin problemas y se va a obtener el resultado esperado.

En el frontend en ocasiones ocurre que falla algo, y al producirse en el lado del cliente, en el navegador, no sabemos muy bien cuál ha sido la causa o no podemos saber cuál ha sido el error, ya que no podemos reportarlo de manera tan sencilla como podemos hacerlo en el backend.

Aquí es cuando adquieren más importancia los test unitarios.

Ejemplo de un test unitario

Aquí vamos a ver un ejemplo de un test unitario para probar la inyección de un servicio.

'use strict';

describe(‘Modulo app service test', function() {
    beforeEach(function () {
        module(‘testModule');
});

    describe('Courses Service', function() {

        var coursesService;
        beforeEach(function () {
            inject(['CoursesService', function(service) {
                coursesService = service;
            }]);
    });


        it('la funcion getdata no esta definida', function() {
            expect(coursesService.getData()).tobeDefined();
        })
    });
});

Tenemos un servicio llamado CoursesService y lo queremos inyectar en un controlador. Este sería el código de test para probar que ese servicio se inyecta y se puede ejecutar el método que vamos a ejecutar.

Lo primero que hay que hacer es describir el test con describe, y dentro del mismo escribimos toda la implementación del test.

Antes de realizar cualquiera de los test necesitamos que se defina nuestro módulo, y a partir de ahí ya inyectaremos el servicio.

Una vez definido nuestro módulo, insertamos otro describe interno, dónde vamos a probar la inyección del servicio y comprobar que esa función que vamos a usar está disponible y definida.

Creamos una variable courseService global, que vamos a inicializar en el beforeEach. Internamente dentro del describe de los servicios vamos a hacer otro beforeEach.

Inyectaremos el servicio al igual que lo hace Angular internamente. Cada vez que inyectamos por inyección de dependencias un servicio, se llama al inject de Angular, y se introduce la dependencia coursesService y en la función asignaríamos esa instancia que nos ha inyectado por inyección de dependencias Angular.

Finalmente vamos a comprobar todo lo que se compruebe, todos los assertion y todos los expect van a ir dentro de un it.

Para ello declararíamos una it, escribiríamos el mensaje que saldría en caso de fallar, y dentro colocamos lo que esperamos que suceda. En este caso esperamos que la función getData del servicio esté definida, y si no lo está se mostraría un error con el mensaje predefinido.