La pirámide de pruebas de front-end: cómo repensar sus pruebas

Si está probando aplicaciones front-end, debe conocer la pirámide de prueba front-end.

En este artículo, veremos qué es la pirámide de prueba front-end y cómo usarla para crear conjuntos de pruebas completos.

La pirámide de prueba frontal

La pirámide de prueba de front-end es una representación de cómo debe estructurarse un conjunto de pruebas de front-end.

El conjunto de pruebas ideal se compone de pruebas unitarias, algunas pruebas de instantáneas y algunas pruebas de extremo a extremo (e2e).

La pirámide de prueba frontal

Esta es una versión renovada de la pirámide de prueba, específica para probar aplicaciones front-end.

En este artículo veremos cómo se ve cada uno de estos tipos de prueba. Para hacer eso, crearemos un conjunto de pruebas para una aplicación de ejemplo.

La aplicación

Para obtener información detallada sobre la pirámide de prueba de front-end, veremos cómo probar una aplicación web.

La aplicación es una aplicación modal simple. Al hacer clic en un botón se abre un modal, y al hacer clic en un botón Aceptar en el modal se cierra el modal.

La aplicación terminada

Construiremos la aplicación desde un marco basado en componentes. No se preocupe por los detalles: vamos a mantener este alto nivel.

La aplicación está hecha de tres componentes: un componente de botón, un componente modal y un componente de aplicación.

Las primeras pruebas que escribiremos son pruebas unitarias. En la pirámide de prueba de front-end, la mayor parte de nuestras pruebas son pruebas unitarias.

Pruebas unitarias

Las pruebas unitarias prueban las unidades de una base de código.

Llaman a funciones, o unidades, directamente y se aseguran de que devuelvan el resultado correcto.

En nuestra aplicación, nuestros componentes son unidades. Entonces escribiremos pruebas unitarias para Button y Modal. No es necesario escribir pruebas para nuestro componente de la aplicación porque no tiene ninguna lógica.

Las pruebas unitarias someterán a los componentes de representación superficial y afirmarán que se comportan correctamente cuando interactuamos con ellos.

El renderizado superficial significa que renderizamos el componente a un nivel de profundidad. De esta manera, podemos asegurarnos de que solo estamos probando el componente, nuestra unidad y no un componente secundario varios niveles por debajo.

En nuestras pruebas, activaremos acciones en los componentes y verificaremos que los componentes se comporten como se esperaba.

No miraremos el código. Pero las especificaciones para nuestros componentes se ven así:

  • Modal tiene clase activa cuando displayModal es verdadero
  • Modal no tiene clase activa cuando displayModal es falso
  • Modal llama a alternar Modal cuando se hace clic en el botón de éxito
  • Las llamadas modales alternan Modal cuando se hace clic en el botón Eliminar
  • El botón llama al modo de alternar cuando se hace clic en el botón

Nuestras pruebas renderizarán los componentes de manera superficial y luego verificarán que cada una de las especificaciones funciona.

Hay algunas razones por las que las pruebas unitarias deberían constituir la mayor parte de nuestro conjunto de pruebas:

Las pruebas unitarias son rápidas.

Un conjunto de cientos de pruebas unitarias se ejecuta en unos segundos.

Esto hace que las pruebas unitarias sean útiles para el desarrollo. Al refactorizar el código, podemos cambiar el código y ejecutar las pruebas unitarias para verificar que los cambios no rompan el componente. En unos segundos sabremos si rompimos algo, porque una de las pruebas fallará.

Las pruebas unitarias son granulares

En otras palabras, son muy específicos.

Si una prueba unitaria falla, la prueba interrumpida nos dirá cómo y por qué está fallando.

Las pruebas unitarias son buenas para verificar los detalles finos de cómo funciona nuestra aplicación. Son la mejor herramienta para usar cuando se desarrolla, especialmente si sigue un desarrollo basado en pruebas.

Pero no pueden probar todo.

Para asegurarnos de que presentamos el estilo correcto, necesitamos usar pruebas de instantáneas.

Pruebas de instantáneas

Las pruebas de instantáneas son pruebas que toman una imagen de su componente renderizado y la comparan con una imagen anterior de su componente.

