$http con Karma y Angular
$http con Karma y Angular
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

En este tutorial vamos a ver cómo podemos hacer tests unitarios de peticiones $http con Karma y Angular utilizando el framework jasmine.

Crearemos un controlador, una factoría con un par de métodos y veremos cómo comprobar este tipo de peticiones, en este caso trabajando con $http.get.

El módulo ngMock nos ofrece un servicio llamado $httpBackend que nos permite testear las peticiones realizadas con el servicio $http.

Si tienes dudas con la instalación de karma y angular-mocks en angularjs te recomiendo el tutorial anterior, una vez instalado todo vamos a crear un par de archivos, app/home.js y tests/home.js, abre el primero y añade el siguiente código.


Primero vamos a configurar nuestro test, así que añade el siguiente código al archivo tests/app.js.


Esto es lo básico para nuestro test, gracias a inject podemos inyectar todas las depencias que necesitemos, incluso nuestra factoría Users.

Ahora mismo, si ejecutas el comando karma start no pasará nada ya que no hemos definido nada a testear, vamos a empezar por testear la variable de alcance name del controlador usersCtrl.


Si ahora revisas la terminal verás que los tests son satisfactorios, ya que la variable name está definida y su valor es igual a Iparra.

Testear peticiones $http con Karma y Angular

Ahora vamos a crear un nuevo test para comprobar la función getUsers() del controlador homeCtrl, así que primero vamos a definir un usuario ficticio en nuestro test.


Ahora que tenemos definido un usuario ficticio vamos a hacer un sencillo test.


Primero, simulamos la petición con el servicio $httpBackend utilizando el método expectGET, así podemos comprobar el tipo de respuesta esperada, en nuestro caso, simplemente le pasamos un array con un objeto usuario exactamente igual que la variable userMock.

Cómo puedes ver, llamamos a la función scope.getUsers() y ejecutamos el método httpBackend.flush(), gracias al cuál la petición puede ser procesada para ser testeada, después simplemente comprobamos que la variable del controlador homeCtrl res tenga el mismo valor que userMock.

En el caso anterior, comprobamos que la petición haya salido bien y que el resultado sea el esperado, ¿pero qué pasa si queremos comprobar si el resultado no es un 200?, para eso el siguiente ejemplo puede servir utilizando promesas.


En este caso, comprobamos que cuando ocurra un error 500 el resultado esperado sea Error, pero utilizando promesas en lugar de hacerlo directamente con la promesa devuelta por el servicio $http, si ejecutas el test verás que es correcto ya que $scope.res contiene el mismo valor que userMock.

Espero que te haya gustado, y, si es así, te agradezco que lo compartas en las redes sociales.