$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 instalar Karma con AngularJS, una vez instalado, veremos cómo hacer la configuración y crear un primer test muy sencillo.

Karma es una potente herramienta para crear y ejecutar tests unitarios en javascript.

Si te preguntas porqué o cuando utilizar Karma ellos lo explican muy bien.

  • ¿Quieres probar el código en los navegadores reales?.
  • ¿Quieres probar el código en múltiples navegadores ( de escritorio , teléfonos , tabletas , etc.)?.
  • Quiere ejecutar pruebas a nivel local durante el desarrollo.
  • Quieres ejecutar pruebas en un servidor de integración continua.
  • Quieres ejecutar pruebas cada vez que guardes los cambios.
  • Te encanta trabajar con la terminal.
  • Desea utilizar Istanbul para generar automágicamente informes de cobertura.
  • Desea utilizar RequireJS para sus archivos de origen.

Ahora que ya sabemos algo más sobre Karma vamos a hacer la instalación, la cuál es muy sencilla.

Instalar Karma con AngularJS

Para instalar Karma primero tenemos que tener instalado nodejs ya que la instalación se lleva a cabo con el comando npm, una vez instalado nodejs ejecuta las siguientes líneas.


Para corroborar que karma se ha instalado correctamente simplemente ejecuta lo siguiente.


Si hemos hecho todo bien, eso debe haber arrojado un mensaje en la terminal con el número de la versión de karma que tenemos instalada.

Primer test con Karma y AngularJS

Para crear nuestro primer test con Karma y AngularJS simplemente debemos crear un proyecto vacío y ejecutar el siguiente comando.


Simplemente puedes dar a enter hasta que termine todo el proceso, una vez finalizado se habrá generado un archivo llamado karma.conf.js.

Si te has dado cuenta, la primera pregunta era referente a que framework queremos utilizar para llevar a cabo los tests, y por defecto viene Jasmine.

Jasmine es un framework de pruebas para javascript. Es adecuado para los sitios web, los proyectos de nodejs, o en cualquier lugar que se puede ejecutar javascript.

En este caso nosotros hemos dicho que vamos a utilizar karma-jasmine, un adaptador de jasmine para utilizar este framework bajo Karma.

Angular mocks

El paso siguiente es tener la opción de inyectar todos los servicios y dependencias que necesitemos en nuestros tests, y para eso existe el módulo ngMock, así que vamos a descargar angular y angular-mocks a través de bower.


Ésto hará la descarga de angularjs y del módulo ngMock.

Ahora debemos crear una ubicación para nuestros tests, así que podemos crear un directorio llamado tests y otro app para nuestro código en la raíz de la aplicación.

Configurar Karma

Nosotros simplemente le vamos a decir que archivos queremos que lea, es decir, sus dependencias, así que abre el archivo karma.conf.js y modifica el valor de files con el siguiente.


Simplemente le decimos que cargue angularjs, angular-mocks y todos los archivos js dentro de app/**/ y test/**/.

Ahora crea dentro de tests y app un directorio llamado controllers y dentro de cada uno de ellos un archivo llamado hello.js, abre el archivo app/controllers/hello.js y añade el siguiente código.


Ahora haz lo mismo con el archivo tests/controllers/hello.js y añade el siguiente código.


Esto es lo interesante, primero decimos que vamos a probar nuestro controlador hello con la función describe, decimos que cargue el módulo app con beforeEach, si necesitamos cargar más podemos ejecutar un callback con tantos módulos como necesitemos. Finalmente en la sección it podemos crear cada test que necesitemos, una sección it por cada cosa que necesitemso testear.

Si te fijas, gracias angular-mocks tenemos disponible la función inject, la cuál nos permite acceder a los servicios y dependencias de angularjs, así que obtenemos el $rootScope y el servicio $controller, de esta forma, gracias al $rootScope y al servicio $controller podemos simular la carga completa del controlador helloCtrl.

En la sección it simplemente le decimos que que debe estar definida una variable llamada hello, para probar esto colócate en la terminal y ejecuta el siguiente comando.

Si revisas la consola, tendrás un mensaje como el siguiente.


¿Qué significa esto?, simplemente que nuestro test ha funcionado, al decirle que debe esperar una variable dentro de $scope llamada hello y no estar definida nos dice que el test no ha sido pasado, vamos a solucionarlo simplemente definiendo la variable hello en el controlador helloCtrl.


Si revisas de nuevo la terminal verás que el test ha sido satisfactorio, para terminar el tutorial vamos a comprobar si la variable hello contiene el valor esperado añadiendo otra sección it debajo de la anterior.


De nuevo tenemos otro error, con toEqual comprobamos si el valor es el esperado, simplemente dale el valor hola a la variable hello y el test será satisfactorio.

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