QUnit es el framework de testing para Javascript creado por el equipo de jQuery. Explicaremos qué es y cómo usar QUnit y realizaremos diversos ejemplos de tests unitarios para entender esta librería.
En este artículo vamos a abordar QUnit, un framework de pruebas unitarias de Javascript que se caracteriza por su sencillez. Ideal para introducirse en el mundo de los tests unitarios, que forman parte del vivir diario de muchos profesionales en el área de ingeniería de software.
Qué es QUnit
La forma más sencilla de explicar QUnit sería la siguiente: un conjunto de herramientas para realizar las pruebas unitarias, fáciles de usar, para Javascript.
QUnit es usado por los proyectos JQuery, JQuery UI, JQuery Mobile y tambien es el framework de pruebas para EmberJS. Pero podemos usar QUnit para hacer pruebas unitarias en cualquier proyecto con código Javascript.
Se trata de un framework de pruebas robusto y con un gran alcance. Algunas de sus características más destacables son:
- Facilidad de uso, sin necesidad de configuración o setup para cualquier proyecto realizado con NodeJS y con una configuración mínima si estamos en proyectos para la web.
- Es universal, porque los tests funcionan en cualquier parte, dentro del navegador, en la plataforma Node o incluso en Web Workers. Puedes correr tus tests allí donde tu código se va a ejecutar.
- Además es extensible, ya que tienes la posibilidad de usar su API para crear asserts personalizados, runners y reportes personalizados, según tus necesidades.
Un poco de historia de QUnit
Esta fabulosa herramienta fue desarrollada por John Resig como parte del proyecto llamado JQuery. El framework funcionaba tan bien y era tan apropiado para Javascript que se independizó y ahora muchos la usan en sus desarrollos.
En 2008 QUnit tiene su propia casa, nombre y documentación del API, permitiéndoles además a otras personas usar sus propias herramientas de pruebas unitarias también. En aquel entonces, este framework tenía una gran dependencia de JQuery, pero después, en el año 2009, se hicieron cambios sustanciales y QUnit ya podía ejecutarse solo.
Instalación de QUnit
En el tema de instalación de esta herramienta hay una serie de tópicos que se deben tomar en cuenta, como por ejemplo que existen dos maneras de instalar QUnit en nuestros proyectos:
- Descargando el archivo Javascript.
- Instalado el paquete vía npm.
El tema de cómo instalarlo dependerá del punto de vista del desarrollador. Después de eso se debe crear un archivo de extensión .html en el cual se debe colocar el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>QUnit Testing</title>
<link rel="stylesheet" type="text/css" href="qunit.css">
</head>
<body>
<div id="qunit"></div>
<script type="text/javascript" src="qunit.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
Se observa los archivos “qunit.css” para los estilos, “qunit.js” que contiene el framework para las pruebas unitarias, lo particular es el fichero llamado “test.js” es donde yo en lo personal hago el código de las pruebas. Se procede a correr el archivo .html en el navegador de preferencia y listo.
Herramientas del framework de test QUnit
Todo buen framework de pruebas unitarias tiene características comunes y propias que lo diferencia de los demás o que lo hacen mejor desde el punto de vista de cada programador. En este artículo se explicarán dos de los muchos atributos que contiene este framework, y que además son sencillos para programadores poco experimentados.
- 'Assertions' o Afirmaciones.
- 'Grouping Test' o Agrupación de Pruebas.
A continuación vamos a explicar la definición de cada una con su respectivo ejemplo sencillo.
Assertions o Afirmaciones
Las afirmaciones son necesarias para cualquier framework o librería de pruebas unitarias, cualquier programador necesita saber la veracidad de los resultados esperados de su código, y QUnit no se queda atrás en este tema. Además provee tres tipos de afirmaciones o assertions, las cuales son:
- OK (verdadero,mensaje);
- equal (valor actual, valor esperado,mensaje);
- deepEqual (valor actual, valor esperado, mensaje);
El listado es pequeño y las definiciones de cada uno tienen su propio ejemplo.
ok():
El más sencillo solo tiene un resultado ya sea verdadero o falso y tiene la capacidad de desplegar un mensaje.
Ejemplo:
test("funciones basicas",function(){
var one = 2;
var two = 2;
ok( one == two, "Excelente");
});
Explicación:
Se verifica si ambas variables tienen el mismo valor.
equal():
Esta función permite la comparación de dos valores, cuando ambos valores concuerdan la prueba unitaria es completada satisfactoriamente de lo contrario falla y se presentan los dos valores. Además permite presentar un mensaje.
Ejemplo:
test("pruebas de afirmaciones",function(){
var password = "Hola Mundo";
var password2 = "Hola Mundo";
equal(password,password2,"Los password no son iguales");
});
Explicacion:
Verifica si ambos passwords son iguales; de no ser así se presenta el mensaje:
deepEqual():
Es una afirmación más estricta al momento de hacer comparaciones de datos primitivos u objetos, posee tres argumentos que son valor actual, valor esperado y mensaje.
Ejemplo:
test("Comparar datos",function(){
var valor1 = 1;
var valor2 = 1;
deepEqual(valor1,valor2,"Valores distintos");
});
Explicación:
Es una prueba unitaria donde se verifica si los valores son del mismo tipo de dato, en tal caso que uno de ellos fuera una cadena de caracteres la prueba no pasa.
strictEqual():
Es otro tipo de afirmación si deseamos ser más extremistas en la veracidad de los datos que estamos manipulando en nuestro proyecto, esta función verifica los datos al estilo “===” donde los tipos de datos deben ser del mismo género.
Ejemplo:
test("Cadenas y Numeros", function(){
var valor = 1
var valor2 = 1
strictEqual(valor,valor2,"No se pueden compa números con cadenas");
});
Explicación:
Al ver el ejemplo se puede observar las variables son de tipo entero y por ende la prueba unitaria es aplicada satisfactoriamente, pero en el caso que una de las variable tuviera el valor entre comillas, se presenta un error porque los datos no son del mismo género.
Existen más funciones que nos ayudan a poder pasar por pruebas unitarias nuestro código pero con las mencionadas es suficiente para aplicarlo a nuestros proyectos.
Testing Group o Agrupación de Pruebas
La agrupación de pruebas es una manera de segmentar el conjunto de tests que hemos realizado durante el desarrollo del proyecto, y este framework no se queda atrás en este tema.module():
Con esta función podemos agrupar las pruebas unitarias por medio de una descripción o característica que tengan las mismas.
Ejemplo:
module(" grupo post ");
test("primera prueba post",function(){
ok(true,"enviando post");
});
test("segundo prueba post",function(){
ok(true,"actualizando post");
});
module(" grupo get ");
test("primera prueba get",function(){
ok(true,"recibiendo get");
});
test("segundo prueba post",function(){
ok(true,"desplegando get");
});
Explicación:
Al observar cómo está estructurada la prueba unitaria, vemos dos módulos “grupo post” y “grupo get”, de esta manera se pueden clasificar nuestras pruebas unitarias dentro del proyecto. Un ejemplo sencillo para explicar el tema.
Con las características mencionadas de QUnit es muy sencillo que forme parte de nuestros proyectos y además aprenderlo nos ayuda como programadores o desarrolladores a poder tener un código íntegro y libre de muchos errores.
Conclusión sobre QUnit
Si buscas un framework sencillo para pruebas y robusto QUnit es una alternativa muy interesante, ya que no te complicará en nada dar los primeros pasos. La documentación que encuentras en el sitio de QUnit te ayudará bastante, porque es completa y clara.
Si estás acostumbrado a usar jQuery es una buena herramienta porque tiene un estilo de funcionamiento y codificación similares. Sin más que añadir: “Happy Testing”.