Scriptia. Javascript y buenas prácticas en español



Scriptia / artículos / Pruebas unitarias con QUnit

Pruebas unitarias con QUnit

Saltar a Anotaciones relacionadas

Las pruebas unitarias (unit testing) son necesarias y convenientes, ya programes en Ruby, en PHP, en JavaScript o en Cuenca. En esta notita veremos cómo utilizar QUnit –la biblioteca creada para el testeo del núcleo de jQuery– para testear nuestros propios proyectos.

El documento base

Comencemos pues, por descargar QUnit y preparar un documento HTML con la siguiente estructura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>My Test Suite</title>
  <link rel="Stylesheet" media="screen" href="ruta/a/testsuite.css" />
  <script type="text/javascript" src="ruta/a/jquery.js"></script>
  <script type="text/javascript" src="ruta/a/testrunner.js"></script>

  <style type="text/css" media="screen">
  /* <![CDATA[ */
    #main {
      display: none;
    }
  /* ]]> */
  </style>
</head>

<body>
  <h1>My Test Suite</h1>
  <h2 id="banner"></h2>
  <h2 id="userAgent"></h2>

  <div id="main">
  </div>

  <ol id="tests"></ol>
</body>
</html>

El elemento con id="banner" es utilizado por QUnit para mostrar el resultado global de la ejecución de las pruebas. En id="userAgent" se muestra información relativa al navegador utilizado. La lista y el detalle de la ejecución de cada prueba se genera en id="tests".

En caso de disponer de Firebug, QUnit volcará abundante y útil información en la consola.

Si necesitamos un fragmento de HTML para la ejecución de las pruebas, lo incluiremos en id="main". Ojo: antes de la ejecución de cada test se devuelve el contenido de este elemento a su estado inicial, esto es, no se mantienen los eventos asignados ni las modificaciones realizadas sobre el árbol en tests anteriores.

Nuestro primer test

Al ajo. La ejecución de una prueba implica una llamada a la función test, pasando como parámetros una cadena identificativa y la referencia a una función en la que se realizan las comprobaciones (aserciones).

La más sencilla de las comprobaciones es ok. Si el parámetro que recibe evalúa a true, el resultado se considera satisfactorio.

Poniendo los dos últimos párrafos en código:

test('Prueba minimalista', function(){
  ok(1, 'mi mensajito');
});

Incorpora esas líneas a tu documento de pruebas (dentro de un elemento SCRIPT) y échale un vistazo en el navegador. ¿Todo bien?

Comprobaciones varias

Por supuesto disponemos de otros métodos de comprobación de resultados, estos son los fundamentales:

equals(unArgumento, otroArgumento, mensaje)
Comprueba la igualdad de dos argumentos primitivos.
isSet(unArray, otroArray, mensaje)
Comprueba que dos arrays tienen el mismo contenido.
isObject(unObjeto, otroObjeto, mensaje)
Comprueba que dos objetos tienen los mismos valores asignados a las mismas propiedades.

Módulos

Si utilizamos el mismo documento para probar distintas partes de nuestra biblioteca podemos utilizar la función module para dar nombre a las secciones de la suite.

module('Widget de votaciones');
test('tras la inicialización'), function() {
  // inicializamos un widget, etc.
  equals($('a.rate', widget).length, 5, 'contiene 5 estrellicas');
});

test('etcetera', function() {
  // otro test por aquí
});

Expectaciones

Todo lo que puede fallar, falla (de hecho, si practicas el desarrollo basado en pruebas, lo primero que debería hacer cada test es fallar). Para indicar el total de comprobaciones que se realizarán en una prueba, utilizamos la función expect.

module('expectaciones');
test('un test', function() {
  expect(3);
  ok(1, 'una');
  equals(1 + 1, 2, 'dos');
  equals(calculoCasiImposible(), 42, 'y tres');
});

De esta manera, si la ejecución de calculoCasiImposible (la tercera comprobación) falla estrepitosamente, la prueba no se da por buena.

Asincronía y pausas

Si realizamos peticiones asíncronas en nuestros tests, necesitaremos detener la ejecución de la serie y reanudarla cuando convenga. Los métodos stop y start hacen lo que su nombre parece indicar.

module('asincronía');
test('con pausa', function() {
  expect(2);
  ok(1, 'una');
  function my_callback(response, status) {
    start();
    equals(response, '1', 'el servidor devuelve lo que toca');
  }
  // detenemos la ejecución de las pruebas
  stop();
  // lanzamos una petición Ajax
  $.get(some_url, my_callback);
});

Si quieres empaparte de pruebas escritas con y para QUnit, lo mejor es que descargues una una release completa de jQuery y bucees en sus entrañas.

Y esto ha sido todo. La semana que viene más y más sexy (si cabe).



Un comentario RSS

1 jShoulda y JsUnitTest, pruebas unitarias en JavaScript al estilo Shoulda - Scriptia (2008-10-11 @ 5:57 pm):

[...] el otro día de QUnit, hoy hablaremos de JsUnitTest –otro sistema de testing– y de jShoulda, una capa de abstracción [...]


Acerca de Scriptia

Saltar a la caja de búsqueda

Scriptia forma parte del PDM de Choan C. Gálvez, desarrollador web residente en Barcelona. Scriptia pretende mejorar la calidad de la documentación acerca de javascript disponible en español.