A medida que las aplicaciones son cada vez más “web 2” con Ajax y todas esas cosas nos encontramos con código javascript que necesitamos probar ya que toma cada vez más relevancia en nuestro negocio.
QUnit
QUnit es un framework de unit testing para javascript como otros, pero tiene una particularidad: es el utilizado en el core de jQuery por lo tanto parece natural usarlo si éste es nuestro framework de javascript preferido.
Manos a la obra
Para utilizar QUnit no necesitamos mucho, dos cosas en realidad, un archivo js con todo el código y una hoja de estilos, podemos encontrar el enlace para descargar ambos acá
Vamos a hacer un ejemplo paso a paso al estilo TDD porque antes que nada somos hombres
Configurando para usar QUnit
Bien, antes que nada tenemos que armar una página para contener los test, es necesario contar con algunos elementos en la misma para que QUnit pueda mostrarnos los resultados y demás y una hoja de estilos que viene incluída, entonces nuestra página inicial sería así:
<html>
<head><title>Test números complejos</title>
<link rel="stylesheet" href="js/qunit.css" type="text/css" media="screen">
<script src="js/qunit.js" type="text/javascript" /></script>
<script type="text/javascript" >
</script>
</head>
<body>
<h1 id="qunit-header">Test Suite</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</div>
<body>
</html>
Ahora empecemos con lo entretenidos, plantenado nuestro primer test
Primer test sumar dos números
Para indicar que vamos a hacer un test usamos la función test() de QUnit la misma recibe dos parámetros
- El nombre del test
- La función que se ejecuta cuando se corre el test
Por ejemplo
test("sumar", function()
{
//configuraciones
//ejecución
//verificaciones
}
Lo interesante de hacer TDD es que vamos a escribir lo que queremos que pase antes de que exista, es decir, primero invocamos a los métodos y escribimos el resultado esperado antes de implementar el código, en el caso de la suma sería así:
<html>
<head><title>Test números complejos</title>
<link rel="stylesheet" href="js/qunit.css" type="text/css" media="screen">
<script src="js/qunit.js" type="text/javascript" /></script>
<script type="text/javascript" >
test("sumar", function()
{
var a = 1;
var b = 4;
var r = Sumar(a,b);
equal(r,5);
});
</script>
</head>
<body>
<h1 id="qunit-header">Test Suite</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</div>
<body>
</html>
Abrimos la página con el navegador y vemos que el test falla porque no existe la función Sumar
Entonces vamos a implementarla, avanzando con pasos pequeños primero simplemente la definimos pero no hacemos que cumpla su funcionalidad
test("sumar", function()
{
var a = 1;
var b = 4;
var r = Sumar(a,b);
equal(r,5);
});
function Sumar(a,b)
{
return 0;
}
Corremos nuevamente el test y falla nuevamente pero esta vez porque el resultado no es el esperado
Como vemos qUnit nos indica que el resultado obtenido es diferente al esperado, entonces implementamos el código correcto
function Sumar(a,b)
{
return a + b;
}
Y listo, tenemos implementado el código correcto con un bonito test que lo verifica.
La idea detrás de todo esto
La idea de hacer TDD es descubrir el diseño a partir del uso ya que plantear las pruebas nos permite “usar” el código y de esta manera logramos lo siguiente:
- Diseño emergente a partir del uso.
- Nos hacemos un grupo de pruebas que podemos volver a correr luego, cuando agreguemos funcionalidad o cuando mejoremos el código
- Sirve como ejemplo de utilización del código
- Entonces si podemos automatizar el grupo de test para ejecutarlo durante un build la felicidad está a un paso..o casi.
El video
Por último dejo un ejemplo más complejo en un video con varios test y refactor. Hasta la próxima.
Leonardo.