Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

QUnit pruebas unitarias en javascript

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

image

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

image

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;
}

image

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.

Comments (2) -

  • leonardo

    9/13/2011 10:06:17 AM | Reply

    Gracias José, si, desde que hago Unit testing en Javascript soy más feliz ;)
    La idea es integrar todo, lo próximo son los test de aceptación, estoy trabajando en eso por estos días, así que seguramente se vendrá un post al respecto.
    No creo que necesites propaganda, por el contrario tu comentario le da prestigio a este blog Smile
    salute!

Loading