En el post anterior (http://goo.gl/irWWbH) hicimos una introducción de la metodología de desarrollo dirigido por test (TTD) e identificamos tres modos de efectuar pruebas, dos desde el lado del cliente y una desde el lado del servidor. En este post, introducimos ejemplo de ejecución de los modos:
- Karma – Usando Jasmine en el lado del cliente
- Jamine – node en el lado del servidor
Jasmine con Karma
Continuamos con el ejemplo del post anterior, es decir, una aplicación web sencilla desarrollada con Angjular js, con la siguiente estructura:
Ahora vamos a ver como probamos la aplicación pero esta vez empleando Karma. Y para hacerlo, primero tenemos que crear un archivo de configuración karma, donde colocaremos los archivos y carpetas que necesitamos vincular para la ejecución de nuestra prueba. Para crear el archivo en este caso emplearemos el proceso automatizado que Karma nos ofrece. Los pasos que se deben seguir son los siguientes:
- Crear un archivo de configuración para Karma denominado karma.config.js
- Configurar este archivo con los nuestros archivos, navegadores, etc.
- Iniciar el servidor de Karma y esperar a ver qué pasa.
Ahora para crear el archivo de configuración, únicamente debemos ejecutar este comando en el terminar y pulsar la tecla enter, pues este proceso lo vamos a configurar manualmente.
Una vez creado el archivo, la nueva estructura del proyecto será así:
Debemos de cambiar en el archivo Karma.config.js las dos estructuras donde definimos los archivos incluidos y excluidos.
Una vez efectuados los cambios, el código deberá de tener este aspecto:
Advertencia: Mucho cuidado con el orden de inserción de los archivos ya que el sistema podría dejar de funcionar. Se recomienda usar el orden que aparece en este documento antes de probar nuevos términos. Es conveniente seguir la metodología del programador y comprobar que funciona correctamente.
Una vez que haya configurado todo, guarde el archivo y ejecute el servidor de prueba (Karma). Para ello basta con ejecutar el siguiente comando en el terminal:
Por defecto se supervisarán los cambios en el código para volver a probar, así que no es necesario parar para relanzar manualmente el servidor cada vez que se produzca un cambio en el código, karma lo hace automáticamente!!
Una vez puesta en marcha la prueba, sólo nos queda comprobar el resultado de las pruebas de aprobación y de rechazo.
Karma además abre la ventada del navegador cuando se ejecuta. Este es el navegador que se haya establecido por defecto en el archivo de configuración. El archivo de configuración es muy sencillo, no tiene apenas nada en su interior, excepto una cabecera y un botón denominado debug. Si se presiona sobre este botón, se abrirá otra pestaña que también está vacía. Por lo tanto, lo que realmente se debe hacer es comprobar la consola de JavaScript con las herramientas de desarrollo del navegador. Es ahí donde aparecerá el resultado de las pruebas efectuadas.
Los resultados obtenidos a partir de Karma no son tan visuales como los obtenidos a partir de Jasmine, pero al menos, no es necesario poner en marcha todo el navegador manualmente para abrir cada una de las páginas de SpecRunner.html ya que Karma tiene otra línea de configuración donde se puede especificar en qué navegador se desea probar la aplicación y una vez introducida dicha configuración, Karma lanzará todos los navegadores, al mismo que tiempo que se puede ir depurando los resultados de las pruebas. El sistema por defecto, utiliza el navegador Chrome, pero el usuario puede agregar todos los navegadores que desee.
Un ejemplo de configuración podría ser:
Trate de cambiar y ver el resultado. Es realmente increíble y útil cuando se necesita para comprobar la compatibilidad entre navegadores.
Advertencia: es necesario tener configurado en todos los procesos el navegador en el que desea probar la aplicación en el ordenador. De lo contrario Karma no lo encontrará.
Jasmine -Node
Finalmente vamos a indicar un ejemplo de pruebas TDD, según el tipo Jamine – node en el lado del servidor, de esta forma aprenderemos otra herramienta interesante para poder probar Node js y sus funciones y además no únicamente del lado del cliente, sino del lado del servidor. Los pasos que debemos ejecutar en este caso son:
- Crear el archivo server.spec.js para almacenar las pruebas que queremos hacer con el servidor dentro de la carpeta de especificaciones.
- Excluir este archivo dentro de la carpeta de especificaciones.
- Iniciar la herramienta de Jasmine-nodo para probar el servidor y mostrar los resultados de la prueba en el terminal.
En este caso, el server.spec.js se verá de la siguiente forma:
Como estamos usando una llamada asincrónica para llamar al servidor, tenemos que indicarle a la prueba el momento en que el servidor ha terminado, por lo que utilizaremos la función done. Lo pasamos en la prueba de código y al terminar llamamos a la función done (). Esto se debe a que el servidor lo pide y nos espera para responder, pero no sabemos a priori si esto va a suceder y si nosotros podemos bloquear la ejecución del programa. Por ello, utilizaremos una “devolución de llamada” que se pone en marcha cuando el servidor responde a nuestra petición.
Una vez que tenemos los server.spec.js configurados, se agrega a los archivos excluidos en el Karma.config.js por lo que el código dentro de los karma.config.js será:
Y debería tener este aspecto:
Finalmente, una vez que tenemos todo preparado, sólo tenemos que abrir la aplicación de Jasmine-nodo para probar nuestro código. Para hacer esto, en primer lugar debemos abrir un terminal y luego ejecutar el siguiendo comando:
Compruebe la salida y verá nuestro responde a la ruta localhost:5000.
Después de este artículo, deseamos que esté preparado para utilizar TDD y probar aplicaciones web tanto desde el lado del cliente al lado del servidor.
¡Buena suerte!
Leave a Comment