La mejor manera de escribir pruebas de instantáneas en JavaScript es con Jest.

En lugar de tomar una fotografía del componente renderizado, Jest toma una instantánea del marcado del componente renderizado. Esto hace que las pruebas de instantáneas de Jest sean mucho más rápidas que las pruebas de instantáneas tradicionales.

Para registrar una prueba de instantánea en Jest, debe agregar algo como el código a continuación:

constderedMarkup = renderToString (ModalComponent)
esperar (prestados Markup) .toMatchSnapshot ()

Una vez que registra una instantánea, Jest se encarga de todo lo demás. Cada vez que se ejecutan las pruebas unitarias, se regenera una instantánea y se compara con la instantánea anterior.

Si el código cambia, Jest arroja un error y advierte que el marcado ha cambiado. El desarrollador puede verificar manualmente que ninguna clase ha sido eliminada por accidente.

En la prueba a continuación, alguien ha eliminado la clase modal-card-foot del

.

Una prueba de instantánea fallida

Las pruebas de instantáneas son una forma de verificar que nada ha cambiado sobre el estilo o el marcado de un componente.

Si se aprueban las pruebas de instantáneas, sabemos que nuestro cambio de código no afectó la visualización de nuestros componentes.

Si las pruebas fallan, entonces sabemos que afectamos el renderizado de los componentes y podemos verificar manualmente que el estilo sigue siendo correcto.

Debe tener al menos 1 prueba de instantánea por componente. Una prueba de instantánea típica procesa el componente con algún estado para verificar que se procesa correctamente.

Ahora tenemos pruebas unitarias y pruebas de instantáneas, es hora de ver las pruebas de extremo a extremo (e2e).

Pruebas de punta a punta

Las pruebas de extremo a extremo (e2e) son pruebas de alto nivel.

Realizan las mismas acciones que haríamos si probamos una aplicación manualmente.

En nuestra aplicación tenemos un viaje de usuario. Cuando el usuario hace clic en el botón, se abrirá el modal, cuando haga clic en el botón en el modal se cerrará el modal.

Podemos escribir una prueba de punta a punta que atraviesa este viaje. La prueba abrirá el navegador, navegará a la página web y ejecutará cada acción para asegurarse de que la aplicación se esté comportando correctamente.

Estas pruebas nos dicen que nuestras unidades funcionan juntas correctamente. Nos da mucha confianza en que la funcionalidad principal de la aplicación está funcionando.

Hay algunas formas de escribir pruebas de extremo a extremo para aplicaciones JavaScript. Hay programas como Test Cafe que registran las acciones que realizas en un navegador y las reproducen como pruebas.

También hay proyectos como nightwatch que te permiten escribir las pruebas en JavaScript. Recomendaría usar una biblioteca como la vigilancia nocturna. Es fácil de aprender y las pruebas se ejecutan más rápido que las grabadas.

Dicho esto, las pruebas de vigilancia nocturna siguen siendo relativamente lentas. Un conjunto de 200 pruebas unitarias tarda unos segundos en ejecutarse, un conjunto de 200 pruebas de extremo a extremo tarda unos minutos en ejecutarse.

El otro problema con las pruebas de extremo a extremo es que son difíciles de depurar. Cuando una prueba falla, es difícil descubrir por qué falló, porque las pruebas cubren mucha funcionalidad.

Conclusión

Para probar las aplicaciones web basadas en componentes front-end de manera efectiva, necesita tres tipos de pruebas. Pruebas unitarias, pruebas de instantáneas y pruebas e2e.

Debe tener varias pruebas unitarias para cada componente, una o dos pruebas de instantáneas por componente y una o dos pruebas de extremo a extremo que prueben múltiples componentes conectados entre sí.

La prueba general de la unidad constituirá la mayor parte de sus pruebas, tendrá algunas pruebas de instantáneas y algunas pruebas e2e.

Si sigue la pirámide de pruebas de front-end, creará aplicaciones web que se pueden mantener con suites de prueba excelentes.

Puede ver un repositorio de ejemplo de la aplicación con pruebas de instantáneas, pruebas unitarias y pruebas de extremo a extremo en GitHub.