Cuando queremos implementar test en nuestras aplicaciones, a veces nos encontramos con la difícil tarea de testear funciones que tienen que ver con el DOM. Al ser funciones que dependen de la acción del usuario, tenemos que simular de alguna manera que un usuario ficticio está interactuando. Esto se puede hacer de varias maneras:
- con un test EndToEnd, que usan frameworks capaces de simular a los navegadores reales y puedes ver, como de si de un video se tratara, cómo se va moviendo y haciendo clicks, etc., que veremos más adelante, o..
- con test que generan un DOM “de mentira”, a través de plantillas, que es el que vamos a ver ahora.
Cargamos la plantilla
Para empezar a testear el DOM, necesitamos cargar nuestra plantilla, por ejemplo así:
Aquí vemos que se usa el fs (el módulo File System de Node.js) que tiene varias utilidades.
Por un lado, vamos a definir un path, que nos va a interpretar la ruta de nuestra plantilla de html:
const path = require(‘path’);Por otro lado, definimos una función loadTemplate que lo que hace es recibir como parámetro una ruta (filepath) y una función que carga datos. Aquí vemos que llamamos a un método de fs que lo que hace es interpretar la ruta marcada del archivo (la que entra como parámetro) y que además tiene otro parámetro que es un callback, que nos va a permitir cargar nuestra plantilla (si todo va bien) o mostrarnos un error (si algo fallara).
Ahora lo aplicamos así en nuestro test:
Manejar la asincronía
En la anterior función podemos observar un elemento que es lo que nos va a permitir la asincronía.
Los test suelen tener varias herramientas útiles, por ejemplo, al método beforeEach o it, se le puede introducir un parámetro, que puedes llamar como quieras, pero que se suele llamar por convención “done”. Ese parámetro no es más que un callback que le indica al test que es el final y, por lo tanto, lo ejecutamos al final de nuestra función (observar la imagen de más arriba). Lo usamos por ejemplo, en este caso, para esperar a que se nos haya cargado la plantilla y nuestra aplicación, antes de ejecutar ningún test.
De este modo conseguimos controlar que no se ejecuten los test sin haberse cargado los elementos del DOM.
Esta manera de controlar la asincronía es bastante difícil de entender y hay otros métodos que son más intuitivos y que veremos más adelante, como el async await.
