Quizá No Necesitemos Pruebas de Componentes

Y así llegamos a la siguiente pregunta. ¿A qué pertenece la prueba de componentes? Hemos estado hablando mucho sobre la prueba de componentes, sobre cómo podemos hacerlo con Playwright, cómo lo hacemos con Cypress. Pero, ¿qué es la prueba de componentes y a qué pertenece? Bueno, la prueba de componentes en muchos aspectos tiene muchos significados diferentes. En el backend, simplemente significa un fragmento de código, un módulo, un bloque de código en el sistema que necesitas probar de forma independiente. Mientras tanto, en el frontend, se vuelve más complejo. Entonces, de hecho, la prueba de componentes se puede dividir en dos tipos. La prueba de componentes en pequeño, que es la prueba modular, o podemos llamarla prueba de unidad. La prueba de componentes en grande significa que estás validando un componente con la ayuda de otros componentes, como una galería, que depende de los componentes de elementos de la galería para renderizar y mostrar la lista completa de elementos. Lo que significa que cuando probamos este elemento de galería, no solo probamos el componente individual aislado del elemento de galería, lo siento, galería. Tenemos que probarlo junto con los elementos de la galería para ver si la entrada y salida de un componente serán necesarios para las pruebas. Otro componente vendrá sin problemas, y también debemos preocuparnos por la interacción del usuario, y así sucesivamente. Por eso, podemos decir que la prueba de componentes se divide en dos tipos. La prueba de componentes en pequeño, prueba de unidad. La prueba de componentes en grande, prueba de integración o prueba de extremo a extremo. En la prueba de extremo a extremo, realmente depende de cómo definas el flujo de tu prueba de componente individual que estás buscando.

Entonces, lo que significa en la pirámide, volvamos a la pregunta que hicimos antes, ¿a qué pertenece la prueba de componentes? En la pirámide de pruebas, es un área gris. De hecho, es un área gris entre la prueba de integración y la prueba de unidad. Realmente depende del escenario y los objetivos de las pruebas para decidir si la prueba de componentes que estás tratando de lograr es una prueba de integración o una prueba de unidad. Y eso nos lleva a nuestra próxima pregunta. ¿Cuándo vamos a escribir una prueba de unidad para el componente y cuándo vamos a escribir una prueba de integración para cada componente, o ambas? ¿Y qué tecnología debemos usar para cada escenario? Para eso, vamos a nuestra aplicación de demostración. Entonces, en nuestra aplicación de demostración, vamos a tener una aplicación muy simple, una tienda de pizzas, que permite a los usuarios agregar al carrito y luego actualizar el carrito, y también buscar y actualizar la URL. Para la aplicación de demostración, vamos a realizar la prueba, la comparación entre dos métodos. El primero es VTest con VueTestUtil, y el segundo es la prueba de componentes de Playwright.

Y aquí está el paquete que necesitas instalar en tu aplicación de demostración para tener el entorno de pruebas funcionando, el entorno de pruebas funcionando. Así que VTest con VTestUtil, JSTORM, para Playwright, tenemos las pruebas de componentes experimentales de Playwright para Vue y el paquete principal de Playwright. Y con eso, estamos listos para nuestra aplicación de demostración.

Así que echemos un vistazo a nuestra aplicación de demostración. Tenemos muchos componentes en la aplicación de demostración. Cada uno de los componentes aquí tendrá componibles relevantes para trabajar, para obtener datos y actualizar datos y transferir datos entre ellos. No vamos a revisar todos estos componentes. No vamos a escribir pruebas para todos estos componentes. Eso es tarea para casa. En esta charla, vamos a ver el componente del carrito y el componente de búsqueda.

Entonces, para el componente del carrito, tenemos varias características. El componente del carrito, como sabrás, es desplegable, lo que significa que se puede colapsar. Cada vez que haces clic en el carrito, mostrará un pequeño popover y te dirá cuántos elementos tienes en el carrito. Y te permite eliminar un elemento de tu carrito o eliminar un elemento. Y los datos que tomará del componible externo pueden usar el carrito.

De acuerdo, así que el caso de prueba que vamos a escribir aquí para cada uno de los métodos, las pruebas de componentes de Playwright y VTest. Vamos a escribir los tres escenarios, visualización del desplegable con o sin elemento y acciones de eliminación. Bien. Ahora vamos a la demostración. Muy bien. Entonces, en esta demostración, echamos un vistazo a las implementaciones del componente del carrito. Así que aquí tenemos un botón de desplegable. Y el botón mostrará si se debe mostrar el popover o no. Así que aquí tenemos el popover. Y dentro del popover, también tenemos otro if y else, que es si mostrar sin elemento o la lista de elementos. Y tenemos un botón para eliminar uno. Muy sencillo. Así que cuando hacemos la prueba con VTest, cuando instalamos VTest, podemos tener una configuración de VTest en el entorno dentro de aquí.

O podemos cambiar nuestro entorno para las simulaciones del DOM. Y podemos excluir la prueba de extremo a extremo de la lista para que el ejecutor de VTest no la tome, no intente ejecutar la prueba de extremo a extremo por accidente.

De acuerdo. Así que escribamos nuestra primera prueba del carrito. Entonces aquí, puedes ver que escribí, adelante y escribí todos los selectores, también los elementos simulados del carrito. Y también puse algunos espías para el uso del carrito. Y, por supuesto, después tengo que limpiar. Esto me permite cambiar las diferentes implementaciones simuladas para el gancho del uso del carrito dependiendo del escenario que quiero probar.

Para alternar la visualización, lo primero que siempre debemos hacer es montar el componente. Así que hacemos el montaje, y simplemente, muy simple, montamos el carrito. Y luego alternamos la visualización, ¿verdad? Así que vamos a obtener el selector del botón de alternar, ¿de acuerdo? Y luego vamos a - en primer lugar, vamos a comprobar que no va a mostrar nada, que no va a mostrar el popover. Así que vamos a hacer - no a la espera, esperamos que el envoltorio encuentre el selector del carrito como no es para ser - no como es. Debería ser invisible para ser formado. Sí. De acuerdo. Y luego haremos away trigger. Hacemos clic en el botón. Y esperamos que sea verdadero, pero debido a un error aquí con el método invisible en la prueba de vista, esperemos que lo solucionen pronto. Haremos attribute refine style y nos aseguraremos de que se vuelva vacío, porque cuando se muestre, agregará el estilo de display none como estilo en línea al componente donde no se muestra. Y eso es todo. Alternamos la visualización. Ahora pasemos al siguiente paso donde vamos a renderizar el elemento del carrito. Para esto, tenemos que modificar el carrito para tener algún elemento para que podamos ver la lista de elementos agregados. Así que en este, primero vamos a simular los elementos que compra el carrito y vamos a tomar el total de la longitud. Y también tenemos que eliminar no solo, vamos a hacer v, vamos a hacer agregar, también v, v.n. Vamos a limpiar con v.n. Y, por supuesto, actualizar no v.n. Realmente no nos importa esto.