¿Por qué TDD con Qunit?
A veces nos pasa que tenemos código Javascript muy complejo, y nos da “miedo” tocarlo. Para salvar esta situación podemos combinar 2 herramientas: modularización de código y test unitario. [Inserte link a un futuro post acerca de modularización de código aquí]. Para fines didácticos vamos a suponer que tenemos nuestro código Javascript separado en 3 capas:
- Presentación o código que interactúa con el html
- Lógica de negocio
- Acceso a datos (si fuera necesaria)
Lo que nos interesa probar en este caso es la capa de la lógica de negocio. Para testear vamos a valernos de Qunit. ¿Por qué elegí esta herramienta? Fue la que más simple de configurar me resultó y pude probar mi código fácilmente. En otras palabras, me dió ROI inmediato. [Nuevamente, inserte link a futuro post explicando este concepto…]
Configuración básica
El sitio oficial https://qunitjs.com/ muestra un ejemplo de la configuración minima que necesitamos. Se basa en un archivo HTML que incluye los test y los ejecutaremos en el navegador:
- Archivo JS de la libreria Qunit
- Hoja de estilos de QUnit
- Archivo JS con los tests
- Archivos JS con nuestro código productivo.
- Archivo HTML que incluya los archivos de los puntos anteriores.
La calculadora con TDD
Vamos a verlo un poco más en detalle, usando como ejemplo una calculadora simple. Por el momento nuestra calculadora solo sabrá sumar:
- suma
- recibe 2 números enteros. retorna la suma de ambos números.
- si alguno de los parámetros no corresponde el formato, lanza un mensaje de error.
Para empezar, creemos un HTML con el siguiente contenido:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Calculadora</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div>TODO write content</div> </body> </html> |
El anterior html incluye el js y css de qunit, además de unos divs en los que se mostrarán nuestros tests.
Creemos el archivo tests.js y pongámosle el siguiente contenido:
|
1 2 3 4 5 |
QUnit.test( "hello test", function( assert ) { assert.ok( 1 == "1", "Passed!" ); }); |
En este archivo podemos notar que llamamos a la función “test” de Qunit, que recibe un string con el caso de test y una función, que es la ejecución del caso de test propiamente dicho. Dentro de ese test, disponemos del objeto assert, el cual nos brinda todas las aserciones que necesitamos.
Ejecutemos el html que creamos, y deberíamos ver una hermosa pantalla de Qunit indicándonos que el test acaba de pasar. Felicitaciones, tenemos el primer test dummy con Qunit!
Ahora si, vamos a escribir un test para nuestra calculadora! En tests.js pongamos:
|
1 2 3 4 5 6 7 8 |
QUnit.test("calculadora.sumar, con dos numeros enteros, retorna la suma de ambos", function (assert) { var resultado = calculadora.sumar(1, 2); assert.equal(3, resultado); }); |
Ejecutemos los tests. Deberían fallar porque nuestra calculadora no está definida todavía. (nos va a dar un error del estilo ReferenceError: calculadora is not defined)
Creemos un nuevo archivo llamado calculadora.js e importémoslo en nuestro HTML:
|
1 2 3 4 5 6 7 8 9 10 11 |
var calculadora = (function () { function sumar(unNumero, otroNumero) { if (isNaN(unNumero) || (isNaN(otroNumero))) { throw "El metodo espera 2 numeros enteros"; } return unNumero + otroNumero; } return{ sumar: sumar }; })(); |
Si volvemos a ejecutar los tests, nos va a dar un error asi:
Obvio! porque nuestra calculadora no retorna nada!!! Hagámosla andar:
|
1 2 3 4 5 |
function sumar(unNumero, otroNumero) { return unNumero + otroNumero; } |
Ejecutemos los tests nuevamente, y Eureka! vamos a tener nuestro primer test en verde.
Ahora vamos a agregar otro caso de test. Esta vez queremos probar que si le mandamos cualquier parámetro no permitido a nuestra calculadora, esta nos va a dar un mensaje de error descriptivo. (en forma de excepción). ¿Cómo probamos que el método nos dió una excepción? assert tiene un método throws, que nos sirve para esto. Nuestro nuevo test quedará así:
|
1 2 3 4 5 6 7 8 9 10 11 |
QUnit.test("calculadora.sumar, con algun parametro mal, lanza error", function (assert) { var mensajeEsperado = "El metodo espera 2 numeros enteros"; assert.throws(function () { calculadora.sumar("aa", 2); }, mensajeEsperado); assert.throws(function () { calculadora.sumar(2, "2a"); }, mensajeEsperado); }); |
Ojo! Prestemos atención a como verificamos que calculadora.sumar arroja una excepcion: usamos la función throws, que recibe una función que “envuelve” la ejecución de la función que queremos probar.
En este punto tendremos un test fallando. Solo nos resta dejarlo en verde:
|
1 2 3 4 5 6 7 8 |
function sumar(unNumero, otroNumero) { if (isNaN(unNumero) || (isNaN(otroNumero))) { throw "El metodo espera 2 numeros enteros"; } return unNumero + otroNumero; } |
Palabras finales…
En este repositorio pueden encontrar el proyecto resuelto.
Les recomiendo tambien un post que encontré, que da un poco más de detalle y ejemplos del api:
http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/01/15/getting-started-with-javascript-unit-testing-using-qunit.aspx