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.

Seminario sobre jQuery en el MUG

UPDATE 2011.09.27
Están disponibles los ejemplos que desarrollamos durante la charla acá
Y para verlos on-line desde acá

Finalmente el primer post en este nuevo blog es también una excelente noticia, después de casi un año y medio vuelvo a dar una charla en el Grupo de Usuarios de Microsoft de Argentina (MUG), en este caso será sobre nuestro framework de javascript favorito jQuery. La idea es presentarlo para los que escuchan por todos lados y nunca lo usaron todavía y para los que recién empiezan repasar y ver nuevas cosas.

Costo, lugar, fecha y hora.

La charla es totalmente gratuita, el lugar será en el Auditorio del MUG - Rivadavia 1479 1º A - Capital Federal.

La fecha es el lunes 26 de septiembre a partir de las 18:30hs hasta las 21:30hs.

image

Temario

El temario de la charla es el siguiente:

-HTML y DOM.
-Introducción a jQuery, filosofía, compatibilidad, separación de conceptos.
-Selectores, sintáxis, agrupamiento.
-Atributos, filtros, modificación.
-Manipulación, creación de elementos dinámicamente, edición.
-Eventos, asociación dinámica de eventos.
-Efectos.
-Ajax, llamadas Ajax, manipulación del objeto XMLHTTPRequest.
-Utilidades, serialización, plugins.
-Integración con ASP.NET MVC y Ajax, carga dinámica de elementos.
-jQuery UI.

Vamos charlar más o menos sobre los temas en función de el feedback que haya, por ejemplo al principio incluí HTML y DOM como un concepto de base que es indispensable, es esperable que todos los conozcan y en todo caso será cosa de un minuto, sino nos tomaremos 10 o los que sena necesarios.

La idea es al final comprender bien qué nos aporta el framework y sus ventajas, también qué es Ajax y cómo se facilita con jQuery.

Ejemplos y más ejemplo.

Por supuesto como hago siempre, vamos a ir desarrollando los ejemplos en el momento a partir de una idea y en caso de alguna duda puntual intentaremos resolverla.

Los espero. Leonardo.

Link de la charla; http://www.mug.org.ar/Eventos/3675.aspx
Registración http://www.mug.org.ar/registracion.aspx?idevento=3675

Nueva casa

A partir de hoy esta será la nueva casa para el blog, después de un buen tiempo en Blogger decidí que era momento de tener mi propio hosting y control total del blog, además de un lugar que soporte ASP.NET para poder publicar cosas del blog y otras yerbas.

Así que seguramente no pasará mucho hasta el primer post sobre nuestro querido C#. El viejo blog lo iré migrando hacia acá, no creo que migre todo, ya veremos, lo seguro es que permanecerá donde está, no tengo planes de darlo de baja.

Como siempre que se empieza algo nuevo uno trata de hacerlo mejor y más prolijo…no puedo prometer eso :) pero sí intentarlo, además de postear con mayor frecuencia.

Hasta pronto entonces, Leonardo.