QUnit es un framework de testing de Javascript muy parecido a JUnit o Nunit, que nos facilita las pruebas de nuestras aplicaciones javascript, QUnit fue desarrollado por el equipo de jQuery para realizar el testing.

QUnit es facil, rapido y funcional, en las siguientes lineas explicare como realizar un test básico y organizarlo en módulos.

Configurando QUnit

Para configurar QUnit podemos instalarlo mediante bower o cualquier gestor de paquetes.

bower install qunit

Con QUnit instalado hacemos referencia a los archivos qunit.js y qunit.css en nuestro archivo html.

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
 <title>QUnit</title>
 <script src=”bower_components/qunit/qunit/qunit.js”></script>
 <link rel=”stylesheet” href=”bower_components/qunit/qunit/qunit.css”>
 <script src=”Test/tests.js”></script>
</head>
<body><div id=”qunit”></div>
 <div id=”qunit-fixture”>
 </div> 
</body>
</html>

Ahora creamos nuestro Javascript que incluye el test, ejemplo tests.js para este ejemplo usaremos el assertion ok.

//definimos el test con un nombre
test(“my first test”,function(){
 ok(1,”ok works”);
});

QUnit posee diferentes Assertions para conocer mas sobre los diferentes tipos, podemos visitar la api oficial http://api.qunitjs.com/category/assert/.

quni1Resultados de nuestro test.
Cuando organizamos nuestro código a nivel físico lo realizamos por carpetas y archivos este ejemplo he creado una carpeta Test que incluye la estructura similar a mi aplicación.

QUnit nos permite estructurar nuestro test por módulos, la razón de los módulos es agrupar un grupo de test bajo un mismo nombre o “tag”.

los módulos poseen dos callbacks “beforeEach y afterEach”, beforeEach se ejecuta al inicio de nuestro modulo, y before al finalizar, estas funciones nos facilitan configurar objetos, asignar para ser utilizados en nuestros test.

Ejemplo:

module( “jugadores module”, {
 beforeEach: function() {
 this.jugadores = [ “dany”, “lebron”, “curry” ];
 },
 afterEach: function(){
}
});
test(“Total de jugadores”,function(){
equal(this.jugadores.length,3,”son igual a 3");
});

test(“viene el jugador dany”,function(){
 equal(this.jugadores[0],”dany”,”dany viene”);
});

module(“equipo module”);
test(“tamaño del nombre de equipo cavs”,function(){
 equal(“cavs”.length,4,”es cuatro”);
});

El resultado es el siguiente:

QUnit
Happy Testing!