Introducción

Continuamos con nuestra revisión de testing moderno tras haber visto cómo trabajar tanto con código asíncrono como con los métodos privados que podríamos encontrar en nuestra aplicación.

En esta ocasión, retomamos nuestra arquitectura MVVM para analizar cómo organizaríamos nuestras pruebas con el fin de cubrir la mayor parte de código posible. En relación a esto, habría que resaltar que testear cada capa de una arquitectura modelo-vista/vista-modelo resulta trivial: únicamente se trata de ir escribiendo los tests necesarios que comprueban aquellas funcionalidades que necesitamos implementar. No obstante, existen algunas recomendaciones concretas que pueden aplicarse a diversos aspectos de Backbone que es conveniente conocer.

Pero las pruebas que vamos a ver no se limitan únicamente a estas aplicaciones más complejas: resultan fundamentales también para pequeños desarrollos habituales como por ejemplo plugins de jQuery o cualquier funcionalidad de nuestra aplicación que termine pintando algo en pantalla. Básicamente se trata del mismo ‘concepto’: coger datos de algún sitio, procesarlos y enviar algo a la pantalla. Los tests unitarios en este escenario nos ayudan a comprobar que realmente estamos generando aquello que esperamos, y que no se rompe nada por el camino.

Veamos cómo conseguir esto:

Testeando la integridad de los objetos

Cuando en un framework como Backbone tratamos con vistas, una de las primeras pruebas que podríamos realizar es la de propia integridad del sistema: es frecuente utilizar la convención de que un determinado método, como en este caso sería el ‘render’, dé como resultado el mismo objeto (en Backbone sería la propia vista) para así permitirnos encadenar otros métodos. Es algo similar a lo que hacen otras muchas bibliotecas, como jQuery, donde cada método suele devolver al mismo objeto permitiendo así realizar varias acciones facilitando la sintaxis:

// jQuery Chaining
$( '#myDiv' ).find( '#myInput' ).addClass( 'selected' ).val( '' ).focus();

Este comportamiento, que como indicamos es común en Javascript, y que nos permite trabajar con un API dinámico y muy cómo puede (y debería) comprobarse fácilmente en nuestros desarrollos mediante un test. Un ejemplo podría ser el siguiente:

describe( "Testing a view", function() {
    beforeEach( function () {
        this.item = new app.myMethod();
    } );
 
  it( "render() should return the view object", function () {
    this.item.render().should.equal( this.item );
  } );
} );

Como podemos ver, en el test se ha realizado una comprobación aparentemente trivial e innecesaria que viene a significar lo descrito anteriormente: comprobar que el método render aplicado sobre un objeto, devuelve el mismo objeto. Si estamos trabajando sobre una biblioteca o framework de tipo jQuery, una prueba como la anterior también es válida para ese encadenado.

Comprobando cambios en el DOM

Una vez que tenemos la seguridad de que nuestro objeto principal permanece íntegro, podemos profundizar con pruebas sobre su contenido, concretamente sobre el tipo de elemento que generan. Backbone, por ejemplo, cuando trabajamos sobre el método ‘render‘ de una vista, genera a su vez un elemento llamado ‘el‘ que posee sus propias funciones/utilidades. Si tenemos en cuenta que dentro de un MV*, la capa de la vista es la encargada de generar ‘algo‘ en el DOM, una nueva comprobación trivial sería el verificar que realmente obtenemos el nodo, componente o estructura que esperamos.

Este tipo de pruebas, como venimos comentando, también puede efectuarse sobre aplicaciones donde generamos elementos DOM de forma programática usando Javascript estándar, jQuery, Underscore o cualquier otra biblioteca.

it( "searching for a node in a render unit test ", function () {
    this.item.render().el.nodeName.should.equal( "LI" );
} );

En el ejemplo anterior, estamos comprobando que el método render devuelve un nodo de tipo ‘elemento de lista’ (

it( "testing a new node for DOM", function () {
    var box = $( '<div />' );
    box[0].nodeName.should.equal( "DIV" );
} );

describe( "Using jQuery for testing a render", function () {
    beforeEach( function () {
        this.item = new app.myMethod();
    } );
 
    describe( "Template", function() {
        beforeEach( function () {
            this.item.render();
        } );
 
        it( "should contain a custom text", function () {
            this.item.$el.text().should.have.string( "Hello World" );
        } );
 
        it("should include an anchor", function () {
            this.item.$el.find( "a" ).should.have.length( 1 );
        } );
 
        it( "should include an <input> checkbox", function () {
           this.item.$el.find( "label > input[type='checkbox']" ).should.have.length( 1 );
        } );
 
        it( "should be clear by default", function () {
            this.item.$el.find( "label > input[type='checkbox']" ).is( ":checked" ).should.be.false;
        } );
    } );
} );

app.myMethod = Backbone.View.extend( {
    tagName: "li",
    template: _.template(
        /* The markup with anchor, inputs, etc... */
    ),
    render: function () {
        this.$el.html( this.template() );
        return this;
    }
} );