TypeScript / jsdom

Bienvenidos sean a este post, hoy veremos como realizar tests pero sobre HTML.

Esto nos lo permite justamente la libreria del titulo, dado que no es un navegador sino una libreria que permite implementar la API DOM de Javascript y por lo tanto podemos simular toda la experiencia de un navegador. Esto nos provee dos beneficios: el primero es su velocidad, y el segundo es que no necesitamos un entorno para correr el navegador. Tengamos en cuenta que para crear un entorno real de navegador necesitaremos una computadora y una pantalla. Y por mas que lo utilicemos en una virtual, estaa debera tener asignada una pantalla y que a su vez posea una resolucion optima para nuestros tests.

Vamos a aplicarlo para ver como trabaja y para ello necesitaremos el proyecto que creaamos en este post, sino lo poseen les dejo un link para descargarlo:

Simplemente extraigan el directorio en el PC y esta listo para ser utilizado. Deben ingresar al directorio y ejecutar el siguiente comando:

$ npm install jsdom --save-dev

Este sera para instalar a la libreria, la opcion –save-dev es para que se instale en la seccion de desarrollo, y una vez finalizado debemos ejecutar el siguiente:

$ npm install jquery

Este sera para instalar la libreria de jQuery y podamos usarla. Nuestro ultimo comando sera el siguiente:

$ npm install @types/jsdom @types/jquery --save-dev

Esto nos instalara los archivos de declaracion de las librerias instaladas. Lo siguiente sera ejecutar este comando:

$ npm install jest-environment-jsdom --save-dev

Este nos servira para instalar el entorno de jsdom porque este ya no se instala mas automaticamente. Por ultimo debemos realizar una ultima modificacion, para ello debemos ir a jest.config.js y buscar la siguiente linea:

testEnvironment: 'node',

Y modificarla de la siguiente manera:

testEnvironment: 'jsdom',

Con esto estableceremos nuestro nuevo entorno de test. Ya tenemos nuestra base para realizar estos tests, para ello iremos a hola.spec.ts y modificaremos el codigo de la siguiente manera:

import $ from "jquery";

function setDivTest(t: string) {
        $('#div_test').html('<p>' + t + '</p>');
}

it('debe pasar texto al div',() => {
        document.body.innerHTML ='<div id="div_test"></div>';
        let elementoHtml = $('#div_test');
        expect(elementoHtml.length).toBeGreaterThan(0);
        setDivTest("Hola, Mundo");
        expect(elementoHtml.html()).toContain("Hola, Mundo");
});

Lo primero que haremos sera importar al selector de jQuery. La funcion sera para pasar texto a un div, para ello usaremos al selector, le diremos que busque el elemento con ese id y luego mediante html le agregaremos el texto que le pasamos como argumento.

El test tomara el cuerpo y agregara el div identificado como div_test mediante innerHTML. Lo siguiente es crear un objeto que almacenara la seleccion del div creado. Luego aplicaremos el primer expect pero a la longitud del objeto anterior y chequearemos si este es mayor a 0. Despues con la funcion definida anteriormente le agregamos un texto al div. Volvemos a aplicar el expect sobre el objeto que almacena la seleccion y le aplicamos la funcion html para obtener el contenido de este div y le aplicamos un toContain para verificar si contiene el texto que le pasamos como argumento. Probemos para ver como funciona este test:

$ npm test

> testing@1.0.0 test
> jest

 PASS  ./hola.spec.ts (7.997 s)
  ✓ debe pasar texto al div (68 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        17.441 s, estimated 65 s
Ran all test suites.
$

En este caso ya sabiamos que iba a funcionar porque el primer test sabemos que es mayor a 0 y en el segundo test ocurre lo mismo porque antes agregamos el texto a verificar. Esto es un test basico pero nosotros vinimos a trabajar con eventos DOM. Pero que es un evento DOM? son basicamente los eventos que efectuamos en una pagina como pueden ser click, select, load, etc. y estas son asociadas a una funcion javascript. La libreria jsdom nos permite analizar los tags de script y ejecutar sus funciones. Vamos a analizar un ejemplo pero para alla primero debemos modificar nuevamente el entorno. Por lo tanto, iremos nuevamente al jest.config.js y modificaremos la linea del entorno de la siguiente manera:

testEnvironment: 'node',

Basicamente, volvimos a establecer el entorno como node. Con esto realizado vamos nuevamente a hola.spec.ts y modificaremos el codigo de la siguiente manera:

import { JSDOM }  from "jsdom";

describe("test_html", () => {
  const clickEnHtml = '<body>' +
          '<script type="text/javascript">' +
          'function clickeao() { console.log("se hizo click"); }' +
          '</script>' +
          '<div id="clickeable" onclick="clickeao()">' +
          'Click en esta!</div>' +
          '</body>';

  it("debe activarse con el evento click", () => {
        let dom = new JSDOM(clickEnHtml, { runScripts: "dangerously" });
        let manejador = <HTMLElement>
                dom.window.document.querySelector("#clickeable");
        let espiaClick = jest.spyOn(manejador, "click");
        manejador.click();
        expect(espiaClick).toHaveBeenCalled();
  });
});

Primero importaremos la clase JSDOM desde la libreria jsdom. Tenemos un grupo donde primero definiremos una constante que contendra un bloque de body para la pagina. En este tendremos un tag de script con una funcion para cuando hagamos click. Tambien agregaremos un div con el evento onclick que llama a la funcion anterior.

Lo siguiente es el test y aqui primero definiremos un objeto de la clase que importamos. En el primer argumento pasaremos el cuerpo del html, la constante anterior, y luego una propiedad que se encarga de poder ejecutar todas las acciones en la pagina para habilitar los eventos, sin esta opcion no haria nada. Lo siguiente es un objeto que almacena el resultado de utilizar al seleccionador de jQuery y en este caso la aplicamos al objeto identificado como clickeable. Despues crearemos un objeto donde «espiaremos» al objeto anterior y le pasamos el evento click, sobre esta funcion hablamos en este post, y luego usamos la funcion click sobre el objeto que seleccionamos. Por ultimo haremos el test donde pasamos el objeto que usamos para espiar y esa funcion para saber si fue llamada. Probemos para ver como es su salida:

$ npm test

> testing@1.0.0 test
> jest

  console.log
    se hizo click

      at VirtualConsole.onMethodCall (node_modules/jsdom/lib/jsdom/virtual-console.js:22:29)

 PASS  ./hola.spec.ts (93.603 s)
  test_html
    ✓ debe activarse con el evento click (1770 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        95.083 s
Ran all test suites.
$

Como era de suponer pasamos el test, primero vean que se realizo el click y disparo el evento por lo tanto al momento de usar toHaveBeenCalled nos informo que todo se realizo con exito. Esta es una forma muy practica de poder testear los distintos eventos en nuestra pagina, para verificar que toda la experiencia al usuario funcionara correctamente sin necesidad de tener que tener un PC o una virtual con una pantalla para verificar su funcionamiento. Antes de finalizar les dejo un link con todos los archivos utilizados y modificados en este post:

En resumen, hoy hemos visto jsdom, que es, para que sirve, como se utiliza, un ejemplo practico para verlo en accion con una pagina simple y jQuery, en el siguiente caso vimos un ejemplo para aplicar eventos DOM y como manejarlos. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.