RSS Feed

Testeando con mocha y expect.js

4

marzo 4, 2012 by - @MatiasArriola

Este post no es para nada académico, ni busca explicar lo que es el unit testing, el TDD ni BDD; más que nada quería compartir mi experiencia usando estas bibliotecas por primera vez.

A la hora de probar en el client side/browser, ya había tenido un paso muy fugaz usando QUnit, pero después de escuchar hablar mucho de mocha, le dimos una oportunidad.
Junto con mocha, usamos expect.js para tener las assertions al mejor estilo BDD. Como resultado, los tests fueron mucho más expresivos y descriptivos.

El paso a paso para arrancar a usarlo:

1 – Escribir un archivo html que va a ser el encargado de correr los tests. Éste va a referenciar a los estilos y javascript de mocha, el javascript que contenga nuestro código, y el javascript que contenga las pruebas. También vamos a estar referenciando a expect.js (aunque no es requerido para usar mocha). Tal cual se describe en la documentación.

<html>
<head>
  <meta charset="utf-8">
  <title>Mocha Tests</title>
  <link rel="stylesheet" href="https://raw.github.com/visionmedia/mocha/master/mocha.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://raw.github.com/LearnBoost/expect.js/d2440da086bf8dc38c6085641f23b968a0f48b29/expect.js"></script>
  <script src="https://raw.github.com/visionmedia/mocha/master/mocha.js"></script>
  <script>mocha.setup('bdd') //acá definimos el estilo de los tests, otra opción válida es tdd</script>
  <script src="miImplementacion.js"></script>
  <script src="misTests.js"></script>
  <script>
    $(function () {
      mocha
        .run()
        .globals(['foo', 'bar']) // variables globales "aceptables"
    })
  </script>
</head>
<body>
  <div id="mocha"></div>
</body>
</html>

2 – Crear y editar los archivos que contienen los casos de prueba. En este caso, el archivo sería misTests.js

3 – Para ejecutar los tests y visualizar los resultados, abrir el archivo html del paso 1.

Para ilustrar un poco más cómo se pueden ver las pruebas, imaginemos que estamos desarrollando un juego y tenemos una clase Personaje que tiene un método para agregar un ítem a su inventario ( yo sé que les gusta el spanglish en el código ).

describe('Personaje', function(){
    describe('#pickUp()', function(){
        it('should have the ability to store the object in its items collection', function(){
            var something = new Item(),
                aDude = new Personaje('N/N');
            expect(aDude.items).to.be.empty();
            aDude.pickUp(something);
            expect(aDude.items).not.to.be.empty();
            expect(aDude.itmes).to.contain(something);
        });
        it('should not be able to pickUp the same thing twice', function(){
            var something = new Item(),
                aDude = new Personaje('N/N');
            expect(aDude.items).to.be.empty();
            aDude.pickUp(something);
            aDude.pickUp(something);
            expect(aDude.items.length).to.have.length(1);
        });
        // Podemos dejar tests sin implementar que van a reflejar requerimientos
        // o TODOs
        it('should throw an Error if the parameter is not an Item instance');

    });        
});​

Para ver la lista de assertions que tenemos disponible en expect-js, consultar la documentación. Las llamadas a describe e it que vemos en el código existen gracias a al setup(‘bdd’) que mencionamos antes en el html.
De la forma en que estructuro los tests en mi caso es de la siguiente:

describe('Clase o Módulo', function(){
    describe('#método()', function(){
        it('un aspecto que debe cumplir método', function(){
            // testearlo
        });
        it('otro requerimiento para el metodo');
    });
    describe('#otro método()', function(){
        it('debería hacer algo interesante...');
    });        
});​

Una vez que estén los tests escritos, abriendo el html seríamos capaces de ver los tests que pasaron, los que fallaron, y los que están pendientes.

En fin, lo que me es más novedoso acá es la forma de hacer las assertions + la forma bdd de diagramar los tests, gracias a lo que muchas veces, leer una prueba de éstas puede llegar a ser como leer un texto en inglés o español.

Comenten!

Links:
expect.js
mocha


  • http://twitter.com/AlejoNext Alejandro Ñext

    Puedes escribir un articulo de como poner una ejecución de moncha con un proyecto en expres :)

  • Persit

    Vaya, otro post igual…Posts como estos hay tropecientos, no aporta nada nuevo. Por que no te centras en cosas diferentes, por ejemplo explicar sobre que debe hacerse test y sobre que no en una funcionalidad concreta de un tipico proyecto, como deben mantenerse los tests en el futuro,… cosas algo más constructivas

    • pjnovas

      Persit, tené en cuenta que este post fue escrito el 4 de Marzo del 2012, hace año y medio, cuando Mocha y Expect eran relativamente nuevos …. dada esta primicia, el post fue para mostrar algo nuevo en ese entonces, no tenia como objetivo debatir sobre TDD o BDD o como testear casos específicos.

      Por otro lado, el blog está abierto a que cualquiera se registre y postee, te propongo armar un post con los puntos que marcas, estaría muy bueno para aportar a la comunidad y no solo criticar (los posts son aportes libres de y para las personas que están interesadas en ver y contar algo nuevo, una experiencia opinión o investigación)

      Saludos y gracias por el comentario.

    • matiasarriola

      Hola, perdón si me equivoco pero tu comentario me resulta un poco ofensivo.

      Primero que nada, en el primer renglón del artículo aclara lo que se trata, cosa de que no pierdas mas tiempo si no te interesa. Eso está claro.

      Segundo, que no te aporte nada a vos, no significa que no le vaya a aportar nada a otra persona. Está bien, podes mirar los docs y estás cubierto, pero bueno este es un espacio para la difusión de material en español, y además un lugar para la discusión o ponerse en contacto con otros desarrolladores de habla hispana.

      Tercero, esto se hace todo a pulmón. Sin nada a cambio. Acá nadie es un fenómeno sabelotodo.

      Cuarto, si querés, podés recomendar algún tema, muchas veces alguien se copó y posteó algo que era pedido en comentarios. Obviamente era pedido de buena manera. Siempre se aceptan comentarios, críticas, propuestas,… cosas algo más constructivas

      Quinto, lo que vos pedís es algo que es más que nada agnóstico de tecnología/lenguaje. Te dejo un link a un libro gratis en español que me parece muy bueno http://www.dirigidoportests.com/el-libro.

      Saludos, cualquier cosa me preguntás, seguiremos trabajando para hacer de esto algo mejor :)