- \n
- Jasmine – Independiente en el lado del cliente<\/li>\n
- Karma – Usando Jasmine en el lado del cliente<\/li>\n
- Jamine – \u00a0node en el lado del servidor<\/li>\n<\/ul>\n
\u00bfQu\u00e9 es Jasmine?<\/b><\/p>\n
<\/b>Jasmine es un framework de pruebas de comportamiento que nos ofrece herramientas para poner a prueba nuestro c\u00f3digo. Por ejemplo, si lo que necesitamos es saber si nuestra funci\u00f3n devuelve true, podemos usar esta estructura sin necesidad de introducir ning\u00fan de introducir ning\u00fan otro dato.<\/p>\n
![\"tdd1.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd1.png\")
<\/a><\/p>\nEn este caso, esperamos que nuestra funci\u00f3n devuelva true<\/b>, por lo que debemos ejecutar dicha funci\u00f3n y comprobar la salida con toBe\u00a0 para ver si es realmente cierto. Por lo que si nuestra funci\u00f3n devuelve true, deber\u00edamos ver una salida como esta:<\/p>\n
![\"TDD2.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd2.png\")
<\/a><\/p>\n\u00bfQu\u00e9 es Karma?<\/b><\/p>\n
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\u00e1mico que permite ahorrar tiempo y esfuerzo. Funciona principalmente analizando nuestras fuentes y pruebas de c\u00f3digo y ejecutando los test autom\u00e1ticamente. Por ejemplo, podemos probar nuestro c\u00f3digo en distintos navegadores o podemos excluir archivos en nuestras pruebas.<\/p>\n
\u00bfQu\u00e9 es Jasmine- Node?<\/b><\/p>\n
B\u00e1sicamente, podemos definir Jasmine-Node, como el puerto de Jasmine al nodo, muy \u00fatil para la realizaci\u00f3n de pruebas de funcionalidades en el lado del servidor.<\/p>\n
\u00bfC\u00f3mo obtener las herramientas?<\/b><\/p>\n
- \n
- Para instalar Jasmine y utilizarlo de modo independiente en el lado del cliente s\u00f3lo se debe de ir al sitio web y descargar el zip.<\/li>\n
- Para instalar Karma, necesitamos tener instalado previamente Node js. Y posteriormente debemos utilizar npm<\/b> para instalarlo. Se recomienda instalarlo a nivel global ya que se va a utilizar como una herramienta del lado del terminal.
![\"TDD3.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd3.png\")
<\/a><\/li>\n<\/ul>\n- \n
- Para instalar Jasmine-Node, usamos de nuevo el terminal y npm. En este caso tambi\u00e9n se recomienda instalarlo de forma global para poder usarlo en el terminal.
![\"TDD4.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd4.png\")
<\/a><\/li>\n<\/ul>\n\u00bfC\u00f3mo integrar las herramientas en un proyecto existente?<\/b><\/p>\n
Pongamos un ejemplo de una aplicaci\u00f3n web sencilla desarrollada con Angular js, con la siguiente estructura:<\/p>\n
\u00a0
![\"TDD5.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd5.png\")
<\/a><\/b><\/p>\nJasmine empleado \u00fanicamente como soporte<\/b><\/p>\n
Este m\u00e9todo es la forma m\u00e1s f\u00e1cil de ejecutar pruebas unitarias en dos situaciones diferentes, o bien cuando el c\u00f3digo a analizar no es demasiado extenso o bien cuando no es demasiado complicado. Una vez que se haya descargado Jasmine, s\u00f3lo ser\u00e1 necesario descomprimirlo y comprobar su estructura interna. Esto es lo que obtendremos:<\/p>\n
![\"C\u00f3digo](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/Jasmine.png\")
<\/a><\/p>\nA continuaci\u00f3n, emplearemos la carpeta Jasmine 2.0.0 (que contiene los archivos que hacen posible que las pruebas funcionen) y SpecRunner.html (p\u00e1gina 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.<\/p>\n
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\u00e1 localizado el c\u00f3digo original de nuestra aplicaci\u00f3n. As\u00ed lo que necesitamos, es integrar Jasmine en nuestra aplicaci\u00f3n, introduciendo la carpeta Jasmine 2.0.0 en nuestra carpeta libs<\/b> y la p\u00e1gina SpecRummer.html en la carpeta principal de la aplicaci\u00f3n. Una vez efectuada esta operaci\u00f3n, nuestra nueva estructura del proyecto ser\u00e1:<\/p>\n
![\"TDD7.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd7.png\")
<\/a><\/p>\nImportante:<\/b> cuando creemos los archivos de test o pruebas, es necesario mantener la misma nomenclatura siempre<\/b> para poder utilizar los mismos archivos en todas las pruebas. Siempre es necesario terminar con el nombre spec.js<\/b>.<\/p>\n
![\"TDD8.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd8.png\")
<\/a><\/p>\nAsique ahora tenemos dos acciones m\u00e1s que efectuar sobre nuestro c\u00f3digo:<\/p>\n
- \n
- Configurar el archivo SpecRunner.html para que apunte a las carpetas y los archivos adecuados.<\/li>\n
- Poner en marcha el sitio de pruebas en nuestro navegador para probar nuestra aplicaci\u00f3n.<\/li>\n<\/ul>\n
Para configurar el archivo SpecRunner.html tendremos que cambiar la cabecera que aparece por defecto por la cabecera espec\u00edfica que necesitamos. El encabezado por defecto est\u00e1 configurado para ejecutar el ejemplo que viene en el c\u00f3digo de Jasmine y tiene la siguiente apariencia:<\/p>\n
El estilo para el sitio de la prueba
![\"TDD9.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd9.png\")
<\/a><\/i><\/p>\nLos archivos de Jasmine contenidos en la carpeta de Jasmine 2.0.0.
![\"TDD10.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd10.png\")
<\/a><\/i><\/p>\nLos archivos de or\u00edgenes de nuestra aplicaci\u00f3n.
![\"TDD11.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd11.png\")
<\/a><\/i><\/p>\nLos archivos de texto de nuestro c\u00f3digo<\/i><\/p>\n
![\"TDD12.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd12.png\")
<\/a><\/p>\nPara probar nuestra aplicaci\u00f3n que estamos utilizando como ejemplo, debemos de modificar este c\u00f3digo predeterminado por Jasmine por el siguiente:<\/p>\n
El estilo para el sitio de la prueba\u00a0
![\"TDD13.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd13.png\")
<\/a><\/i><\/p>\nLos archivos de Jasmine contenidos en la carpeta de Jasmine 2.0.0.<\/i><\/p>\n
![\"TDD14.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd14.png\")
<\/a><\/p>\nLos archivos de Angular js que necesitamos para probar la aplicaci\u00f3n
![\"TDD15.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd15.png\")
<\/a><\/i><\/p>\nLos archivos de or\u00edgenes de nuestra aplicaci\u00f3n
![\"TDD16.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd16.png\")
<\/a><\/i><\/p>\nLos archivos de prueba para nuestro c\u00f3digo
![\"TDD17.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd17.png\")
<\/a><\/i><\/p>\nObs\u00e9rvese que hay un nuevo archivo de Angular js que no estaba en nuestra estructura inicial del proyecto. Debemos descargarlo y a\u00f1adirlo para probar la aplicaci\u00f3n, por lo que ahora nuestra estructura del proyecto debe ser:<\/p>\n
![\"TDD18.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd18.png\")
<\/a><\/p>\nAhora nos hace falta s\u00f3lo efectuar alguna prueba, por lo que vamos a crear un ejemplo r\u00e1pido. Vamos a testear si la aplicaci\u00f3n es capaz de definir una variable dentro de un controlador. Por ello debemos de crear un m\u00f3dulo y un controlador en nuestra aplicaci\u00f3n application.js y luego realizar la prueba de control del mismo. Este ser\u00eda el c\u00f3digo dentro de nuestro archivo.<\/p>\n
application.js<\/b><\/p>\n
![\"TDD19.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd19.png\")
<\/a><\/p>\napplication.spec.js<\/b><\/p>\n
![\"TDD20.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd20.png\")
<\/a><\/p>\nUna vez que se haya instalado PHP, Apache, etc en el equipo. \u00bfC\u00f3mo se puede poner en marcha un servidor de forma r\u00e1pida en la carpeta del proyecto?<\/p>\n
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:<\/p>\n
![\"TDD21.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd21.png\")
<\/a><\/p>\nPor ejemplo, 5000<\/p>\n
![\"TDD22.](\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/tdd22.png\")
<\/a><\/p>\nPosteriormente, al ir al navegador, vaya a http:\/\/localhost:5000<\/a> en lugar de ir a su aplicaci\u00f3n web en funcionamiento. Para mostrar la p\u00e1gina de prueba, s\u00f3lo se debe de a\u00f1adir la ruta al archivo de corredor de especificaciones http:\/\/localhost:5000\/SpecRunner.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
El sistema llamada TDD (Test Driver Developer o Desarrollo Dirigido por Test) es una nueva metodolog\u00eda para trabajar en el desarrollo web basado en la idea de desarrollar pruebas, codificar y refactorizar el c\u00f3digo construido. El TDD establece un nuevo modelo esencial para la productividad que aporta resultados m\u00e1s legibles, menos redundantes y f\u00e1ciles de
Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":2292,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-fractalia"],"_links":{"self":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/comments?post=2291"}],"version-history":[{"count":1,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2291\/revisions"}],"predecessor-version":[{"id":7181,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2291\/revisions\/7181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/media\/2292"}],"wp:attachment":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/media?parent=2291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/categories?post=2291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/tags?post=2291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Para instalar Jasmine-Node, usamos de nuevo el terminal y npm. En este caso tambi\u00e9n se recomienda instalarlo de forma global para poder usarlo en el terminal.