El sistema llamada TDD (Test Driver Developer o Desarrollo Dirigido por Test) es una nueva metodología para trabajar en el desarrollo web basado en la idea de desarrollar pruebas, codificar y refactorizar el código construido. El TDD establece un nuevo modelo esencial para la productividad que aporta resultados más legibles, menos redundantes y fáciles de mantener, que hace posible que nuestras aplicaciones den un salto de calidad considerable.
Este tutorial desea aportar las bases necesarias para seguir esta metodología, en concreto se van a indicar los pasos necesarios para realizar pruebas TDD en aplicaciones web efectuadas sobre Angular js (framework JavaScript) y Node js (entorno JavaScript de lado del servidor).
Por el momento se han identificado tres modos de efectuar las pruebas, dos desde el lado del cliente y una desde el lado del servidor. Estos métodos son:
- Jasmine – Independiente en el lado del cliente
- Karma – Usando Jasmine en el lado del cliente
- Jamine – node en el lado del servidor
¿Qué es Jasmine?
Jasmine es un framework de pruebas de comportamiento que nos ofrece herramientas para poner a prueba nuestro código. Por ejemplo, si lo que necesitamos es saber si nuestra función devuelve true, podemos usar esta estructura sin necesidad de introducir ningún de introducir ningún otro dato.
En este caso, esperamos que nuestra función devuelva true, por lo que debemos ejecutar dicha función y comprobar la salida con toBe para ver si es realmente cierto. Por lo que si nuestra función devuelve true, deberíamos ver una salida como esta:
¿Qué es Karma?
Karma es un corrector de pruebas que usa el framework de pruebas para ayudar al desarrollador a evitar el desarrollo de configuraciones complejas y crea un flujo de trabajo dinámico que permite ahorrar tiempo y esfuerzo. Funciona principalmente analizando nuestras fuentes y pruebas de código y ejecutando los test automáticamente. Por ejemplo, podemos probar nuestro código en distintos navegadores o podemos excluir archivos en nuestras pruebas.
¿Qué es Jasmine- Node?
Básicamente, podemos definir Jasmine-Node, como el puerto de Jasmine al nodo, muy útil para la realización de pruebas de funcionalidades en el lado del servidor.
¿Cómo obtener las herramientas?
- Para instalar Jasmine y utilizarlo de modo independiente en el lado del cliente sólo se debe de ir al sitio web y descargar el zip.
- Para instalar Karma, necesitamos tener instalado previamente Node js. Y posteriormente debemos utilizar npm para instalarlo. Se recomienda instalarlo a nivel global ya que se va a utilizar como una herramienta del lado del terminal.
- Para instalar Jasmine-Node, usamos de nuevo el terminal y npm. En este caso también se recomienda instalarlo de forma global para poder usarlo en el terminal.
¿Cómo integrar las herramientas en un proyecto existente?
Pongamos un ejemplo de una aplicación web sencilla desarrollada con Angular js, con la siguiente estructura:
Jasmine empleado únicamente como soporte
Este método es la forma más fácil de ejecutar pruebas unitarias en dos situaciones diferentes, o bien cuando el código a analizar no es demasiado extenso o bien cuando no es demasiado complicado. Una vez que se haya descargado Jasmine, sólo será necesario descomprimirlo y comprobar su estructura interna. Esto es lo que obtendremos:
A continuación, emplearemos la carpeta Jasmine 2.0.0 (que contiene los archivos que hacen posible que las pruebas funcionen) y SpecRunner.html (página web que integra todos los archivos que necesitamos y muestra los resultados de la prueba en el navegador). El resto de carpetas /spec y /rsc contienen las especificaciones.
Nosotros en este ejemplo que presentamos, no vamos a utilizar las carpetas /spec y /src pero nos pueden dar una primera idea de la estructura de carpetas disponibles en Jasmine 2.0.0. Este programa contiene una carpeta de especificaciones donde estará localizado el código original de nuestra aplicación. Así lo que necesitamos, es integrar Jasmine en nuestra aplicación, introduciendo la carpeta Jasmine 2.0.0 en nuestra carpeta libs y la página SpecRummer.html en la carpeta principal de la aplicación. Una vez efectuada esta operación, nuestra nueva estructura del proyecto será:
Importante: cuando creemos los archivos de test o pruebas, es necesario mantener la misma nomenclatura siempre para poder utilizar los mismos archivos en todas las pruebas. Siempre es necesario terminar con el nombre spec.js.
Asique ahora tenemos dos acciones más que efectuar sobre nuestro código:
- Configurar el archivo SpecRunner.html para que apunte a las carpetas y los archivos adecuados.
- Poner en marcha el sitio de pruebas en nuestro navegador para probar nuestra aplicación.
Para configurar el archivo SpecRunner.html tendremos que cambiar la cabecera que aparece por defecto por la cabecera específica que necesitamos. El encabezado por defecto está configurado para ejecutar el ejemplo que viene en el código de Jasmine y tiene la siguiente apariencia:
El estilo para el sitio de la prueba
Los archivos de Jasmine contenidos en la carpeta de Jasmine 2.0.0.
Los archivos de orígenes de nuestra aplicación.
Los archivos de texto de nuestro código
Para probar nuestra aplicación que estamos utilizando como ejemplo, debemos de modificar este código predeterminado por Jasmine por el siguiente:
El estilo para el sitio de la prueba
Los archivos de Jasmine contenidos en la carpeta de Jasmine 2.0.0.
Los archivos de Angular js que necesitamos para probar la aplicación
Los archivos de orígenes de nuestra aplicación
Los archivos de prueba para nuestro código
Obsérvese que hay un nuevo archivo de Angular js que no estaba en nuestra estructura inicial del proyecto. Debemos descargarlo y añadirlo para probar la aplicación, por lo que ahora nuestra estructura del proyecto debe ser:
Ahora nos hace falta sólo efectuar alguna prueba, por lo que vamos a crear un ejemplo rápido. Vamos a testear si la aplicación es capaz de definir una variable dentro de un controlador. Por ello debemos de crear un módulo y un controlador en nuestra aplicación application.js y luego realizar la prueba de control del mismo. Este sería el código dentro de nuestro archivo.
application.js
application.spec.js
Una vez que se haya instalado PHP, Apache, etc en el equipo. ¿Cómo se puede poner en marcha un servidor de forma rápida en la carpeta del proyecto?
Se puede hacer de manera sencilla si utilizamos el terminal para ir a la carpeta del proyecto, donde tenemos el archivo index .html y luego simplemente ejecutar:
Por ejemplo, 5000
Posteriormente, al ir al navegador, vaya a http://localhost:5000 en lugar de ir a su aplicación web en funcionamiento. Para mostrar la página de prueba, sólo se debe de añadir la ruta al archivo de corredor de especificaciones http://localhost:5000/SpecRunner.html
Leave a Comment