lunes, febrero 06, 2012

Iniciando con QUnit

Hace poco escribí un post sobre como iniciar con jQuery. En esta ocasión quiero mostrar como hacer el mismo ejemplo; pero escribiendo las pruebas unitarias primero (a la TDD) utilizando QUnit.

Lo primero que debo hacer es crear un archivo HTML con la plantilla que esta en el sitio de QUnit con unos cuantos cambios…. cambié la ubicación de la hoja de estilos,  agregue las ubicaciones de los scripts de jQuery, QUnit y agregué un div con id “main” que es donde escribiré el HTML necesario para las pruebas. El archivo me quedo así:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QUnit Tests</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Hello World</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
<div id="main"></div>
<script>
test("hello", function() {
ok(true, "world");
});
</script>
</body>
</html>


En esta plantilla viene escrito una prueba de ejemplo llamada “hello”. Voy a modificar esa función para especificar lo que quiero probar. Para escribir la prueba voy a aplicar el estilo AAA (Arrange, Act, Assert). Primero (Arrange) especifico las precondiciones para que pueda correr la prueba, en este caso sería escribir el HTML necesario y ligar el evento clic del botón a mi función. En la segunda parte (Act) escribo el nuevo comentario en la caja de texto y disparo el evento en el botón. En la tercera parte (Assert) verifico que se haya agregado un comentario, es decir que la lista tenga un elemento con el contenido esperado. La prueba queda de la siguiente manera:



test("when click 'add' then a comment should be added to the list", function(){

//Arrange - Agrego el HTML necesario y ligo el evento click del botón
$("#main").append('<ul id="comments"></ul>'
+ '<input id="comment" type="text" />'
+ '<button id="add">Add</button>');
$("#add").click(addComment);

//Act – Escribo el nuevo comentario y hago clic en el botón
$("#comment").val("comment");
$("#add").click();

//Assert – Verifico que el nuevo comentario este en la lista
equals($("#comments").html(), "<li>comment</li>");

});


Una vez que tenemos la prueba, lo que sigue es correrla y verificar que falle para después escribir el código necesario para hacerla pasar. Para correr la prueba lo único que necesito es guardar el archivo (en este caso lo llamé test.html) y abrirlo con un navegador. Al abrir el archivo en el navegador este me muestra el error.



error1



El error dice que no se encontró la función “addComment” que es la función que se va a ejecutar cuando se haga clic en el botón. Para definir mi función voy a crear un nuevo archivo al cual llamaré comments.js y agregar la referencia a el desde el archivo test.html. En este archivo (comments.js) es donde definiré la función addComment (por ahora haré la función global espero después escribir sobre como simular namespaces y definir funciones “privadas” en JavaScript). A continuación muestro el contenido de mi archivo comments.js



function addComment(){    
var newCommentTextBox = $("#comment");
var commentText = newCommentTextBox.val();
$("#comments").append("<li>" + commentText + "</li>");
newCommentTextBox.val('');
}


Como puede verse es lo mismo que en el post anterior solo que ahora esta en su propio archivo js. Agrego la referencia en el archivo test.html



<script src="comments.js"></script>

y vuelvo a correr las pruebas (actualizando la página en el navegador). Veo que la prueba pasa. pass

Ahora puedo tener confianza para hacer modificaciones sin preocuparme de que eche a perder funcionalidad. Además de que el código JavaScript quedó en su propio archivo (comments.js) separado del HTML.

jueves, febrero 02, 2012

Dev3Cast sobre NancyFx

El pasado 16 de enero Gabriel Flores y yo platicamos con Miguel Ángel Jiménez sobre el web framework Nancy. Miguel nos platicó de que se trata y a grandes rasgos como es que se usa. Además hablamos un poco sobre el open source en la plataforma .Net

Pueden escuchar la platica y unirse a ella comentando en el post del dev3cast

Dev3Cast sobre MongoDB y Redis

El pasado 2 de diciembre se publicó un episodio del dev3cast podcast donde participé junto con Eber, Samuel y Gabriel. En esta ocasión hablamos sobre MongoDB, redis y como usar en proyectos de software estas tecnologías NoSQL.