{"id":2290,"date":"2014-04-09T07:08:20","date_gmt":"2014-04-09T07:08:20","guid":{"rendered":"http:\/\/10.1.1.67:8116\/2015\/07\/26\/295-revision-v1\/"},"modified":"2023-10-11T09:46:54","modified_gmt":"2023-10-11T09:46:54","slug":"desarrollo-dirigido-por-test-tdd-22","status":"publish","type":"post","link":"https:\/\/fractaliasystems.com\/en\/desarrollo-dirigido-por-test-tdd-22\/","title":{"rendered":"Desarrollo dirigido por Test (TDD) 2\/2"},"content":{"rendered":"<p>En el post anterior (http:\/\/goo.gl\/irWWbH) hicimos una introducci\u00f3n de la metodolog\u00eda 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\u00f3n de los modos:<\/p>\n<ul>\n<li>Karma &#8211; Usando Jasmine en el lado del cliente<\/li>\n<li>Jamine &#8211;\u00a0 node en el lado del servidor<!--more--><\/li>\n<\/ul>\n<p><b>Jasmine con Karma<\/b><\/p>\n<p>Continuamos con el ejemplo del post anterior, es decir, una aplicaci\u00f3n web sencilla desarrollada con Angjular js, con la siguiente estructura:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-315\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td1.png\" alt=\"TDD1. C\u00f3digo ejemplo\" width=\"235\" height=\"140\" \/><\/a><\/p>\n<p>Ahora vamos a ver como probamos la aplicaci\u00f3n pero esta vez empleando Karma. Y para hacerlo, primero tenemos que crear un archivo de configuraci\u00f3n karma, donde colocaremos los archivos y carpetas que necesitamos vincular para la ejecuci\u00f3n 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:<\/p>\n<ul>\n<li>Crear un archivo de configuraci\u00f3n para Karma denominado karma.config.js<\/li>\n<li>Configurar este archivo con los nuestros archivos, navegadores, etc.<\/li>\n<li>Iniciar el servidor de Karma y esperar a ver qu\u00e9 pasa.<\/li>\n<\/ul>\n<p>Ahora para crear el archivo de configuraci\u00f3n, \u00fanicamente debemos ejecutar este comando en el terminar y pulsar la tecla enter, pues este proceso lo vamos a configurar manualmente.<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td0.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-316\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td0.png\" alt=\"TDD0. C\u00f3digo ejemplo\" width=\"268\" height=\"31\" \/><\/a><\/p>\n<p>Una vez creado el archivo, la nueva estructura del proyecto ser\u00e1 as\u00ed:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-317\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td2.png\" alt=\"TDD2. C\u00f3digo ejemplo\" width=\"243\" height=\"229\" \/><\/a><\/p>\n<p>Debemos de cambiar en el archivo Karma.config.js las dos estructuras donde definimos los archivos incluidos y excluidos.<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-318\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td3.png\" alt=\"TDD3. C\u00f3digo ejemplo\" width=\"452\" height=\"127\" \/><\/a><\/p>\n<p>Una vez efectuados los cambios, el c\u00f3digo deber\u00e1 de tener este aspecto:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-319\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"451\" height=\"216\" \/><\/a><\/p>\n<p>Advertencia: Mucho cuidado con el orden de inserci\u00f3n de los archivos ya que el sistema podr\u00eda dejar de funcionar. Se recomienda usar el orden que aparece en este documento antes de probar nuevos t\u00e9rminos. Es conveniente seguir la metodolog\u00eda del programador y comprobar que funciona correctamente.<\/p>\n<p>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:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-320\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td4.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"275\" height=\"25\" \/><\/a><\/p>\n<p>Por defecto se supervisar\u00e1n los cambios en el c\u00f3digo para volver a probar, as\u00ed que no es necesario parar para relanzar manualmente el servidor cada vez que se produzca un cambio en el c\u00f3digo, karma lo hace autom\u00e1ticamente!!<\/p>\n<p>Una vez puesta en marcha la prueba, s\u00f3lo nos queda comprobar el resultado de las pruebas de aprobaci\u00f3n y de rechazo.<\/p>\n<p>Karma adem\u00e1s abre la ventada del navegador cuando se ejecuta. Este es el navegador que se haya establecido por defecto en el archivo de configuraci\u00f3n. El archivo de configuraci\u00f3n es muy sencillo, no tiene apenas nada en su interior, excepto una cabecera y un bot\u00f3n denominado debug. Si se presiona sobre este bot\u00f3n, se abrir\u00e1 otra pesta\u00f1a \u00a0que tambi\u00e9n est\u00e1 vac\u00eda. Por lo tanto, lo que realmente se debe hacer es comprobar la consola de JavaScript con las herramientas de desarrollo del navegador. Es ah\u00ed donde aparecer\u00e1 el resultado de las pruebas efectuadas.<\/p>\n<p>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\u00e1ginas de SpecRunner.html ya que Karma tiene otra l\u00ednea de configuraci\u00f3n donde se puede especificar en qu\u00e9 navegador se desea probar la aplicaci\u00f3n y una vez introducida dicha configuraci\u00f3n, Karma lanzar\u00e1 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.<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-322\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td5.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"206\" height=\"27\" \/><\/a><\/p>\n<p>Un ejemplo de configuraci\u00f3n podr\u00eda ser:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-323\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td6.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"295\" height=\"29\" \/><\/a><\/p>\n<p>Trate de cambiar y ver el resultado. Es realmente incre\u00edble y \u00fatil cuando se necesita para comprobar la compatibilidad entre navegadores.<\/p>\n<p>Advertencia: es necesario tener configurado en todos los procesos el navegador en el que desea probar la aplicaci\u00f3n en el ordenador. De lo contrario Karma no lo encontrar\u00e1.<\/p>\n<p><b>Jasmine -Node<\/b><\/p>\n<p>Finalmente vamos a indicar un ejemplo de pruebas TDD, seg\u00fan el tipo Jamine &#8211;\u00a0 node en el lado del servidor, de esta forma aprenderemos otra herramienta interesante para poder probar Node js y sus funciones y adem\u00e1s no \u00fanicamente del lado del cliente, sino del lado del servidor. Los pasos que debemos ejecutar en este caso son:<\/p>\n<ul>\n<li>Crear el archivo server.spec.js para almacenar las pruebas que queremos hacer con el servidor dentro de la carpeta de especificaciones.<\/li>\n<li>Excluir este archivo dentro de la carpeta de especificaciones.<\/li>\n<li>Iniciar la herramienta de Jasmine-nodo para probar el servidor y mostrar los resultados de la prueba en el terminal.<\/li>\n<\/ul>\n<p>En este caso, el server.spec.js se ver\u00e1 de la siguiente forma:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-324\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td7.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"546\" height=\"171\" \/><\/a><\/p>\n<p>Como estamos usando una llamada asincr\u00f3nica para llamar al servidor, tenemos que indicarle a la prueba el momento en que el servidor ha terminado, por lo que utilizaremos la funci\u00f3n <b>done<\/b>. Lo pasamos en la prueba de c\u00f3digo y al terminar llamamos a la funci\u00f3n <b>done ().<\/b> 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\u00f3n del programa. Por ello, utilizaremos una \u201cdevoluci\u00f3n de llamada\u201d que se pone en marcha cuando el servidor responde a nuestra petici\u00f3n.<\/p>\n<p>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\u00f3digo dentro de los karma.config.js ser\u00e1:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-325\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td8.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"262\" height=\"83\" \/><\/a><\/p>\n<p>Y deber\u00eda tener este aspecto:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-326\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td9.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"262\" height=\"95\" \/><\/a><\/p>\n<p>Finalmente, una vez que tenemos todo preparado, s\u00f3lo tenemos que abrir la aplicaci\u00f3n de Jasmine-nodo para probar nuestro c\u00f3digo. Para hacer esto, en primer lugar debemos abrir un terminal y luego ejecutar el siguiendo comando:<\/p>\n<p><a href=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-327\" src=\"http:\/\/fractaliasystems.com\/wp-content\/uploads\/td10.png\" alt=\"TDD. C\u00f3digo ejemplo\" width=\"636\" height=\"31\" \/><\/a><\/p>\n<p>Compruebe la salida y ver\u00e1 nuestro responde a la ruta localhost:5000.<\/p>\n<p>Despu\u00e9s de este art\u00edculo, deseamos que est\u00e9 preparado para utilizar TDD y probar aplicaciones web tanto desde el lado del cliente al lado del servidor.<\/p>\n<p>\u00a1Buena suerte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el post anterior (http:\/\/goo.gl\/irWWbH) hicimos una introducci\u00f3n de la metodolog\u00eda 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\u00f3n de los modos: Karma &#8211; Usando Jasmine en el lado del<br \/><a href=\"https:\/\/fractaliasystems.com\/en\/desarrollo-dirigido-por-test-tdd-22\/\" class=\"more\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2290","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\/2290","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=2290"}],"version-history":[{"count":1,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2290\/revisions"}],"predecessor-version":[{"id":7199,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/posts\/2290\/revisions\/7199"}],"wp:attachment":[{"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/media?parent=2290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/categories?post=2290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fractaliasystems.com\/en\/wp-json\/wp\/v2\/tags?post=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}