Angular: clase de componente frente a prueba DOM

En este artículo, veremos las dos formas en que Angular permite a los desarrolladores probar los componentes de la aplicación y las ventajas y desventajas de cada uno. Antes de comenzar, veamos qué dice la documentación de Angular sobre lo que constituye un componente.

Un componente, a diferencia de todas las demás partes de una aplicación Angular, combina una plantilla HTML y una clase de TypeScript. El componente realmente es la plantilla y la clase trabajando juntos.

Podemos inferir de esto que una clase por sí sola no constituye un componente. Porque, después de todo, los componentes son piezas reutilizables de interfaces de usuario compuestas de código HTML y Javascript. Dicho esto, empecemos.

NB Se asume una comprensión básica de las aplicaciones angulares de prueba.
carbono (9).png

El componente anterior se utilizará como ejemplo para describir las diferentes técnicas de prueba.

Pruebas de clase de componente

Podemos probar una clase de componente de forma aislada, como lo haríamos con una clase de servicio. Como su nombre lo indica, la prueba de clase de componente implica probar una clase de componente por sí sola sin preocuparse por su plantilla (HTML) o cómo interactúa un usuario con ella.

carbono (11).png
ejemplo de prueba de clase de componente

carbono (8).png
Resultado de prueba falso positivo después de actualizar la plantilla

Observe cómo se ha actualizado la plantilla del componente bajo prueba. Desafortunadamente, la prueba aún pasará porque estamos probando los detalles de implementación.

ventajas

  • Las pruebas se ejecutan más rápido porque no se requiere DOM
  • Genial para probar los detalles de implementación de un componente (¿Es bueno hacerlo?)
  • Requiere poco código en comparación con las pruebas DOM

Contras

  • Un refactor simple puede hacer que todas las pruebas fallen
  • Es posible que las pruebas no fallen cuando su aplicación no funciona según lo previsto
  • No puedes interactuar con elementos DOM

Pruebas DOM de componentes

A diferencia de las pruebas de clase de componentes, esta técnica fomenta las buenas prácticas de prueba porque nos permite escribir pruebas que simulan cómo un usuario usará/interactuará con nuestra aplicación. Aquí, escribimos pruebas que simulan eventos reales como hacer clic en un botón o completar un formulario y verificar lo que se muestra en el navegador del usuario.

La prueba DOM de componentes requiere probar un componente como un todo (clase, plantilla y otros componentes con los que interactúa).

carbono (10).png
ejemplo de prueba de componente DOM

En la prueba anterior, puede ver que encontramos un botón en el DOM y activamos un evento de clic en él, después de lo cual afirmamos que el texto que se muestra en el navegador coincide con nuestras expectativas.

Nota: esta prueba asume que la plantilla del componente de ejemplo no se ha modificado.

ventajas

  • Refactorizar los detalles de implementación (no el comportamiento) no rompe la prueba
  • Los errores se detectan fácilmente durante el desarrollo cuando algo se rompe
  • Los elementos DOM se pueden interactuar con
  • Brinda a los desarrolladores la confianza de saber que su aplicación siempre funcionará según lo previsto

Contras

  • Las pruebas pueden ejecutarse más lentamente en comparación con las pruebas de clase de componente
  • Requiere un poco más de código (sin una biblioteca de terceros)

Conclusión

Espero que este artículo haya podido explicar las opciones disponibles para nosotros (desarrolladores) para probar componentes Angular. Si desea obtener más información sobre las pruebas de componentes o el enfoque preferido para probarlos, consulte los enlaces a continuación.

https://angular.io/guide/testing#component-test-basics
https://kentcdodds.com/blog/testing-implementation-details
https://github.com/testing-library/angular-testing-library

Similar Posts

Leave a Reply

Your email address will not be published.