Haciendo TDD con QUnit, Parte 1

Hace unos días me registré en Solveet.com (un sitio dedicado a aprender mediante la técnica de Katas) e hice una Kata en C# llamada Kata Simple List. En si, el ejercicio me pareció interesante y pude resolverlo sin mayores complicaciones (debo confesar que tuve alguna que otra dificultad inesperada). Una vez que el ejercicio estuvo resuelto, tuve ganas de hacerlo en javascript, solo por darme el gusto, y en algún que otro momento libre, leí varios tutoriales de QUnit y me puse a codear.

Solo dedicándole 5 minutos, me di cuenta que esto daba para un post de "paso a paso" sobre TDD en javascript, así que acá van los pasos a seguir para resolver la Kata usando POO y QUnit.

Comencemos:

1. Preparando el "ambiente" de trabajo.

Por lo que vi en los tutoriales de QUnit, tengo que tener un archivo HTML (llamemosle KSLTestResults.html) con la siguiente estructura:

<html>
	<head>
		<title>Kata Simple List</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<link rel="stylesheet" type="text/css" href="https://raw.github.com/jquery/qunit/v1.6.0/qunit/qunit.css" media="all" />
		<script type="text/javascript" src="https://raw.github.com/jquery/qunit/v1.6.0/qunit/qunit.js"></script>
	</head>
	<body>
		<h1 id="qunit-header">QUnit example</h1>
		<h2 id="qunit-banner"></h2>
		<div id="qunit-testrunner-toolbar"></div>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>
		<div id="qunit-fixture">test markup, will be hidden</div>
	</body>
</html>
De las líneas 4 a 6 tenemos las referencias a jQuery y QUnit (yo estoy apuntando directamente a la versión 1.6.0, pero podría apuntarse a la última versión estable). Con esto ya tenemos listo el ambiente para comenzar a trabajar. Si abrimos el archivo KSLTestResults.html en un browser, debería levantar todo sin problemas, y verse más o menos así.

Obviamente, no ejecutó ningún test, porque aún no los programamos... sigamos con esa parte.

2. Agregando referencias a nuestro proyecto.

Como voy a crear las clases y los test que las validan en archivos separados, lo primero que hago es, al HTML anterior agregar las referencias a dichos archivos. Pensando en que estoy haciendo el ejercicio Kata Simple List, agrego referencias al archivo KSL.SKListTest.js y KSL.SKList.js. En cada archivo voy a tener los tests de mi Lista y la clase propiamente dicha. Agregamos antes de cerrar el tag head las siguientes dos líneas:

		<script type="text/javascript" src="KSL.SKList.js"></script>
		<script type="text/javascript" src="KSL.SKListTest.js"></script>
Con esto ya tenemos las referencias a donde tendremos nuestros tests y nuestra clase lista. Falta crear ambos archivos físicos en donde tenemos nuestra consola de QUnit (es decir, el archivo KSLTestResults.html)

3. Creando nuestro primer test.

Los tests deben ejecutarse luego de que el DOM del HTML esté cargado, por lo que por regla, vamos a meterlos siempre en el evento Ready de jQuery.

Solveet.com nos sugiere una serie de pruebas a efectuar a nuestra lista, siendo la primera list = List.new assert_nil(list.find("fred")) así que transcribiendo esto a javascript, en el archivo KSL.SKListTest.js nos queda esto:

$(document).ready(function(){
	module("Kata Simple List: BasicListTest");
	test( 'At new List, find "fred" return null.', function() {
		var list = new SKList();
		
		equal (list.find("fred"), null);
	} );
});
En la línea 2, creamos un "módulo" de QUnit, esto, es para agrupar tests de alguna manera, y es algo completamente opcional. La que yo elegí es todos los tests que sugiere Solveet, tomarlos como tests básicos para el problema de listas, así que los agrupo como "Kata Simple List: BasicListTest".
En la línea 3 indicamos que vamos a hacer un test. Para esto, usamos la función test indicandole como primer parámetro una descripción de lo que vamos a testear, y como segundo parámetro le pasamos una función a ejecutar. En esta función creamos un nuevo objeto SKList y luego, verificamos que si en dicho objeto buscamos "fred" nos debe devolver algo igual a null.

Si ahora vamos a nuestra consola, y la actualizamos, veremos que se ejecuta el test, pero que nos da un error. Así es como se ve la consola.

El error aparece en color rojo, y con una descripción que nos indica que es lo que está fallando, en este caso, SKList no está definido... lo cual es correcto, porque aún no hemos creado dicha clase. Ese, será el siguiente paso.

4. Haciendo que el test de verde.

Siguiendo con la regla de TDD, lo que debemos hacer es escribir el código mínimo para que dicho test pase la prueba. En primer lugar, debemos crear la clase SKList, y para esto, escribimos el siguiente código en el archivo KSL.SKList.js

function SKList() {
	return this;
}
Si ahora volvemos a ejecutar los tests, podemos comprobar que el error cambió.

Lo que está diciendo ahora, es que nuestra lista no tiene un método llamado find. Para esto, modificamos nuestra clase y le agregamos las siguientes líneas:

SKList.prototype.find = function(value) {
	return null;
}

De esta forma, creamos el método "find" que devuelve (por ahora) siempre null, y al volver a ejecutar los test podemos ver que ya no hay más errores. El test fue satisfactorio.

En el siguiente Post, vamos a ver como continuamos con esta Kata.

Acá les dejo los fuentes vistos en este post.