Pruebas avanzadas para React con Vitest, React Testing Library y Playwright

1. Introducción al curso: Hola, y bienvenidos al curso Pruebas avanzadas para reaccionar con prueba V, biblioteca de pruebas de reacción y dramaturgo Este es un curso muy completo. Te enseñaré todo el concepto sobre las pruebas en la reacción. Primero comenzaremos con pruebas unitarias con prueba V. Hablaré de las fábricas de prueba. Implementaremos FACRes con la ayuda de la biblioteca ACG. Y luego vamos a pasar al siguiente paso que es la prueba de integración. Vamos a utilizar la biblioteca de pruebas de reacción. Te voy a enseñar todo sobre biblioteca de pruebas de reacción y vamos a usar eventos de usuario para simular las acciones que los usuarios, por ejemplo, hacer clic, enviar para ingresar información, y luego iremos y probaremos toda nuestra aplicación con el framework tend testing, que es dramaturgo Ya creé dos repositorios para este proyecto. Te voy a mostrar como puedes configurar un simple bloque con react y todas nuestras pruebas y todas las conferencias se harán para este blog y aquí puedes ver que tenemos un panel de administración y te voy a caminar sobre la configuración del proyecto en cada paso, harás la codificación conmigo. Puedes sentarte a ver los videos y también implementarlos tú mismo. Y al final del curso, tendremos una aplicación completa probada con todos los tipos diferentes de pruebas como pruebas unitarias, integración y pruebas finales. Estoy muy emocionada de verte en el curso y por favor únete a mí en el curso, nos divertiremos mucho en este curso juntos. 2. Requisitos previos del curso: Y ¿cuáles serán los requisitos previos del curso? He diseñado este curso para no requerir muchas cosas. Un conocimiento básico de mecanografía y Javascript y también un conocimiento básico de reaccionar sería suficiente para este curso Y todo lo que necesitas aprender sobre las pruebas, voy a cubrir en el curso para que no necesites saber nada sobre las pruebas. Puedes aprender todo en este curso, solo un conocimiento básico sobre cómo funciona JavaScript y cómo funcionan los mecanografiados y qué es reaccionar, cómo funcionan los componentes reaccionan sería suficiente para este Hay una sección buena para conocer. He utilizado TNSaquery o Rea Query para la comunicación entre el cliente rea y nuestro servidor No J. Pero si no lo sabes, no es obligatorio tenerlo. Voy dentro de los videos, te diré cómo funciona y cómo puedes usarlo. Pero si ya lo trabajaste, te sería más fácil seguir el curso. Pero si no has trabajado, yo ya ya te voy a enseñar todo lo que necesites para este curso. Como dije anteriormente, no necesita, no necesitas saber mucho antes de comenzar este curso. Simplemente inicia este curso conmigo y te enseñaré todo en la duración del curso. Empecemos juntos. 3. Por qué son importantes las pruebas: Hablemos de por qué son importantes las pruebas. Las pruebas nos ayudarán a asegurarnos de que el código funciona como se esperaba. Además, las pruebas nos ayudarán a prevenir la regresión. ¿Y qué significa esto regresión? Cualquier cambio en el software puede romper la funcionalidad existente. Y si hacemos algún tipo de codificación y esta codificación cambia alguna parte del código, pero rompe otra parte del código, llamaremos a este tipo de errores como regresión. Las pruebas nos ayudarán a prevenir regresiones, y las pruebas también nos ayudarán a garantizar un mejor diseño de código Cuando el código ha sido cuando estamos agregando más pruebas, nos ayuda a que nos ayude al desarrollador y a nosotros a comprender mejor el código y nos ayuda a tener un mejor diseño de código. Y además aumenta la confiabilidad del producto. Aumenta la calidad del producto, y traerá confianza para todo el equipo porque el equipo conoce la calidad del producto, y esto le da confianza al equipo. Y ahorra mucho tiempo a largo plazo porque cuando se quiere agregar nuevas características, hay muchas pruebas que asegurarán que las funcionalidades antiguas no se rompan. Y además, si algo sucede, puedes detectarlo inmediatamente en el primer paso. Por lo que también te ayudará a ahorrar tiempo a largo plazo. ¿Y cuál es la diferencia entre las pruebas manuales y las pruebas automatizadas? Por lo que en las pruebas manuales, se requiere de un equipo. Las pruebas manuales suelen ser realizadas por humanos. Entonces un probador de software suele ser más alto y luego él o ella comienza a probar cada flujo posible que en el software pueda suceder, y este es el proceso de las pruebas manuales. Pero las pruebas manuales requieren equipo y requiere mucho tiempo cada vez que el equipo de desarrollo software cambia algo en el software, el equipo A necesita hacer muchas pruebas, y esto requiere mucho tiempo. Como no es propenso a errores ya que todos los humanos podemos cometer errores. Entonces tal vez en la primera vez, hay un error y alguien lo encuentra, pero tal vez la próxima vez que alguien olvidó que debería verificar un flujo y luego pierde este flujo y luego no se detecta el error Por lo que todo el proceso no es propenso a errores. Y también puede ser un trabajo aburrido. Por lo general, cuando un equipo trabaja más de seis meses o un año y todos los días están probando los mismos flujos. A veces se está volviendo aburrido para ellos, y también cuando se vuelve aburrido, significa que no ponen atención de 100 personas en este trabajo, y hace que no se puedan encontrar algunos de los bichos, y estamos volviendo al artículo que no es error pro. Y hablemos del 4. Diferentes tipos de pruebas: En pruebas automatizadas, tenemos tres tipos diferentes de pruebas. La primera es la prueba unitaria, segunda es la prueba de integración y la tercera es la prueba de E a E o de N a N. ¿Qué son las pruebas unitarias? En las pruebas unitarias, nos estamos enfocando solo en una unidad. Por ejemplo, una función o una clase, y nuestro propósito es probar esta unidad separada de todas las demás funcionalidades y todos los demás componentes de nuestro en pruebas de integración, vamos a un nivel superior, y luego estamos probando la integridad de los diferentes componentes y módulos. Primero, con las pruebas unitarias, estamos seguros de que cada unidad está funcionando como se esperaba. En las pruebas de integración, nuestro enfoque es ver cómo funcionan juntas estas unidades. Entonces, por ejemplo, si la API agrega un nuevo campo y el front-end no está al tanto de este nuevo campo, entonces podemos tener una prueba de integración para asegurarnos de la integridad entre nuestro front-end y nuestro BC. Y el último es terminar las pruebas gemelas. Al final de las pruebas gemelas, veremos el sufrir como un todo. Vamos a probar el conjunto sufren desde la perspectiva independientemente de cuántos componentes, cuántos módulos y cómo estos componentes y estos módulos interactúan entre sí. Lo estamos probando en su conjunto y como sistema. 5. Pirámide de prueba: Hablemos del prompt de prueba. Como mencioné anteriormente, tenemos tres tipos diferentes de pruebas. La primera es la prueba unitaria, las pruebas de integración y las dos pruebas finales. Y si vemos estos tres tipos de pruebas como una pirámide, en la parte superior, tenemos pruebas unitarias, que es que tenemos muchas pruebas. Son rápidos cuando queremos ejecutarlos y son baratos, por lo que no requieren mucho tiempo y podemos escribir fácilmente pruebas unitarias. Son fáciles de mantener, y son fáciles de cambiar. Y como resultado, tenemos muchas de las pruebas unitarias. En la parte inferior de la pirámide, hemos terminado diez pruebas, que significa que suelen estar en ambiente de producción, hay pocas pruebas TN, y ejecutar este tipo de pruebas, es lento, y también es caro. Por lo que requiere mucho tiempo para escribir este tipo de pruebas y también el mantenimiento de estas pruebas son realmente difíciles y consumen mucho tiempo. Y como resultado, no tenemos tantas pruebas TN finales en relación con las pruebas unitarias. Sin decir que no debes tenerlo en tu proyecto y tu producción, cuanto más tengas las pruebas TN, es mejor para que puedas brindar más calidad para tu software. Pero en relación con las pruebas unitarias, que es fácil de escribir y son mucho más rápidas para su ejecución, tenemos en la práctica en entorno de producción, en ambiente puesta en escena, generalmente mucho menos pruebas NTN en relación con las pruebas unitarias. Y entre ellos, hay pruebas de integración. Por lo que hay más de dos t, menos que unidades. Y del costo, también están en el medio, por lo que no son tan baratos como la prueba unitaria, pero tampoco son tan caros como las dos pruebas finales. 6. 06 introducción a herramientas de prueba para este curso: Muy bien, ensuciémonos las manos. En este módulo, voy a hablar de las herramientas de prueba que vamos a utilizar para este proyecto y también te voy a mostrar cómo configurarlas y cómo instalarlas y cómo ejecutarlas. Empecemos. Las herramientas de prueba que estamos utilizando para reaccionar para este proyecto es V test react testing library y dramaturgo Y estamos usando la prueba V para pruebas unitarias, y para las pruebas de integración, estamos usando la biblioteca de pruebas de reacción o RTL, y para las pruebas TN, estamos usando dramaturgo En este curso, te voy a mostrar paso a paso, y primero comenzaremos escribiendo prueba unitaria con VTS y luego vamos a escribir pruebas de integración con RTL, y luego al final, vamos a escribir prueba TN con Así que comencemos. Ya creé dos repositorios para el proyecto. Estos son los enlaces al repositorio front-end y al repositorio del servidor. Y luego el siguiente video, te voy a mostrar sobre la configuración del proyecto. Entonces queremos agregar test para un proyecto que ya se está ejecutando. Te mostraré las características de este proyecto, y luego te platicaré qué componentes queremos probar y cómo será nuestro proceso de pruebas, y también te mostraré cómo puedes ejecutar estos proyectos localmente en tu máquina, para que también puedas seguirme paso a paso durante este curso. 7. 07 repositorios simples de blog y cómo administrarlos parte 1: Así que he creado dos repositorios para este proyecto. Uno se llama Simple blog, que es una aplicación de reactor, y el otro se llama simple Blog server, que es un servicio de empaque para este bloque. Para poder ejecutar este proyecto en tu local, no necesitas JS, y primero tienes que clonar estos repositorios Entonces aquí, cuando presionas este botón, obtendrás una URL, y podrás copiarla y luego dentro de tu terminal, puedes escribir Git clone y luego puedes escribir esto. Ya lo hice, y aquí tengo dos carpetas. Uno de ellos es blog sencillo, uno de ellos es simple empaque de bloques, déjame abrir una nueva pestaña. Y cuando hayas hecho eso, puedes ir fácilmente a allí y para ejecutar los proyectos, necesitas NodeJS Estoy usando NodeJS versión 22. Por lo que también te sugiero que uses exactamente la misma versión para que te asegures de que todo lo que estoy haciendo, también lo puedas hacer en tu máquina local. Entonces si ejecutas versión nodo, tengo la versión 22.14 También sugiero que para usar exactamente la misma versión. Y aquí voy a ir a lo primero que hay que hacer es ejecutar NPM install para instalar la dependencia del proyecto Voy a pausar el video y continuaré después de eso. 8. 08 repositorios simples de blog y cómo administrarlos parte 2: Entonces hice la instalación de NPM, y luego de eso, puedes ejecutar fácilmente NPM Stop. Sólo una nota que deberías notar, voy a cambiar este proyecto y voy a agregar códigos a medida que vayamos en este proyecto juntos. Voy a agregar alguna prueba. Para verificar el inicio del proyecto, he creado una etiqueta, que se llama start tanto para el front end como para el back end. Y cuando quieras revisar el repositorio, puedes ejecutar etiquetas Git, y aquí verás eso lo siento, etiqueta Gits Y aquí verás que tengo una etiqueta, y luego puedes revisar esta etiqueta específica para que puedas volver al inicio del proyecto y puedas continuar tu trabajo conmigo paso a paso. Y cuando yo haga los cambios, tú también puedes hacer los cambios. Después de agregar todas las pruebas, dejaré el repositorio en el patrimonio final, para que también puedas usarlo en el futuro. Bien. Empecemos. Ya tenemos las dependencias y también vamos a ir al back-end Y aquí voy a ir al blog sencillo. Yo y aquí como también necesito ejecutar en PAM instalar. Ya lo hice, así que mis paquetes están al día. Y aquí tienes un archivo que se llama server dot JS. Lo único que necesito para ejecutar es nodo servidor punto JS. Y verás que el servidor se está ejecutando y host local 3,001 ahora que nuestro servicio backend se está ejecutando, vamos al front-end y dejemos ejecutar NPM start y ahora verás que el cliente se está ejecutando en Voy a copiar este enlace y lo voy a abrir en mi navegador, maravilloso. Ahora verás el proyecto. 9. recorrido por el blog simple: Entonces hablemos de lo que es este proyecto. He creado un blog sencillo que cuando vengas a tu página de inicio, verás un blog sencillo. Cada bloque tiene una foto, tiene una imagen, un título, avatar del creador del post. Y luego al hacer clic en eso, podrás ver los detalles del post, y luego cuando vuelvas, verás que puedes volver a la página principal. Como pueden ver, ya tenemos una caja, así que ya tengo mi icono aquí y pero cuando está en la página de inicio, este es un icono predeterminado. Entonces esta es una de las cosas que las pruebas nos pueden ayudar. Esta es una intención que la arreglaremos en este curso juntos y además proporcionaremos la prueba para. Tenemos la página Acerca de, que es decir que este es un registro que he creado para este curso y además, estos son los detalles para mí si quieres contactarme. Y este es el sitio del blog, y también tenemos un túnel admin el cual puedo escribir slash admin Y aquí, voy a ver el número de los posts que se han publicado. Y para ser precisos, debes escribir slash admin slash Y también podemos ver el post aquí. Podemos crear un nuevo post, podemos editar posts y podemos eliminar posts. Entonces por ejemplo, si voy y si edito este post, y luego acabo de tener un dos al final del post, puedo ver que esto ha sido cambiado. Si voy al blog sencillo, puedo ver también esto ha sido cambiado. Si vuelvo a la sección admin home, voy al post y voy a devolver esto a lo que era antes. Y no tenemos autenticación. Aquí no es importante en este momento para nosotros. Por lo general, en el entorno de producción, se debe ocultar el administrador y el usuario debe iniciar sesión. Debe tener una contraseña de usuario, y esta área debe estar protegida Pero para este curso, no se requiere para nosotros. Tenemos este proyecto y ahora queremos agregar pruebas para ello. Estamos comenzando con prueba unitaria y luego vamos a pruebas de integración y luego al final vamos a escribir alguna prueba con plat 10. introducción rápida y sus características: En este curso, vamos a utilizar la prueba V para pruebas unitarias. Pero, ¿qué es VTS? V test es un marco de pruebas unitarias rápido y por defecto, soporta mecanografiado El proyecto react que he creado con TypeScript y la mayoría de los proyectos modernos también son con Esta es una muy buena característica de la prueba que podemos usar V test con TypeScript Y además es solo API compatible. Si previamente has trabajado con react, muchos desarrolladores de react anteriormente usaban Jest para pruebas unitarias, y VTS y T son hoy en día más moderna y una herramienta más rápida que estamos Y VTS también es API compatible. VTS tiene la API compatible con J. Así que es realmente útil para los desarrolladores que ya tienen experiencia con el JS aprendiendo VTS es mucho más fácil porque tenemos la misma API como describirla, esperar, y todas estas API son las El cuidado de aprendizaje para VTS para los desarrolladores que previamente han trabajado con Jess es mucho fácil y tanto, no requiere tanto tiempo Una de las características de VTS es que admite cobertura de código lista para usar. Voy a discutir sobre la cobertura de cotización en las futuras conferencias. Pero por ahora, solo debes saber que test por defecto nos proporciona el reporte de cobertura de Code y también proporciona la ejecución de prueba paralela. Nuestra prueba no necesita ejecutar una prueba secuencial en una por una, ejecutarlas en paralelo, lo que las hace más rápidas y podemos ejecutar nuestra prueba más rápido. Vamos a configurar nuestro entorno de prueba. En el siguiente video, te voy a mostrar cómo agregar la prueba a nuestro proyecto y vamos a escribir nuestra primera prueba unitaria. 11. Instalación rápida: He abierto el proyecto dentro de mi identificación. Estoy usando webstorm. Puedes usar cualquier identificación que te sienta más cómodo con él. Webstorm es un producto comercial. Puedes obtener una prueba de 30 días si quieres usarla y si te gusta, puedes comprarla. Estoy disfrutando mucho trabajando con él, así que ya lo compro, pero no tienes que comprarlo. Puedes usar Atom sublime o cualquier otro editor de texto o ID que te sienta más cómodo con él. Y así veamos la estructura del proyecto. Tenemos una carpeta SRC aquí. Tenemos una carpeta admin que está relacionada con la sección admin del registro web, que es post adicion post removal agregando post. Tenemos una carpeta llamada API para la comunicación API. Tenemos una carpeta constante para la constante y el sitio es la parte de bloque que cada usuario puede ver el post el compartido es algunos componentes que se comparten entre el sitio web y admin. Abramos la carpeta constante y aquí tenemos un archivo de índice y aquí se han definido tres variables. Vamos a configurar la prueba y escribamos primero nuestra primera prueba para este archivo. Para instalar test, voy a mi terminal y voy a escribir en pristall dash DSD significa que esto es solo para dependencias dev, y esta dependencia no forma parte de nuestras dependencias de producción Es sólo para el desarrollo. Cuando ejecute este comando, verán ese paquete paquete que Jason ha sido cambiado y si veo qué archivo se ha cambiado, ahora dentro de nuestras dependencias dev, tenemos V test Cuál es la diferencia entre la dependencia de profundidad y la dependencia normal las dependencias de profundidad solo se usarán para el desarrollo local porque las pruebas escribimos pruebas para ejecutarlas solo cuando estamos desarrollando y no son parte del entorno de producción, por lo que instalamos VTS como dependencia de profundidad Ahora tenemos VTSt y déjanos ir y aquí quiero crear una primera prueba Por defecto, por convención, lo nombraré como prueba, yo diría indexar la prueba, los ts vamos a escribir nuestra primera prueba. 12. 12 escribir la primera prueba unitaria: Para escribir nuestra primera prueba, primero definimos un bloque describir y un bloque describir dirá lo que vamos a probar. Porque voy a probar un archivo constante, voy a llamar a esta constante y por dentro, segundo parámetro será una función que estoy pasando. Y aquí lo escribiré y aquí puedo definir qué condición quiero que me prueben. El primer parámetro es una cadena que, por ejemplo, vamos a escribir la prueba y vamos a asegurarnos de que el nombre del curso es stay always y cuyo valor correcto es este valor. Déjame entonces escribir mi primero, luego diría que debería devolver el valor correcto para el nombre de host. El segundo parámetro también es una función que puedo pasar y voy a definir mi prueba aquí. Aquí, tenemos lo que vamos a esperar de la prueba y lo que vamos a esperar. Tenemos una función expect de prueba B que podemos dar una condición y luego comprobará si esta condición es verdadera o falsa o ¿cuál debería ser? Aquí, voy a usar el nombre del curso y voy a importar el nombre del curso. Estoy esperando que el nombre del curso sea esta prueba avanzada con react y Test. Creo que aquí también, tengo un problema porque este curso no se trata de est, pero debería escribirlo con dramaturgo, pero lo arreglaremos juntos ahora Con esto, esta será nuestra primera prueba. ¿ Qué significa eso? Eso significa que primero voy a definir un bloqueo describir y describir es una colección de la prueba y cada prueba estará dentro de él bloque, el primer parámetro será un mensaje que si la prueba está fallando, debería nos dirá este mensaje para que podamos identificar cuál de las pruebas está fallando. Y aquí voy a escribir exactamente lo que voy a esperar. Como pueden ver en mi vastorm ID ya detectado y tengo dos fondos aquí, y esto es algo genial de gastrom que también brinda soporte para TS Pero si estás usando otro ID o algo más, puedes justo dentro de tu terminal escribir la prueba NPX V. Como puedes ver, se detecta automáticamente y está ejecutando mi prueba, pero tengo un error y dice que describir no está definido. La razón es que aún no hemos configurado V test. En el siguiente video, voy a configurar la prueba V. 13. 13 Configuración de Vitest y finalización de nuestra primera prueba unitaria: Así que vamos a configurar nuestra prueba. Dentro de este proyecto, hay un archivo que se llama punto JS. Esta es una configuración para la T. Con el fin de agregar la configuración para prueba, también agregaré un parámetro aquí. Aquí, verás que estamos diciendo que nuestro proyecto es un proyecto. Y también para nuestras importaciones, todo lo que está ordenado, por favor reemplácelo por SRC Aquí voy a agregar una sección y para la prueba, y voy a poner los globales a true y ambiente a la J Describe, estas son las palabras clave globales, y aquí le estoy diciendo a VTS que para entender describir y Como puede ver, el error es que describir no está definido. Con esta configuración, estamos diciendo que queremos tener los globales. Para nuestras pruebas, que es describirlo y también nuestro entorno de pruebas será Jz Vayamos a la terminal. Como puede ver, automáticamente vuelve a ejecutar mi prueba. No tuve que empezar y detenerlo de nuevo. Esta es también otra característica interesante de VTS, que se vuelve a ejecutar automáticamente la prueba cuando se le cambia Ahora, verán que mi prueba está fallando y dice que nuestro valor esperado es prueba avanzada con prueba reacciona y el valor recibido es otra cosa. Vamos a ver cuál era en realidad el valor. El valor real está aquí. Ahora, no agregué la sección de dramaturgo, así que solo dije que estoy esperando que este valor sea esta p, lo cual definitivamente está mal Voy a sustituir este valor. Ahora cuando digo vamos a ver que automáticamente lo vuelve a ejecutar y esta vez estoy esperando que pase mi prueba. Como pueden ver ahora, mi prueba está pasando. También puedo dejarme presionar Control C y también correr y recoger prueba. Ahora tengo una prueba fallida y una prueba pasada. Esta es la prueba predeterminada por react. Déjame ir también y quitar esto en el Ts cinco. He creado este proyecto con create react up y esta prueba ha sido creada por react déjame también eliminar eso y dejarnos ir. Ahora nuestra prueba debe estar limpia. Tenemos una prueba y esta prueba está pasando. Increíble. Y ¿sabes cuál es el beneficio de tener esta prueba? Dónde vemos esta cadena dentro de nuestro blog web. Ya ves aquí tengo un simple bloque creado para el curso avanzado testing reaccionamos. Si solo hacemos pruebas manuales, este texto está en el pie de página y cuando los bloques se complican más y mucha gente que trabaja con diferentes elementos y el tester, puede ignorar fácilmente esta parte. En consecuencia, un desarrollador puede venir y comenzar a escribir y tal vez quiera escribir algo, pero no se da cuenta de que en realidad está escribiendo, así que hará esto y cuando haga esto, verá que nuestro registro web está roto. Pero con esta prueba, de inmediato, veremos que una de las pruebas está fallando. Así puedo ver exactamente en qué archivo y qué línea de prueba es falsa. Déjame primero eliminar solo porque esta prueba para la línea del curso será atlas testing para react with test, RTL y Plavt Cambié la prueba, pero no cambié el valor real, así que vamos y también cambiemos el valor real. A partir de estos momentos que tengo esta prueba, lo sé, estoy seguro de que esta parte del texto siempre será correcta. Nadie por error si viene alguien por error y por ejemplo, en la G, inmediatamente, tenemos una prueba que es fallar. Maravilloso. Continuemos nuestro trabajo sumando más pruebas. 14. Definición y métricas de cobertura de código: Como antes mencioné, uno de los beneficios de VTS es que proporciona el reporte de cobertura de código por defecto ¿Y qué significa cobertura de código? La cobertura de código es una medida para la calidad de nuestra prueba. Dije que vamos a mejorar la calidad de nuestro software con pruebas automatizadas. Y ahora, ¿cómo podemos asegurarnos cuál es la calidad de la prueba? En realidad, cuál es la calidad de nuestra prueba automatizada. Y aquí hay un nuevo concepto que se llama cobertura de código. Y la cobertura del código es el porcentaje es un número basado en el porcentaje, y es el porcentaje de las líneas y el código que se ejecutará cuando estés ejecutando las pruebas. Entonces si tengo una función, si tengo una clase y esta clase tiene diez líneas de código, y si escribo una prueba para esta clase y durante la ejecución de esta prueba, ejecutarán ocho líneas de estas diez líneas, entonces mi cobertura de código será del 80%. Y esta es la definición de la cobertura del código. Y pero la cobertura de código también tienen diferentes métricas. En los próximos videos, te mostraré en su y de hecho podemos ver estos números. Aquí quiero que te des la definición de esta matriz. Tenemos cinco números de su cuando le agregamos reporte de cobertura de código, primero son las líneas. El segundo es una declaración. El tercero es rama, funciones y líneas descubiertas Las líneas en realidad nos muestran cuánto porcentaje de las líneas se ha cubierto. Entonces como dije antes, si tengo una función y esta función tiene diez líneas de código y durante la ejecución, se ejecutarán ocho líneas, entonces la cobertura de código para la métrica de las líneas será del 80%. La declaración es similar a las líneas. La única diferencia es que puedo escribir declaración múltiple en las líneas simples. En el cálculo de líneas, esto se calculará como uno si tengo tres estados. Pero en el número de estado, esto se calculará como un estado. Y rama significa que cada vez que tengo una condición IL o un caso de interruptor que basado en diferente condición, mi programa va en dirección diferente. Esto se llama rama y en realidad su también proporcionar muchos porcentaje de nuestra sucursal ha sido cubierto durante la ejecución de la prueba. Y la función, también el número de las funciones que se han llamado durante la ejecución de la prueba relativo al número entero de las funciones que tenemos en nuestro sesgo de código. Y al final del reporte, también VTS nos proporciona líneas descubiertas, por lo que en realidad podemos ver qué líneas de los códigos han sido cubiertas por la ejecución de nuestras pruebas y qué líneas no han sido Y al ver estas líneas, podemos mejorar y también podemos agregar más pruebas para aquellas líneas que no han sido cubiertas para aumentar una buena cobertura e incrementar la calidad de nuestras pruebas. 15. Cobertura de código vs. cobertura de prueba: También hay otro concepto que se llama cobertura de prueba, y por lo general se discutirá cuando estemos hablando de la cobertura del código, la cobertura código y la cobertura de prueba. Estos son dos conceptos importantes. A veces se han usado indistintamente, pero si queremos ser precisos, cobertura de código es en realidad el porcentaje de la base de código que se ejecuta cuando estamos ejecutando nuestra prueba Y la cobertura de la prueba es un término más general y un término más amplio que se refiere realmente a cuánto ha sido cubierto por la prueba nuestro comportamiento de aplicación . Entonces tal vez haya algunos casos que nuestra aplicación ni siquiera implementamos en nuestra aplicación, y debido a que ni siquiera la implementamos en nuestra base de código, aunque no haya prueba para ellos, no afecta la cobertura del código porque esta parte de la lógica de la aplicación ni siquiera se ha visto. Esto puede ser esto puede suceder que, por ejemplo, un gerente de producto no haya visto alguna funcionalidad que existiera y ni siquiera implementamos esa parte del código. Esta cobertura es un término más general que también trata de abordar y esas condiciones y esos escenarios. Aquí escribí un ejemplo sencillo. He definido una función de división como una función de flecha en una sola línea. Dije que el primer parámetro es número y el segundo parámetro es número y por favor devuelve A dividido por B. Y si agrego una prueba, y si digo, por ejemplo, estoy esperando que cuando estoy dividiendo un cuatro por dos, los resultados serán dos. Entonces mi cobertura de código será del 100% porque solo tengo una línea y esta línea se ejecutará durante la prueba. Por lo que la cobertura del código será del 100%. Pero aquí, no verifiqué si B no es cero. Entonces si llamo a esta función con A y para el valor de la B, pasaré cero, entonces obtendré una excepción, y esto primero, debería verificar que B no sea cero. Y esta es una definición. Este es el concepto de la cobertura de prueba. Y en realidad, no he visto el comportamiento de que B no debería ser cero, y mi código en realidad ni siquiera considera esta opción, y esta condición no ha sido verificada. Pero mi cobertura de código es del 100%. Así que tener una buena cobertura de código es algo realmente bueno. Es algo que deberías intentar tenerlo, pero no quiere decir que nuestra aplicación no tenga ningún problema, ningún error o error alguno. 16. Añadir informe de cobertura a Vitest: Ahora que hemos aprendido el concepto de cobertura de código, agreguemos nuestro informe de cobertura de código y veamos el informe de cobertura de código para nuestra prueba. Para ejecutar la cobertura del código, voy a ejecutar test, diría NP test run coverage. Como pueden ver, dice a esto le falta dependencia no puede encontrar cobertura VD, V, ¿quieres instalarla? Yo diría que sí. Y esperemos hasta que se instale esta dependencia y ahora la tenemos. Vayamos y volvamos a correr la portada. Aquí verán que no voy a conseguir una mesa. Y estos números son los números que he explicado en la evaluación de diapositivas, ramas, función, líneas, y líneas descubiertas Ahora para nuestro índice que es archivo, en realidad vemos el reporte de cobertura de código. Esto está dentro de la constante SRC. Si voy y si encuentro esta carpeta, verán esa constante SRC, tengo el 100% porque esta declaración y estas ramas han sido cubiertas Verás que esto en realidad es verde, y los demás son rojos. Después de eso, después de ejecutar este comando, también tengo una carpeta de cobertura. También puedo abrir esta carpeta de cobertura y también puedo ver el reporte de cobertura de código ejecutando este índice ese archivo GML Déjame dar click sobre esto. Déjame hacer clic derecho sobre este archivo, y luego lo ejecutaría y u. ha abierto columna y déjame simplemente copiar este enlace a mi valiente navega. Vamos a verlo en nuestro breve. Verán que aquí no tengo ninguno de estos archivos han sido probados, así que no veo ningún valor aquí y aquí voy a ver mi índice en Ts cinco. Debido a que se trata de una importación, el momento en que este archivo ha sido importado, las líneas de todas estas variables han sido inicializadas y todas ellas han sido ejecutadas La cobertura es del 100%. Uh, 17. 17 Cómo profundizar en el informe de cobertura del código: Cavemos un poco sobre el concepto de cobertura de código y permítanme cambiar este archivo y agregar una función como lo definí en las diapositivas que estoy esperando y función cual A y B serán número y devuelve y devuelve un valor, que es número y esto es A dividido por B. Ahora agregué la función y no cambio mi prueba, y dejemos correr y ver la cobertura nuevamente. Debido a que estoy usando webstore, webstore tiene una buena integración con test que en realidad está aquí, si escribo clic en el archivo de prueba, puedo ejecutarlo Puedo devugar y además tengo esta opción ejecutar índice con cobertura Y voy a presionar esto. Sin embargo, si no usas webstom, siempre puedes ejecutar el reporte de cobertura con la terminal Pero para una explicación más fácil en este curso, solo estoy dirigiendo esto. Cuando haga esto, en realidad, me va a preguntar, ¿quieres que reemplace el traje o quieres que no aplique ningún cambio o lo reemplace? Voy a presionar reemplazar y luego voy a refrescar la página página que tengo aquí verás que en realidad ahora los estados cuando tenemos el 100%, las ramas, el 100%, la función donde tenemos una función que no ha sido cubierta. Esto es voy a conseguir un cero, si vas a aquí y también puedes ver aquí, que ahora tenemos una función que no ha sido cubierta. Vamos y vamos a implementar también la condición if déjame expandir esto y yo diría, quiero devolver un bebé divoide, pero si ser igual cero, entonces quiero, por ejemplo, verdadera excepción Nuevo error que la división por cero no es posible. El de, iré y volveré. Tengo un error tipográfico aquí, así que déjame escribir división Tengo un tejido de enlace, expreso. También tengo un tejido de enlace aquí. Ahora, agregué una nueva condición aquí y estoy comprobando si B es cero, entonces voy a pasar por una excepción. Vamos y volvamos a ejecutar nuestra prueba. Voy a sustituir. A veces hay un problema con cobertura que en la primera vez no funciona, así que voy a leerlo dos veces para asegurarme de que voy a obtener el número correcto. Ahora verás ese cambio, ha cambiado el reporte de cobertura y déjanos verlo en nuestro HT. Ahora, veremos que en realidad la declaración, tenemos nueve declaraciones, sólo cuatro de ellas han sido probadas. Sucursales es 100% función cero y líneas es sólo cuatro nueves han sido. Todo bien. Vamos y agreguemos una prueba. No necesito esta prueba, no necesito esta función, pero solo la estoy usando como ejemplo. En el siguiente video, voy a agregar algunas pruebas para esta función. Déjame agregar una prueba. Puedo agregar una prueba escribiendo y está aquí, pero como esta es una función diferente, y es una de las mejores prácticas para separar realmente las cosas que están conectadas entre sí. Voy a definir otro bloque describir y lo llamaría dividir y aquí voy a pasar una función, una función de flecha, y luego diría, debería devolver el valor de división de A por B. Entonces en mi prueba, voy a agregar, voy a esperar que si llamo a esta función dividir con cuatro y dos, entonces debería ser dos. Esta será mi prueba. Por intención, no probé las partes cero, así que veamos qué va a pasar. Voy otra vez, voy a hacer la prueba con cobertura y voy a reemplazar y verán que este número ha sido cambiado a 77%. Déjalo ver también aquí. Entonces en realidad, ahora verás que antes era rojo, lo cual no era bueno. Ahora es de color amarillo, así que no somos un verde sil. No estamos en una buena declaración sobre un buen estado, pero es un poco mejor. Por lo que siete de nueve declaraciones han sido cubiertas ramas. Ahora ahora tenemos una función. Si recuerdas en el video anterior, la función era cero porque no llamamos a la función en absoluto, pero las ramas eran 100% porque no se ha llamado a la función, las ramas no se ha calculado porque excepto la función, no tenemos ramas. Simplemente definimos tres variables. Pero ahora que se ejecuta la función y tenemos la cobertura del 100% para la función, solo se está ejecutando uno de nuestros Is y por eso, la cobertura para las sucursales es del 50%. Nuestras líneas y declaración son las mismas. El reporte de cobertura para estos dos son los mismos. Vamos y agreguemos también otra prueba y dejemos una prueba que estamos esperando cuando esta vez voy a pasar cero y estoy esperando que esta vez reciba un error como excepción. Para probar eso podemos usar un proveedor de prueba que se llama a lanzar. Puedo pasar con esto, en realidad puedo decir que cuando quiero esta función debería arrojar un error. También lo envolveré en una función de flecha porque ahora que esta función arroja un error, si no la envuelvo, entonces se interrumpirá la ejecución de todo el archivo. Lo estoy envolviendo en una función de flecha, pero estoy diciendo que estoy esperando que en es la función de flecha. Ser ejecutado, me emociona que un error para ser verdad y ese error el mensaje relativo a ese error debería ser esta fortaleza. Permítanme pegar este valor y ahora volvamos a ejecutar la prueba. Y vamos a reemplazar el traje y increíble. Ahora vamos a obtener una cobertura del 100%. Pasemos al reporte de cobertura. Vamos a refrescar la página. Ahora tenemos un verde. Fantástico. Se han cubierto todas las nueve líneas, ha cubierto toda la declaración. Teníamos un if y s, ambas ramas han sido cubiertas. Teníamos una función que se ha cubierto y todas las líneas han sido cubiertas. Increíble. Hicimos un muy buen trabajo. Continuemos con nuestro trabajo. 18. Cómo agregar pruebas unitarias para QueryKeys: Continuemos nuestro trabajo agregando más prueba. Ya escribí una prueba para la carpeta constante y veremos que la cobertura del código es del 100%, que es realmente. En este video, voy a agregar pruebas para la API. Dentro de la API, tengo una carpeta para los modelos y una carpeta para el post. Y los modelos es la definición real de datos del post. Entonces, si echamos un vistazo a esto, tenemos un tipo de publicación y este tipo de publicación tiene una descripción del título de identificación y tiene una imagen, autor y la fecha de publicación. Y este es un tipo sencillo. Entonces no necesito escribir pruebas para la interfaz porque esto es solo una definición de tipo. Y si voy al post, tengo algo de tanstaquery los ganchos, y tengo la linea de consulta y query Entonces, si no estás familiarizado con Tanstaquery o re aquari, no es problema. Ya tengo otro curso que puedes echar un vistazo si te interesa introducción a Tanstaquery o aquari Pero para este curso, no es obligatorio entender y conocer todas las características de la consulta Tansta Y sólo para darte una pequeña visión general sobre lo que realmente está haciendo. Entonces si voy aquí, estoy leyendo las entradas de este blog de la API. Para ello, te puedo mostrar, por ejemplo, si vamos al sitio, tenemos una página y aquí si vamos a la página del blog, aquí estamos usando un gancho que esta es la sintaxis de la rea cor, y definí use pose que se ha definido aquí. Y esta función en realidad usa rea query para llamar a una función, que se llama query function, que es fetch post ¿Y qué trae esto carteles? En realidad usa Axios para obtener una solicitud de red a la API para la API que tiene la lista de la publicación, y hará una solicitud get y luego al final, devuelve los datos Y debido a que esta es una acción asíncrona y tengo aquí un peso y aquí una sincronización con consulta rea, podemos usar un gancho externo con este cuatro que estoy diciendo, necesito una clave de consulta, que será una cadena, que aquí hay posts, y luego una función de consulta, que es esta función Voy a definir esto como un gancho personalizado y aquí dentro de mi componente, fácilmente puedo llamar a este capó personalizado y esto manejará la operación Async de la llamada a la API obteniendo los datos Puedo mapear estos datos a una variable que se llama pausa y también me devuelve un lingote, que está cargando y también error Se está cargando muestra si este gancho ha sido resuelto, esta llamada a la API ha sido resuelta y si hay un error en la API, entonces se establecerá el error. Y aquí dentro del componente, estoy comprobando si esto está cargando, estoy devolviendo solo un componente de carga, sencillo en un párrafo sencillo. Si esto es un error, voy a devolver error. Y estos dos y si esto se está cargando, es falso y el error también es falso, significa que tengo la lista de los posts. Entonces aquí, voy a mapear. El post y yo los muestro dentro de esta página. Para este curso, lo único que necesitamos saber es que en realidad una consulta usa un cliente de consulta y tenemos este tipo de ganchos y yo uso posts, creé este libro personalizado para devolver todos los posts. Este devuelve una publicación con el ID. Y ésta es para la adición, eliminación de la pose y creación del post. No obstante, si estás interesado en aprender más sobre rea query, puedes ver mi otro curso introducción a Tana Sta query o Ra query. Pero para este curso, no necesitamos saber mucho sobre rea query. Lo único que necesitamos saber es en realidad cómo funciona esta función. Y para este video, voy a agregar prueba de escritura para esta consulta. Y aquí verán que este es un archivo realmente sencillo. Yo solo defino la clave de consulta como un objeto. Tiene una pose clave y el valor es post. Vamos y vamos a crear un archivo de prueba para esto y llamémoslo claves de consulta, la prueba, los ts y voy a escribir un bloque describir. Y voy a tener uno como escrito, correcto, clave de consulta, y no necesito asincrónico, solo necesito Voy a agregar esperar y esperar que esa consulta que los mensajes sean puestos. Y déjame hacer esta prueba. Esta es una prueba fácil también déjame ejecutarla con cobertura y la cobertura debe ser del 100%, lo cual podemos ver. Si volvemos a nuestro valiente navegador, si vuelvo a archivos antiguos, ahora lo verás dentro de la API SLC Para este archivo, no agregué ninguna prueba, pero para este archivo, tenemos cobertura de código del 100%. 19. ¿Qué es el estampado?: Pero la parte más desafiante sería en realidad escribir prueba para estos ganchos personalizados. Veamos el primer gancho. Entonces tenemos uso post. Y por simplicidad, primero, esta es una función fetch post, y luego tenemos use post, y luego estamos usando esta función como una función de consulta y estamos exportando este cons por defecto Esta función es privada, y no hay exportación. Por simplicidad, voy a exportar esta función por ahora y primero vamos a escribir una prueba para esta función. Lo que hace esta función se llama el eje que obtiene y luego pasa la URL para el post y devuelve los datos. Pero recuerda que en las pruebas unitarias, en realidad no nos interesa la interacción con nuestro back end y nuestro APR y si quiero escribir una prueba para esta función y no quiero ejecutar una instancia del back end para mis pruebas. Y esta prueba debería ser porque estoy probando solo esta unidad. Y dentro de las pruebas unitarias, tenemos la suposición de que todas las demás unidades están funcionando como se esperaba, nos estamos enfocando solo en esta unidad. Entonces, cómo podemos hacer eso, y aquí viene un concepto realmente importante en las pruebas unitarias, que es burlarse Entonces, ¿cuál es el concepto de la burla? Mking significa reemplazar una unidad por una unidad falsa. Y esta unidad falsa en realidad se burla del comportamiento de la unidad original Y esta es la razón por la que lo estamos llamando burla. Cuando hablamos de burlarse, significa que no nos interesa el comportamiento real de una unidad o un componente, y solo queremos tener una unidad falsa en lugar de la unidad original Y recuerda que en las pruebas unitarias, nos estamos enfocando en una unidad. Por lo que no nos interesa cómo funcionan las otras unidades. Y por eso, porque queremos agregar una prueba para una unidad y usaremos burlas para las otras unidades y las haremos como falsas con el fin de simplemente actuar como esperamos en lugar de ejecutar el código real detrás de ellas y solo nos enfocamos en la unidad que en realidad estamos escribiendo prueba para ello ¿Cómo podemos hacer marcado en su? Es tanto simple que solo podemos escribir punto Mk entonces pasaremos el nombre del módulo que queremos marcar. En este ejemplo, he usado eje. V es también la forma corta para VTS y la marca es en realidad la función, así que puedo marcar fácilmente un módulo de eje con punto Mg. Vamos a verlo en la práctica. 20. Cómo escribir una prueba unitaria para FetchPosts con la ayuda de la prueba de impresión: Entonces para escribir test, voy aquí, estoy creando un archivo. Yo lo llamaré usar puntos post test. Voy a añadir un bloque describir, y lo llamaré use post y la función dentro de él. Dentro porque tengo dos funciones, voy a crear un bloque describir para cada función. El primero será fetch post. Yo sólo por la parte para la E, dejémosla vacía por ahora. Lo explicaré más adelante lo que queremos escribir aquí. Pero lo que realmente esperamos para que suceda esta función. Cuando estamos llamando a esta función, estamos esperando lo que puede salir mal si un desarrollador cambia esta URL, y esperamos que esta función llame a la URL correcta y luego devuelva los datos correctos. Hagámoslo. Voy y agreguemos esperar bloqueo y queremos importar fetch Bs en lugar de esto, quiero esperar que fetch sea a un estricto igual Cuando digo igual, por lo general se utilizará para tipos primitivos como números enteros. Pero cuando tengo un objeto y porque en Java script, los objetos serán comparados por las referencias, me interesan realmente las propiedades de los objetos. Yo sólo quiero tener estricta igual. Déjame ejecutarlo para ver qué va a tener. Entonces como pueden ver, esto muestra una flecha, promesa esperada porque esta función es una función ASN y solo la estoy llamando Primero arreglemos esto. Llamémoslo la respuesta y esperemos el resultado y digamos que estamos esperando que esa respuesta sea algo respuesta. Porque estoy usando un peso, así que aquí también debería agregar un teclado ASN aquí y dejémoslo ignorar Debido a que esto es una matriz, en realidad debería pasar una matriz de objeto. Caigamos ahora, pasemos una matriz vacía. Hagamos la prueba. Ahora, verás que en realidad se llama el IPI real, pero esto no es lo que estoy esperando Si detengo el servidor, vamos y detengamos el servidor. Detengamos el servidor y háganos saber ejecutar la prueba. Y ahora verás que en realidad no podemos correr. Esto no es en realidad lo que estamos buscando. No queremos tener un servidor funcionando. No queremos tener una interacción con la API. Al final las pruebas gemelas, sí, pero en el concepto en el ámbito de las pruebas unitarias, solo queremos tener que trabajar con una sola unidad. Y para eso, voy a usar marcaje y diría punto Mk xS. Con esta línea, estoy diciendo que en realidad, yo no necesito eje en sí. Sólo necesito una versión marcada del eje. Ahora que escribí esta línea, verán que esta parte es roja. A ver lo que estás diciendo. Dice que no se puede encontrar el nombre en el archivo globals Ts config. Déjame hacerlo y ahora puedo hacerlo. Veamos qué se ha cambiado dentro de nuestro archivo de configuración Ts. Añadió los tipos para el vTest. También TypeScript entiende que estamos usando VTS porque estas son las palabras clave de Sepa que agregué esto, en realidad el exxus ha sido reemplazado por la versión marcada Después de eso, puedo pasar y puedo decir que siempre que estés llamando al exxus con la G, quiero obtener una respuesta en lugar de tener una respuesta real Simplemente definamos una respuesta. ¿Qué queremos? Por ejemplo, queremos que una pose marcada sea una matriz del tipo post. Por ejemplo, ID no sería esta variable sería una matriz de tipo post el post tip tiene tantos parámetros. Veamos qué dice. Pidamos a nuestro ID para colocar donde debería proporcionarnos algunos automáticamente rellenar datos más acción. No y estoy pasando un objeto vacío usando las propiedades IT title description. Desafortunadamente, no aparece en él, así que déjame solo escribir ID sería uno, título sería una cadena de título y la descripción sería una cadena de descripción, qué más me falta creado autor de la imagen publicada. Created t será una cadena vacía, Auor será un objeto Por encima de usted será una cadena vacía y el nombre será una cadena. Déjame usar mi nombre. Ahora nos falta imagen y fechas publicadas y la imagen también nos deja ir con un objeto vacío y la fecha publicada también cadena vacía. Ahora arreglemos todo el archivo con la preta m. y el archivo actual. Ahora quiero usar esto como respuesta para la llamada API. Eso lo puedo hacer diciendo que está marcado. Estoy diciendo que cada vez que ese eje que consigue ha sido llamado, estoy esperando obtener un valor de resultado, que es un objeto y los datos se marcarán post. Permítanme importar también la fuente del eje. Entonces aquí agregamos punto Mg que estamos diciendo en realidad no necesitamos axio y aquí estamos diciendo que cada vez que se ha llamado a AxiusG, esto es exactamente lo que hace esta función es llamar a Necesitamos obtener estos datos. Y ahora cuando se ha llamado a fetch post, ¿qué causa fetch post Si reemplazamos esta línea con ese valor, devuelve la propiedad data, devuelve este objeto. Estoy esperando y mi condición debería ser que esta respuesta sea este post marcado que he definido. Ejecutemos la prueba y debería fallar ahora porque ahora agregué este objeto, así que permítanme reemplazarlo y marcar post y después de eso, esta prueba debería pasar. Maravilloso. Lo que está pasando, permítanme resumirlo de nuevo. Estoy definiendo una matriz de algunos objetos y estoy diciendo cada vez que se ha llamado a Axios, por favor resuelva porque esta es una función ASN, estoy usando valor de resultado marcado También tenemos un valor de retorno de marca, que es para operación síncrona para ASN, estoy usando valor de resultado de marca Por favor, devuelva un objeto que tenga una clave que son los datos y la respuesta debe ser. Siempre que llamemos al puesto de búsqueda, estamos esperando que eso consiga esto Aquí, si inicio el servidor, ahora verás que aún está pasando la prueba porque no tiene ninguna interacción con nuestro nodo servidor JS. Es solo un eje de reemplazo completo con la versión marcada. También hay otra cosa que quiero probar aquí, que en realidad es cuando llamamos a esta función, queremos asegurarnos de que realmente XS get ha sido llamado y ha sido llamado con este parámetro correcto. Para ello, también voy a añadir otra línea para la espera. Yo diría que estoy esperando que axus punto llamado y T nos proporciona la función, que se llama se han llamado WT aquí estoy esperando que debería haber llamado con esta UR Me voy y voy a pasar este valor. Volvamos a ejecutar la prueba y la prueba está pasando. Si un desarrollador por errores viene y cambia esto a, por ejemplo, APURA me deja importar también este No, tenemos una prueba que en realidad prueba que fetch post debe llamarse con la URL correcta Ahora bien, esta prueba está fallando porque dice que se esperaba que te llamaran con una publicación de slash, pero este valor no es correcto Ahora estamos seguros de que pondrá a prueba cualquier cambio en esa función. Ahora escribamos la descripción del I lo que estoy probando, diría que devuelve los datos correctos de API. Veamos también el reporte de cobertura del código de cobertura, vamos a ejecutarlo con cobertura. Veamos nuestro vamos a subir un nivel. Tenemos el pliegue de API ahí y déjame ir a las publicaciones de la API de SRC No agregamos ninguna prueba para estos archivos, pero he usado posts y esta función ha sido probada. Estas líneas rojas significan que este *** ha sido probado, que no es la función que queríamos probar. Pero ahora es increíble. Toda esta función ha sido probada. 21. Prueba unitaria de escritura para usoPublicaciones: Entonces continuemos nuestro trabajo escribiendo pruebas unitarias para esta función, que es usar posts. ¿Y qué esperamos? Esperamos que realmente use query proviene de react query, por lo que es una biblioteca externa. No necesito escribir unidades para biblioteca externa. Lo que estoy haciendo es en realidad debo asegurarme de que estoy pasando la clave de consulta y la función de consulta correctas. Y cuando se resuelva este gancho, estoy esperando obtener los datos que estoy esperando de eso. Y para hacer eso, primero, tenemos que dejarme ir al bloque de describir y dejarme agregar otro bloque de describir. Aquí vamos a agregar otro bloque descrito y este será para uso post, y voy a pasar una función, y aquí voy a agregarlo nuevo. Para el mensaje, yo diría que es bueno devuelve los datos correctos de la APA. Déjanos porque este es un gancho personalizado y necesito renderizar este gancho y necesito envolver este gancho dentro del proveedor. Cómo podemos hacerlo. Voy a definir a usar una consulta rea, como puedes ver aquí, tenemos una línea de consulta primero, primero debemos inicializar una línea quérica Vayamos aquí. Esta también es una parte interesante que quiero mostrar también algo de la definición. Al igual que, tenemos otro bloque al que se llama antes de cada uno y esto antes de que cada uno se ejecute antes que se ejecute cada prueba. Si tenemos alguna inicialización de variables y cosas así, también podemos ponerla aquí y pero para esta prueba, no la necesito, voy a definir mi variable exactamente por encima de esta prueba Déjame poner esto dentro del otro bloque describir porque aquí no necesito esto. Pero déjeme poner esto aquí. Permítanme también crear una función de envoltura que en realidad es una flejadora y espera una intro gira como un elemento JSX, proveedor de clientes acuáticos Aquatic clin proporcionó espera una intro gira como un elemento JSX, proveedor de clientes acuáticos Aquatic clin proporcionó . Y nuestros clientes lo estarán. También cerremos esto. Ahora porque estoy usando TSIX, también debería cambiar el nombre del archivo a TSX Vamos a importar esta consulta proveedor cliente entonces también necesitas importar esto de la a que nuestro cliente será el cliente quer y todo lo demás va a ir dentro de esto solo estoy ping todo lo que estoy pasando a esto voy a pasar propiedades infantiles aquí y voy a decir que hilern es un tipo de tuerca de reacción y la tonelada será elementos de reacción entonces tengo un tipo aquí. Esta será la envoltura. Ahora estoy esperando que devuelva los puestos de la APA. Empecemos a escribir esto. Lo que esperamos si vamos a renderizar este gancho, nosotros si obtienes los resultados aquí, estoy esperando este resultado. Voy a usar react render Hook que lo explicará en un segundo y voy a ir a usar post, y luego también pasaré aquí al rapero. Voy a importar post uso y también voy a importar de testing library react. biblioteca de pruebas es la biblioteca de pruebas de reacción, y vamos a discutirla en el siguiente módulo que es la prueba de integración. Para este video, solo lo estoy importando. Por ahora, lo único que necesitas saber es en realidad, tengo una reserva personalizada reaccionar y de esta manera, puedo renderizar este libro dentro de este envoltorio. Déjame también arreglar esto bonito. Cuando esto suceda, se establecerá el resultado. Pero este gancho es gancho asíncrono y ¿cómo puedo asegurarme de que esto se haya resuelto Porque esta también es una función ASN. Tenemos una función que es esperar de nuevo en la biblioteca react testing que bloqueará nuestra ejecución hasta que se cumpla una condición. ¿Cuál es la condición? ¿Cuál es la condición que estamos esperando de que el resultado que actual es el éxito sea cierto? ¿Qué significa esta línea? Estamos diciendo que debido a que se trata de un AC y es entonces cuando el éxito actual es cierto, por favor espere hasta ese momento. ¿Qué significa eso? Eso significa que react renderiza este gancho y luego rea query llama a la API, que no queremos la API, estamos reemplazando con la versión mark. Pero cuando se haya resuelto el éxito de esa promesa, podemos agregar una condición extra aquí y después de eso, nos aseguraremos de que fetch post se haya completado, podremos obtener los datos de eso con los datos actuales, y vamos a esperar estos datos sean iguales por las publicaciones marcadas Y debería hacer exactamente lo que hice con el marcado de los postes que hice aquí allá. Porque esta variable es la misma, así que voy a subir esto a este nivel para poder usarla en ambos y voy a usar también esta línea. Exactamente como el ejemplo anterior, estoy haciendo estoy marcando el eje que obtiene y aquí estoy esperando que después de eso los resultados sean este valor. Vamos a ejecutar la prueba increíble. Ahora la prueba se está ejecutando, para asegurarnos de que la estamos haciendo correctamente, solo puedo cambiarla a algo así como una matriz vacía y ahora esta prueba debería fallar, claro, porque estamos esperando obtener esta matriz de objeto. Y también la otra condición que me gusta comprobar aquí es que buscar publicaciones para haber sido llamadas en realidad con el mensaje adecuado Y Pero por ahora, podemos simplemente ignorar eso. Lo hago en el siguiente video. Ahora agregamos la prueba. Para este video, es a lo mejor es demasiado. Si lo deseas, por favor regresa si te fue difícil seguir, por favor vuelve a lavar este video Ahora vamos a ejecutar la cobertura y ver toda la cobertura. Ahora tenemos dos describen blog, uno para fetch boost, uno para el boost y ambos están funcionando y ahora verás que todas las líneas rojas se han ido Tan increíble. Tenemos una cobertura del 100% para esto. Al escribir esta prueba aprendimos muchos conceptos. En primer lugar, nos enteramos de las burlas. En segundo lugar, aprendimos sobre cómo podemos renderizar realmente un gancho personalizado dentro del envoltorio. Entonces también aprendimos otra función que es esperar, que es para la operación asíncrona, podemos bloquear nuestra ejecución de la prueba hasta asegurarnos de que la respuesta de reacquery esté Y sabemos que ha sido exitoso y es cierto, y entonces podemos comprobar nuestra condición de que en realidad si marcamos exusgs si estás diciendo que cada vez que exxous ese get ha sido llamado, entonces cuando se haya resuelto este gancho, entonces el valor debe ser Hagamos un poco de limpieza. Como recuerdas, agregué esta exportación a esta función solo por el propósito explicativo porque era más fácil probar esta función. Si yo quería desde el principio probar el anzuelo, entonces deberías saber todo sobre el marcado, todo, pero fue más fácil explicarlo primero. Sólo por esto, que es más fácil y luego para este gancho. Pero verás esa función, la mayoría de las pruebas que escribimos es similar. En realidad, no necesitamos exportar esta función y esta función debe mantenerse privada dentro de esta. Lo único que necesitamos usar es en realidad probar el gancho real. Yo me quito eso. Voy a dejar que también elimine fetch post aquí. Y hagamos la prueba para asegurarnos que en realidad no rompimos nada y ahora tengo un candado descrito en el poste en el nivel superior, así que no necesito este candado descrito. Puedo quitarlo y también puedo hacer un fread aquí para todo el archivo Ahora es más fácil de entender marcado tenemos un objeto marcado, tenemos una alianza querc y tenemos un wrapper y luego lo marcamos y luego esperamos que también pueda traer esto dentro de la prueba, se bloquea esto está relacionado con el a esta prueba En esta prueba, marcamos el eje que obtenemos y luego cuando renderizamos el gancho, esperamos que los resultados sean este valor. 22. Prueba unitaria de escritura para fetchPostById: Enhorabuena. Agregamos una prueba realmente complicada, y estoy feliz de que estés conmigo aquí. Entonces ahora que tenemos esta prueba, agregar una prueba para otros archivos será mucho más fácil. Déjanos hacerlo. Veamos también el post de uso. Esto también es similar. Tenemos el eje que obtiene la diferencia es que aquí estamos obteniendo un post por ID, y luego aquí también devolvemos esta función como una función de consulta para este Hoch, y también la tenemos como una como clave de consulta, tenemos dos parámetros post D. Vamos y creamos un archivo de prueba Voy a también puedo simplemente copiar y pegar este archivo, usar post, y puedo llamarlo, este, este. Usa post esa prueba 65 y lo haré dentro de mi descri, iré con poste y estas partes serán similares Yo diría que devuelve el post por identificación de la APA. Esta vez estoy esperando si tengo este tiempo espero que como esa puerta me devuelva un solo objeto, no una matriz de la pose de marca. También podemos cambiar esto en lugar de una matriz para que sea solo un objeto y voy devolver este remoto estas líneas y vamos a arreglar el pret aquí para este archivo Aquí vamos a esperar que vamos a devolver un objeto y luego vamos a en lugar de usar posts, vas a renderizar usar código postal y luego estamos esperando que los datos se marquen post y también puedes reemplazar esto porque esto no es una matriz así que vamos a usar también un solo formulario para esta variable. Y no necesitamos usar post, hagamos estas pruebas, maravilloso. Corramos también con la cobertura. Veamos también el reporte de cobertura. Y aquí, increíble, también tenemos cobertura de código al 100%. Esto es algo muy importante que quiero decirles que esto está pasando con las pruebas. A lo mejor al principio, requerirá mucho tiempo. Pero cuando tienes un poco de prueba cuando ya tu estructura de proyecto es buena y tienes otras pruebas, puedes agregar fácilmente más pruebas. Lo siento, acabo de olvidar aquí que también puedo debería como un número como parámetro a esto. Esto es realmente fácil. Ahora, agregué otra prueba y también me dejé ir y ejecutar la cobertura para todos los archivos. Puedo ejecutarlo con cobertura de peldaño. Ahora que ya tenemos ambas pruebas veremos que tenemos 100% de cobertura de prueba para la mayoría de estos archivos. 23. ¿Cómo funciona la mutación CreatePost?: En este video, quiero escribir prueba para crear post. Este es un libro personalizado de consulta real que nos permite crear post dentro de nuestro weblog Pero primero, veamos en nuestro tablero y veamos qué está pasando. Así que aquí dentro del panel de administración, tengo C post, que es meno el cual puedo ver todos los posts que se han publicado en el weblog Y puedo crear un nuevo post aquí escribiendo, por ejemplo. Título, descripción de la prueba y también puedo subir la foto. Voy a usar un docure si envío el post ahora verás que enseguida tengo cuatro posts y si voy a mi dashboard, como el número de los posts, voy a ver cuatro aquí Si elimino esta sección de administración y si voy al registro web, también tenemos un nuevo post aquí. Entonces, ¿cómo implementé esto? Implementé esto con una mutación en una consulta. Veamos el código fuente. Uno de los beneficios realmente buenos de rea query es que todas estas acciones se pueden hacer sin tener una tienda. Este es un componente a diferente. Esta es una mesa. Tengo una nueva forma dentro de esta página, que es un componente rea diferente y cómo estos componentes interactúan entre sí. Porque ahora como viste, cuando creé un elemento aquí, esta tabla se ha actualizado inmediato y también este número se ha actualizado de inmediato, y esto está sucediendo, por ejemplo, con borrado, si borro esta publicación, ahora, si voy al teléfono, verás que este número se ha actualizado de inmediato. Rea query proporciona función en consultas de validación, que dentro de eso cuando estoy usando mutación, se está utilizando mutación cuando queremos cambiar datos en el servidor, por ejemplo, adición, creación, eliminación, y todos estos tres son mutación. Y cuando queramos leer los datos, usaremos query y cuando queramos cambiar los datos en nuestra API, usaremos mutación. Y aquí verás el código. El código es sencillo. Solo estoy llamando a una publicación en el punto final de post y estoy pasando un formulario de datos que es toda la descripción del título en la imagen con el encabezado y el éxito, también olvidé lo que se llama aquí común. En caso de éxito, cuando esta API ha sido resuelta y esta API ha sido arreglada, estoy pidiendo rea query para invalidar la consulta, y cuáles son las consultas que quiero invalidar las consultas que está relacionada con los posts Y con esto, le estoy diciendo a rea query que necesitas refetch y recordar todos los hooks que está relacionado, que tienen estas claves de consulta, que es, por ejemplo, usar posts porque esto es también dirás que la clave de consulta es la misma Entonces, cuando hacemos eso y cuando sabemos que agregamos un nuevo post, debe actualizar la lista para el post. Entonces Ra query hace esto por nosotros. Lo único que tengo que hacer es decir invalidar consulta, y después de eso rea Query entiende que esta lista ha sido actualizada También podemos ver juntos. Si vengo aquí, si voy aquí, si voy a la sección de Netfox, creo atPost cuando presiono aquí, cuando agrego una nueva entrada, verás dentro de mi NetforXTPF tengo una solicitud de post, que es para la creación de este No blog, y la carga útil son los parámetros, y la carga útil son los parámetros, si voy a la sección de Netfox, creo atPost cuando presiono aquí, cuando agrego una nueva entrada, verás dentro de mi NetforXTPF tengo una solicitud de post, que es para la creación de este No blog, y la carga útil son los parámetros, lo que he ingresado. Lo interesante que tengo recibe solicitud para el puesto, y esto está sucediendo por invalidar consultas Entonces rea query entiendo que ahora esta consulta esta clave de consulta ha sido invalidada, por lo que recordará la API y esta vez la API devuelve cuatro objetos Por lo que esta tabla también se actualizará. Y esto está ocurriendo. También podemos ver, por ejemplo, para la eliminación, veremos dos solicitudes. Uno primero para la eliminación y esto es ahora, nuevamente, la solicitud de la G y ahora tenemos tres objetos. Y esto está pasando por esta línea. Entonces, para escribir esta mutación, necesito agregar dos pruebas primero para asegurarme que estoy llamando al punto final de API correcto, y la segunda es en realidad cuando estamos sucediendo cuando terminemos el éxito está sucediendo, quiero asegurarme de que estoy invalidando las consultas y también estoy invalidando la clave de consulta correcta. 24. Prueba de escritura para usar CreatePost (parte 1): Así que comencemos a escribir prueba para nosotros crear post. Puedo hacer las pruebas como hicimos para nosotros post marcando los axios, pero en este video, quiero mostrarte otra forma de las pruebas que podemos hacer Para ello, quiero mover esta publicación de subida a otro archivo. Déjame crear un archivo y llamarlo api. Déjame mover esta const a eso, déjame importar exportar publicaciones de carga predeterminadas ¿Por qué estoy haciendo esto? Porque quiero mostrarte otra forma de hacer las pruebas. Ahora que hice esto, ahora estamos importando posts de subida desde estas APIs. También necesitamos la coma aquí. Ahora quiero escribir unidades para esto y quiero tratar esta publicación de subida como una dependencia externa que esté fuera de este módulo. Hay dos formas en las que podemos hacer marcado en prueba versus con marca de punto que te mostré en los videos anteriores y otra forma es con el método de espionaje. Y para este video, quiero usar este nuevo método. Vamos y voy a copiar este uso post test y lo llamaré use create pose y también cambiaré mi descripción para usar Crear Pos. Aquí quiero agregar una nueva prueba que eso en realidad, quiero asegurarme de que cuando mi mutación, cuando uso create pose, llame a la API con el parámetro correcto. Entonces lo llamaré llamadas subir pose cuando se llama mutar En lugar de marcar axios, voy a quitar esta línea y vamos a ver usar crear post Quiero marcar completamente esta función porque ahora es una dependencia externa a esta unidad y en las pruebas unitarias como discutimos anteriormente, no me interesa lo que hacen otras unidades. Quiero reemplazar completamente esta publicación de subida con la versión marcada. Para hacer eso, iré y llamaré voy a quitar esta línea y en lugar de esta línea, llamaré a Spire Como primer parámetro lo llamaré, también puedo ir a cambiar. Vamos a importar estrellas AV de arriba un slash post slash aps Ts de arriba un slash post slash aps Ts El primer parámetro será el módulo que quiero marcar. El segundo será en realidad las exportaciones por defecto que quiero burlarme, que en este caso, es esta publicación de subida. Con esto, estoy diciendo que siempre que al módulo predeterminado de este módulo APIs, haya llamado al módulo predeterminado de este módulo APIs, que es upload post, no quiero ejecutar el código real dentro de él. Yo sólo quiero devolver un valor de marca para mí. Qué hace esta función cuando la API llama, será exitosa, devolverá el post. Simplemente voy a pasar el poste de marca que he creado. Y de esta manera, puedo decir que siempre que se haya llamado a esta API, por favor no vayas a Axios, no ejecutes el código, devuélveme este objeto Y con el espía encendido, en realidad podemos ver si se ha llamado a este método, cuántas veces se ha cortado con qué parámetros se han llamado. Así vuelve en versión espía, una muy bien, que guardé y lo llamaré subir post Spy. Y ahora quiero llamar y realmente llamar a mi mutación. En lugar de usar la fuerza, voy a cambiar esto para usar create force y voy importar esto y el wrapper con el mismo así que estoy renderizando este gancho. Para llamar a la mutación, voy a llamar a resultados esa corriente que mutan y voy a pasar marca Post Y voy a necesitar el peso para el bloque, pero habrá una diferencia. Voy a probar es que voy a esperar que mi SPI haya sido llamado y también su nos proporciona haber sido llamados tiempos Estoy esperando que se le haya llamado una vez. Aquí tengo un error porque estoy pasando el tiempo de marca. Veamos el post de creación. Entonces cuando estamos llamando cuando se ha llamado a la mutación, el parámetro es cuatro datos, así que debo pasar los cuatro datos. Así que arreglemos eso. Permítanme crear los datos de post de marca, que serán tipo de datos de formulario. Y permítanme adjuntar a esto un título, una identificación, que será uno y una descripción, que será descripción. Y cuando estoy llamando al mutado, necesito pasar este Mk post data Veamos juntos lo que está pasando. Estoy creando un objeto de datos de formulario. Estoy reemplazando la importación por defecto del APS, que es Upload force upload post con la versión Spy y estoy diciendo por favor devuélveme el post Mk que he creado anteriormente, y este es el Spy. Ahora quiero renderizar mi mutación. Siempre que se llame al mutado con estos datos de formulario, estoy esperando que se llame a la API Vamos a hacer la prueba. Y maravilloso. La prueba está pasando. Entonces si cambio esto, por ejemplo, a dos, esto es definitivamente debería fallar porque debería haber, como pueden ver, dice que tiene esperando que se llame dos veces, pero se le ha llamado alta. Y mi condición para esta prueba no solo debería ser también que se haya llamado a esta función, sino que estoy esperando que también hayan llamado con los parámetros adecuados. Entonces hay otra función, y haber sido llamada VD. De esta manera, también puedo probar que en realidad qué parámetros, función espía versión de esta función ha sido llamada. Voy a ejecutar la prueba y ahora la prueba está pasando 25. Prueba de escritura para usar CreatePost (parte 2): Entonces la primera, la primera parte de la prueba ya se ha hecho, escribimos la primera prueba con respecto al uso create pause, que estaba relacionado con la función de mutación, que es upload pause. Ahora queremos probar este éxito. ¿Qué hace esto? Esto realmente lee el cliente de consulta de este archivo y luego llama a las consultas invalidadas con esta clave de consulta Queremos asegurarnos de que antes que nada, siempre que se haya llamado a esta mutación sobre el éxito de esta mutación, se llamarán consultas invalidadas y además pasará los parámetros correctos Déjanos hacerlo. Simplemente voy a copiar esta prueba y luego empezaré cambiar lo que necesito cambiar para esto. Permítame también cambiar la descripción. Escribiré consultas invalidadas y éxito. Los datos del formulario permanecen, el gancho de renderizado permanece, la mutación permanece. Aquí, en lugar de probar, también quiero crear un spi para esta querclina porque también estamos importando desde una Vamos al archivo superior y vamos a importar ts query client Estoy importando este cliente de consulta y aquí también voy a crear otro espía aquí. Para este espía voy a usar este módulo y el método que quiero crear un Pi son las consultas invalidadas Aquí también puedo escribir valor de retorno, marcar valor de resultado, pero para esta prueba, no me interesa lo que está regresando con esta función. Solo quiero tener un SPI como su nombre indica Spy significa espiar Solo quiero asegurarme de que después de esta mutación, esta consulta invalidada haya sido capturada y haya sido llamada con los parámetros correctos Lo definiré como invalidar consultas espía. Dentro de mi expectativa, estoy esperando que ese espía de consulta invalidado haya sido llamado una vez Hagamos la prueba. Y ahora veremos que la prueba está fallando, así que depuremos juntos lo que está sucediendo. Aquí tengo éxito, aquí tenemos la consulta inválida. Mi mal, esto fue un error. Cuando veo la referencia de esta línea de consulta, esto es en realidad va a esta variable que he definido aquí. También siempre es bueno a veces mostrar errores a los que nos enfrentamos. No es así cada vez que empiezo a codificar, todo funciona perfectamente. Verán que esta línea ha sido cubierta porque por error, he usado la misma. Vamos y llamemos este módulo cliente cuérico, por ejemplo, dentro de nuestro Spi esperamos que realmente caduque en este módulo y luego hagamos la prueba Ahora maravilloso está pasando. Ahora también tengo un error tipográfico aquí. Ahora estoy seguro de que esto se está cortando y también queremos asegurarnos de que a se ha llamado con los parámetros correctos. Voy a dejar que falle la prueba porque estamos seguros de que ésta no es una. Veamos el mensaje de error. Entonces ahora ves que la prueba está fallando porque espera realmente recibir un objeto desde la clave de consulta hasta las publicaciones. Entonces, como puedes ver, el objeto que pasa es query key posts. Entonces voy a cambiar esto, arreglemos esto por cliente de consulta y no cliente de consulta, clave de consulta, y el valor debe ser publicaciones. Y volvamos a ejecutar la prueba y veamos query y también debería ser un array porque también estamos pasando un array y no solo string. Veamos increíble. Ahora nuestra prueba está pasando por escribir esta prueba, ahora me aseguro de que si algún desarrollador viene por error, por ejemplo, agrega algo a esto. Ahora tengo una prueba que fallará y evitará que esto suceda. Y este es el beneficio de tener pruebas unitarias y pruebas automatizadas. Si por ejemplo, viene otro desarrollador y por error elimina estas líneas de código o cambia eso, esta prueba también fallará. Siempre estamos seguros de que todo va a funcionar como se esperaba. Ahora que tenemos la prueba también vamos a correr todo el bloque con la cobertura para ver nuestro reporte de cobertura de código. Y vamos a aplicar y déjanos ir frescos esto. Maravilloso. Ahora, verás que realmente usar Create Post tiene una cobertura del 100%, esta prueba todo este archivo ha sido cubierto por nuestras pruebas. Entraré y empujaré mis cambios y continuaré mi trabajo escribiendo pruebas para usar editar y usar eliminar. 26. Pruebas unitarias para su usoEditarPublicar y usarEliminarPublicar: Agregué otras dos pruebas para los otros hooks, uso edit post y use delete post y la mayoría de los códigos fueron similares. Por lo que te recomiendo encarecidamente hacer una pausa en el video, tratar de escribir la prueba. Puedes usar las otras pruebas que escribí, usar Epos y luego aprenderlo de él y escribir la prueba Por ejemplo, hay algunos pequeños cambios, pero también es una muy buena práctica que lo hagas por ti mismo. Por ejemplo, aquí en editar post en nuestro sucton estamos invalidando dos consultas Primero está el relativo a la lista de la pose y el segundo es el relativo al ID de ese post específico que se ha editado la forma en que podemos probar esto es que puedo llamar puedo pedir que quiero que esto se llame dos veces, y quiero que se llame una vez con los posts como matriz y también una vez con el post e ID uno, que es ID uno es el ID de este post. Y ahora tenemos una muy buena prueba para todas estas carpetas. Así que vayamos y hagamos todas nuestras pruebas y déjenos y veamos toda la cobertura del proyecto. También lo puedo hacer en la terminal. Entonces, si no está utilizando la tienda web, podemos ejecutar NPEG con cobertura de Rundah Y aquí si vuelvo de nuevo a mi navegador, también puedo ver en mi terminal. Pero si vuelvo aquí, ahora verán que en realidad nuestra API está 100% cubierta, nuestras constantes y hostiles, todos estos ganchos que he creado, todos ellos han sido cubiertos al 100% Entonces toda la declaración, todas las ramas, todas las líneas y todo ha sido cubierto. Y para este módulo, no creé pruebas externas para estos archivos, y esa es la razón por la que no se han cubierto. Y por ahora, podemos ignorarlo y esto no es importante para nosotros en estos momentos. Pero hay un problema con la prueba, y podemos mejorar nuestro test un poco más. Ahora es realmente bueno que tengamos una cobertura del 100% para casi todo y también podemos ejecutar esto aquí para que también lo veas dentro de nuestro ID. Aquí verás que todos estos archivos han sido cubiertos al 100% con las pruebas. Pero hay otra mejora que podemos hacer para mejorar nuestras pruebas. En el siguiente módulo, voy a hablar de eso. 27. Haz pruebas de fábricas y sus beneficios: Hay algunas mejoras que podemos hacer para tener mejores pruebas. Imagínese aquí, hemos agregado tantas pruebas, por ejemplo, para uso creado. Usa create post, tengo un post marcado, que es tipo post type y tengo un objeto codificado duro aquí. Uso interior editar post, esto también es lo mismo por dentro, use post. Nuevamente, tenemos un post marcado, que es un objeto codificado duro dentro, use posts tienen una matriz que contiene solo un objeto y este objeto también es un objeto codificado duro. Esta es una definición de tipo. Imagina que estás trabajando en el producto de producción y después a veces hay un nuevo requisito para el cliente, desde el equipo de desarrollo de negocios o desde el equipo de soporte que cada puesto debe tener otro campo. Por ejemplo, el número de los me gusta o el número de los comentarios para esta publicación o una matriz de los comentarios. Y para poder soportar eso, debemos y la API primero proporcionará esos datos e imaginemos si queremos implementarlos. Entonces por ejemplo, número de comentarios. La forma en que lo implementaremos es que cambiaremos nuestro tipo y agregaremos este parámetro a eso. Pero ahora, todas nuestras pruebas tenemos este problema que debido a que estos valores, esto tiene este campo no existía en el tiempo que escribimos las pruebas, ahora deberíamos actualizar todas las pruebas nuevamente, la propiedad no existe y también podemos ver en uso crear pose. Este es un problema que podemos resolverlo mediante el uso de fábricas de prueba. Con las fábricas de prueba, en lugar de codificar duro un objeto, voy a definir una función que me devuelva un objeto, y este es el objeto de prueba, y luego podemos cambiar nuestra implementación de tal manera que estas pruebas solo usen esa fábrica y no sean dependientes. No están codificando duro en el ajuste. Hagámoslo. Voy a crear una carpeta, lo haré dentro de SRC, lo llamaré fábricas de prueba Dentro de test factory, voy a crear un nuevo archivo y lo voy a llamar post factory punto ps. Dentro de este archivo, voy a definir una función. Yo lo llamo lo llamaré, por ejemplo, get test post, que es una función que devuelve un tipo post y el valor de retorno para esta función será el tipo post. La definición sería, simplemente puedo devolver este objeto, por ejemplo. También necesitaré importar el tipo de poste. Incluso puedo hacer que sea realmente simple una línea con esto porque solo devuelvo un objeto. Vamos y por ahora, primero eliminemos este tipo para deshacernos de este error. Y ahora tengo una función que en realidad devuelve un objeto de prueba. Iré y dentro de todas las pruebas que he creado para la API. Me voy y en vez de esto, sólo voy a llamar a esta función. Puesto de prueba. Dentro de mi fábrica, también necesito exportar poste de prueba predeterminado. Aquí sólo voy a llamar a esta función. H. Y dentro de mi edit post, haré también lo mismo. Dentro del poste de uso, también reemplazaré este objeto codificado duro con poste de prueba KD y también lo importaré. Aquí creo que me olvidé de importarlo. Importemos también este dentro de mi post de uso, también reemplazaré esto con get test boost y también necesito importarlo. También pueden simplificar esto a esto hagamos todas las pruebas para asegurarnos de que no dirigimos nada y maravilloso. Ahora todas las pruebas están pasando ahora si la API está cambiando y por ejemplo, si necesitamos agregar un neopl, el único lugar al que necesito agregar esto será aquí Por ejemplo, voy a ir. Ahora otra vez, ninguna de mis pruebas necesita ser actualizada. Ninguno de estos cambios. Es necesario que se haga. Yo sólo voy a poner el valor aquí. Mantengámoslo tal como está. Perfecto. Este es el concepto de la fábrica y la fábrica es un patrón de diseño en ingeniería de software y el factor de prueba se llama cuando estamos usando fábricas, algunas funciones que nos genera un objeto y vamos utilizar este objeto dentro de nuestras pruebas de esta manera, estamos separando la definición de dominio de nuestra prueba. Si algo dentro de nuestros dominios necesita cambiar en el futuro, no necesitamos actualizar todas nuestras pruebas. Solo necesitamos actualizar nuestra fábrica. 28. Introducción a FakerJs: Otra mejora que podemos hacer para nuestra prueba es que como puedes ver aquí, codificé duro algunos valores como el objeto de prueba. Pero en la vida real y en entornos de producción, los usuarios utilizarán nuestro software con diferentes conjuntos de datos. Este conjunto de datos puede tener algunos caracteres especiales. Entonces H casos pueden ocurrir con la cadena con números y muchos de estos casos pueden ocurrir, pero si solo tenemos un objeto con valores codificados, y esto no puede probar toda la solución posible, todas estas posibles situaciones que pueden suceder. Para abordar ese tema, vamos a usar la biblioteca fakare, y FAKregs es una biblioteca que genera datos que imita valores del mundo real como nombres, direcciones, fecha, cualquier cosa sobre el correo electrónico, cualquier cosa sobre, por ejemplo, un nombre de la persona, un nombre de una empresa y cosas así. van a cambiar test, factory para usar faker con el fin de generar y obtener un objeto de prueba que en realidad es un objeto del mundo real en lugar de codificar valor Hay beneficios. Lo primero es que podemos tener datos dinámicos y realistas. Y también hay beneficios con cara que podemos crear fácilmente arreglos y tener múltiples entradas que estas entradas no están oplicadas En mi caso cuando tenemos use post cuando creamos una prueba para usar post, acabo de crear una matriz con un elemento. Pero con Faker Js, puedo crear fácilmente múltiples objetos y múltiples matrices, cual es más realista a lo que quiero probar Y además nos proporciona una mejor cobertura de prueba porque los datos son aleatorios. Puede contener un carácter especial, puede contener Hcases Si estás trabajando con números, nos proporciona números negativos, positivos y todas estas cosas se pueden poner en nuestra prueba y en realidad nuestra prueba es probar los datos del mundo real. También nos proporciona una forma de evitar los valores de codificación dura. En el siguiente video, voy a instalar faker Js y voy a cambiar nuestra prueba para usar Faker 29. Cómo usar FakerJS con Post Factory: Entonces comencemos con trabajar con Facare. Puedes ver el sitio web oficial de facare en fakjs punto v. Aquí, verás que tienen diferentes módulos para persona, ubicación, fecha, finanzas, comercio y Voy a ir a empezar y aquí para la instalación, sólo voy a copiar esto y esto es lo que necesitamos. Voy a nuestra terminal. Nuevamente, debido a que toda la prueba es solo para desarrollo, esta se instalará como solo una dependencia dev. Ahora que se ha instalado Facure, me voy y voy a importar fac poder importarlo desde el paquete Voy a escribir FacimPortFakre, de Fakre Js. En lugar de codificar duro el número uno para la identificación, voy a usar tarifa, ese tipo de datos, tipo de datos de tarifa, número o número de tarifa. Eso es. Esta línea en realidad me devuelve un número aleatorio. Tengo un tema de tormenta climatológica que no es importante. Eso no lo entendí. Ya lo instalo, pero podemos ignorarlo. Para Titan, voy a usar cadena aleatoria. Voy a usar Fac Lorem esa frase para descripción, voy a usar para generar un párrafo aleatorio y esta vez, iré con Para creado ese farsante proporciona mucho ayudante para trabajar con fechas Voy con faker, esas fechas y porque quiero usar un tiempo reciente, hay una función auxiliar reciente que devuelve una reciente y voy a convertirla a Iosring porque nuestra definición de tipo es Y para nuestra URL tR, necesitamos una URL de imagen aleatoria, así que voy a usar la imagen de la imagen o módulo del faker, y para el nombre, el nombre debe ser el nombre de la persona Voy a nombrar y sólo voy a usar el nombre de pila. Creo que esto ha quedado desaprobado veamos creo que dice usar persona en lugar de dejarnos ir y elegir el nombre y también puedes usar el nombre completo para Para la imagen, nuevamente, lo único que para nosotros es importante es la URL, así que solo voy a crear una URL para la fecha de publicación. Iré y saldré. Esta vez voy a usar un pasado. Un pasado significa que se ha pasado en alguna fecha en el pasado. Debido a que es String, lo voy a convertir en anillo y para número, voy de nuevo a usar un entero. También tenemos algunas opciones. Por ejemplo, puedo proporcionar media y max porque por ejemplo, sé que el número de los comentarios siempre es un número positivo, así que voy a usar un valor mínimo de cuatro Z. Y ahora verás que cada vez que esta función cuando se llame a esta función, estamos obteniendo un nuevo objeto y este objeto no tiene valores codificados duros y es con algunos reales datos y se ha llenado con datos reales. Ahora que tenemos el falso, también puedo entrar dentro de mi post de uso y aquí en vez de codificar duro solo un valor, puedo usar una matriz del faker Faker también proporciona una manera fácil de generar realmente múltiples datos En este caso, solo voy y estoy usando array dot From. Voy a pasar un objeto que la longitud sería, por ejemplo, diez y dentro y voy a pasar la función de flecha y dentro de eso voy a usar esto. De esta manera, también puedo en realidad, cuando tengo una matriz, también puedo reemplazar esto con un dato más realista. Ejecutemos esta prueba y asegurémonos de que esta prueba también esté funcionando. También puedo hacerlo mejor en vez de tener una longitud fija, también puedo ir y puedo usar con faker y luego puedo ir a número y tinta con algo, por ejemplo, mínimo uno y dejarme también importar fake Y el máximo sería, por ejemplo, 20. Sólo necesito arreglarlo. De esta manera, en realidad estoy probando mi código con datos reales y cada vez que obtengo una matriz aleatoria que contiene todos los objetos aleatorios. Vayamos a la terminal y hagamos todas las pruebas para asegurarnos de que todo sigue funcionando. Perfecto. Bien. 30. Resumen del módulo de prueba unitaria: Todo bien. Enhorabuena. terminado este módulo, que era relativo a las pruebas unitarias. Hemos cubierto una gran cantidad de temas. Primero, comenzamos a hablar de VTST, instalamos y configuramos VTS, y luego hablamos sobre la cobertura de código, diferentes métricas que existen en cobertura de código como líneas, ramas, declaración, función, y también discutimos sobre las diferencias entre la cobertura de código y la cobertura Y luego indagamos en la codificación, y luego agregamos alguna prueba unitaria. Primero, escribimos alguna prueba unitaria simple, y luego hablamos del concepto avanzado en pruebas unitarias como marcar y también usar Spy con el método de espiar invitaciones, y agregamos algunas pruebas unitarias. También para cada prueba unitaria, calculamos la cobertura de cotización para asegurarnos de que probaremos todas las opciones posibles. Y luego después de eso, comenzamos a mejorar nuestra prueba con el uso de las fábricas de prueba. Hablamos de la fábrica. ¿Cuál es la definición de fábrica de pruebas? Y hemos creado una fábrica de correos para nuestro proyecto. Y en el último módulo, también hablamos de faker Jes, y usamos faker para generar datos realistas para nuestros casos de prueba Este módulo era un módulo muy, muy bueno que has terminado, y ahora tienes una muy buena comprensión de las pruebas unitarias. También te animo si algunas de las partes no te fueron claras, siempre puedes volver a estos videos y volver a verlos. O también puedes terminar el curso. Y cuando hayas visto todos los videos para las futuras referencias, siempre podrás regresar. A lo mejor algunas de las partes serán más claras para ti si terminas primero el curso. Pero enhorabuena a ti. Hiciste un gran trabajo. Entonces tal vez puedas tomarte un café y tomarte un descanso, y entonces estaré feliz de verte en la próxima conferencia. 31. Introducción a las pruebas de integración: Enhorabuena por el acabado de la última sección sobre pruebas unitarias. En este módulo, vamos a platicar y trabajar sobre pruebas de integración. Hagamos un resumen sobre lo que son las pruebas de integración. Como dijimos anteriormente, las pruebas unitarias se centran en una unidad como una función o una clase como hicimos en el módulo anterior. Por ejemplo, comenzamos a escribir pruebas para una sola unidad, y para las otras unidades, usamos el marcado y espionaje para reemplazarlas con la versión marcada y espiada Entonces nuestro enfoque fue solo un movimiento. Y en las pruebas de integración, vamos a probar la integridad entre diferentes componentes y diferentes movimientos. Y si volvemos atrás y si miramos la pirámide de pruebas, pruebas de integración están en el medio. Entonces no son tantos como la prueba unitaria. Siguen siendo más rápidas que las pruebas, pero más lentas que las pruebas unitarias, y escribirlas es un poco más desafiante. Por lo que no son tan fáciles como baratas como las pruebas unitarias, pero aún son más fáciles para escribir dos pruebas. En este módulo, vamos a utilizar la biblioteca de pruebas de reacción para escribir pruebas de integración. Y primero, configuraremos esta herramienta y luego trabajaremos con esta herramienta para escribir prueba de integración. 32. Configuración del entorno para las pruebas de integración: Entonces comencemos a escribir nuestra primera prueba. Primero, necesitamos instalar las dependencias requeridas para la biblioteca de pruebas de reacción Voy a mostrar el paquete que Jason archivó y aquí voy a probar voy a buscar biblioteca de pruebas. Del video anterior, agregamos el volcado de biblioteca de pruebas. Simplemente no reacciones y eventos de usuario. Entonces ya tenemos las dependencias dentro de nuestro proyecto, y podemos comenzar a escribir nuestra prueba Pero para la configuración, también necesitamos cambiar nuestra configuración de TI. Veamos nuestro con conf. Aquí agregamos una sección de prueba, establecemos suturu global y establecemos el entorno a la JS Aquí también agregaré otra línea y agregaré una clave que es archivos de configuración y la voy a pasar a SRC slash Setup Dentro de mi configuración, voy a crear un archivo, crea un archivo mecanografiado con Dentro del archivo de configuración, voy a importar la biblioteca de pruebas JSA Voy a poner esta línea. Este es el esto realmente ayuda que cuando estamos usando algunas coincidencias como estar en el documento, lo hace disponible globalmente, para que podamos identificar nuestro ID entender y también podemos usarlos. Y para nuestro primer componente, para nuestra primera prueba, vayamos y escribamos dentro de nuestra carpeta para compartir. Contamos con una carpeta de componentes. Tenemos un archivo de índice, y quiero escribir mi primera prueba de integración para este componente. ¿Y qué hace este componente? En realidad, cuando estamos visitando nuestro sitio web, cuando estamos en la página principal de nuestro sitio web, tenemos un componente de publicación, y cuando haga clic en eso, verá la imagen de este post, la descripción de la pose y la persona que escribió este post. Como puedes ver, ya tenemos un bug aquí. Aquí, la imagen está equivocada y esto es si soy el escritor de este post, entonces la imagen debería ser corregida. Para este, voy quiero agregar una prueba para este componente. Veamos en el código fuente, va a tener un cospose que es un tipo de pose tipo y aquí estamos leyendo imagen y título del post y luego tenemos una tarjeta de estilo, que es un elemento y diseño Entonces aquí estamos configurando Avatar, avatar es un valor codificado duro y el título del post. Qué voy a probar, voy a probar eso en realidad cuando visite esta prueba, quiero ver una imagen con la t. quiero ver quiero asegurarme de que esta URL de publicación, la URL de la imagen es el valor correcto y también quiero asegurarme de que voy a ver el avatar correcto y también quiero asegurarme de que voy a ver el título correcto para esta prueba. Entonces hagamos esto en el siguiente video hasta ahora describo cómo vamos para qué componente, vamos a agregar una prueba y en el siguiente video, voy a escribir prueba para este componente. 33. Escribir la primera prueba de integración: Para escribir la prueba, voy y voy a crear un archivo, que lo llamo índice que prueba ese Tsix Voy a usar el bloque describir exacto y vamos a probar nuestro componente post. Después voy a añadir describir, yo diría, renderiza la imagen del post o post title. Probablemente aquí voy a agregar esto. Lo que vamos a hacer es que primero vamos a obtener este componente y renderizarlo dentro de la página y luego veremos qué está pasando con este renderizado. Para eso, vamos a utilizar una función de render que es proporcionada por la biblioteca de pruebas de reacción. Voy a importar render de testing library react. Dentro del render, en realidad puedo como un componente de reacción completo, y también necesitaré importar esto. Mi condición para la prueba sería que también puedo tener otra función de la biblioteca de pruebas de reacción que es una pantalla. Aquí puedo pedir desde pantalla que estoy esperando obtener por texto para estar en el documento. Voy a poner esto en una expectativa y luego estoy esperando estar en el documento. Lo que espero ver, estoy esperando cuando estoy renderizando un componente post, estoy esperando cuando vea la fuente estoy esperando que deba tener el título de este texto para ser mostrado. También voy a ver un error aquí porque nuestro componente post realmente espera que se reciba un objeto post. Vamos y primero creamos un objeto post y podremos usar nuestras fábricas para obtener un post aleatorio aquí voy a pasar esto a este componente, y ahora espero que ese post el título esté dentro de este documento. React testing library renders this component with this variable and then my condition for test would be that I am expecting that the title of this text to be sin Hagamos la prueba. Ahora veremos una flecha que en realidad dice ventanas que coinciden con los medios no es una función. Primero arreglemos esta flecha. 34. JSDom vs. entorno del navegador: Entonces, ¿qué es este error y por qué sucede esto? Para renderizar el componente, necesitamos un navegador. En realidad, cuando implementamos un proyecto react, browser ejecuta nuestro código fuente Javascript y luego renderiza el componente Pero cuando estamos haciendo pruebas con la biblioteca react testing, no tenemos el navegador y por eso, estamos usando JSTO Y JSDOM es implementación es una implementación JavaScript de Dom y HTM, y simula un entorno similar a un navegador Pero hay algunos casos en los que no todas las funciones que existen dentro del Navegador también existen dentro del JST aquí es el caso de que cuando estoy corriendo desde el navegador, estamos esperando ver un medio coincidente y por qué esto está sucediendo porque estoy usando t design como biblioteca de UI y Aunt design usa esta función internamente y cuando funciona dentro del navegador, está bien Pero cuando estoy ejecutando esta prueba contra JS Done en un entorno simulado, esta variable no existe. Cómo podemos resolver este problema. Esto ya lo aprendimos de los videos anteriores. Podemos marcar esta función, lo que significa que en realidad no necesitamos esta función, solo necesitamos pasar algo que imita el comportamiento de esta función Y para ello, como ustedes recuerdan, he creado un conjunto del archivo Ts, que estamos importando recién hecho. Aquí también puedo definir una versión simulada de la función. Aquí agregué este código y estoy diciendo que si ventanas que coinciden con los medios no es igual función, lo que significa que si esto no existe, voy a definir esta función. Esta función devuelve un objeto y la mayoría de estos objetos son nulos, las funciones, las he reemplazado por funciones vacías que no hacen nada, pero solo da esto cuando Como diseño quiere usar, simplemente lo hace disponible dentro del JSTo Añadamos esto y volvamos y hagamos nuestra prueba. Y maravilloso. Ahora nuestra prueba está pasando. 35. Terminar las pruebas de integración para PostComponent: Entonces hasta ahora, acabo de probar que puedo ver el título del post correctamente. Entonces veamos el componente, qué hace realmente este componente. Tiene una portada que es esta imagen como imagen destacada. Y esta imagen tiene un título como atributo alt que si lo siento, si muevo el mouse sobre él y si inspecciono sobre esto, puedo ver que aquí tengo el título del post como atributo alt. También cuenta con el SRC de la imagen. También quiero probar que mi componente post también renderiza la imagen correctamente. Agreguemos también una prueba para ello y dejemos a la derecha renders la imagen destacada de los posts, y también voy a añadir. Para el inicio, también volveré a usar el Voy a conseguir una fábrica para mi puesto. Voy a renderizar mi componente con biblioteca de pruebas de reacción. Aquí ahora podemos usar otra función auxiliar de la biblioteca de pruebas de reacción, que es G por texto Alt. Voy a decir get by Alt text, lo que significa obtener por texto alternativo. Voy a esperar que voy a llamar a esto como una imagen. En primer lugar, espero que esta imagen esté dentro del documento. Estar en el doc. Estoy esperando que mi componente renderice una imagen y segundo de todo, estoy esperando que esta imagen tenga atributo para el SRC Para eso, también puedo usar esta función auxiliar para Estoy esperando el SRC sea post image dot R. Primero, quiero asegurarme de que la imagen se haya renderizado correctamente y también quiero asegurarme de que el post tenga la imagen correcta Hagamos esta prueba. Y maravilloso ahora nuestra prueba está fallando. Si vengo aquí y si, por ejemplo, quite estas líneas. Ahora, estoy seguro de que hay una prueba que fallará porque ahora cuando renderizamos estos componentes, biblioteca de pruebas dice incapaz encontrar un elemento con el texto alternativo. Y aquí verás un valor aleatorio y esto es exactamente lo que discutimos sobre las características y sobre los valores. Probemos también el metal que en realidad estamos esperando ver una obertura Ya probamos este, así que voy a copiar este bloque. Y voy a renderizar el avatar completo ter avatar y elijo slash Te y vamos a hacerlo con más bonita, mejor Vamos a usar códigos dobles aquí y eso es lo que estás diciendo tu código. Aquí ahora estoy esperando de nuevo, lo que voy a buscar. Aquí puedo usar otra función helfare que pueda usar para buscar una publicación por su nombre de rol Hay otra otra función, obtener todo por rol. Aquí puedo pasar una imagen. Yo diría que quiero ver todas las imágenes. Cuando estoy usando get all by role, significa que estoy consiguiendo todas las imágenes y como puedes ver primero, tengo esta imagen y también hay otra puerta. Esto será una matriz. Estoy esperando así que llamemos a estas imágenes, y espero que las imágenes tengan una longitud de dos. Estoy esperando primero ver dos imágenes y para el 01, ya agrego una prueba para la primera, estoy esperando que esta tenga el post correcto ¿qué fue? El en ese AvaTorr. Para el SRC, para la segunda imagen, que es el índice de uno, estoy esperando ver el avatar uR Hagamos la prueba. Y ahora verás que la prueba está fallando. Entonces veamos incapaz de encontrar un elemento. Aquí están los accesibles. Lo siento, me equivoqué. El nombre del rol debe ser IMG. Yo lo reemplazaré. Realicemos de nuevo la prueba. Y ahora veremos que en realidad nuestra prueba está fallando, por lo que no se cumple el elemento que SRC, esta condición Esto es porque sabemos que ya tenemos este bug porque la URL es otra cosa. Esta es la URL codificada. Primero, arreglemos nuestro código. Reemplacemos esto con post, AatorRn y veamos que en realidad nuestro sitio web ha sido actualizado el aur ing es correcto Arreglemos esto con más guapa. Llevemos esto a Internet. Ahora esta vez debería pasar la prueba. Maravilloso. 36. Informe de cobertura de código para PostComponent: Y exactamente como las pruebas unitarias, también podemos calcular la cobertura para esta prueba. Entonces me lo voy a esperar. Y aquí, voy a correr post con cobertura. Y primero, correrá todas estas tres pruebas, y todas ellas están pasando. Y lo volveré a ejecutar. A veces hay un problema que en la primera vez no calcula la cobertura. Así que vamos a asegurarnos de que voy a obtener el valor correcto para la cobertura, y estamos en el postfolo compartido SRC Pasemos al reporte de cobertura, volvamos al expediente antiguo. Estamos en la sombra SRC y aquí dirás que fonder tenemos 100% de cobertura para este archivo 37. Prueba de integración de escritura para el componente de pie de página: Continuemos nuestro trabajo escribiendo una prueba para el componente del pie. ¿Qué es un componente de pie de página? Es solo un pie estilo es un pie que ha sido envuelto con el texto Ali center y muestra un mensaje sencillo. Si queremos verlo dentro de nuestra página web, veremos que este es el componente footer. Voy a crear un nuevo archivo para esto. Yo lo llamaré prueba de índice. T six y voy a describir block y el bloque describe sería para el componente completo y necesito una función de flecha aquí, y también necesito un bloque aquí, así que diré renders full correctamente, y también necesito una función de flecha aquí. Y tengo un tipo aquí. Siempre es bueno que cuando estás aprendiendo una nueva tecnología, una nueva biblioteca o un nuevo marco para practicar el mismo concepto dos veces. Para probar este componente, este es un componente simple, por lo que solo necesitamos asegurarnos de que esta línea y esta se muestre correctamente. Para eso, voy a usar render footere y voy a importar componente footer Voy a importarlo de mi propia carpeta no de ahí. Diseño y también voy a importar un render de pantalla de la biblioteca de pruebas de reacción y también la pantalla. Mi condición para esta prueba sería simple. Espero que este texto dentro de mi documento esté en el documento. Voy a copiar este texto y sólo voy a pasarlo aquí. Hagamos la prueba. Ahora verás que en realidad la prueba está fallando porque esto ha sido renderizado como lo tenemos dentro de nuestro componente, tenemos un perno y con el fin de asegurarnos de que está escribiendo propiedades, así voy a usar estas dos secciones. Estoy esperando ver este texto y esperaba ver este texto. Permítanme simplemente duplicar esta línea y para la primera condición, espero ver este texto y para esta, espero también ver esta línea. Vamos a arreglarlo bonito aquí y dejémonos rojos en la prueba. Y maravilloso. Ahora, la prueba está pasando. Como siempre, si un desarrollador por error viene y pone aquí algo, estamos seguros de que encontraremos el error relacionado con esta prueba y además dejemos correr la cobertura y estoy esperando una cobertura del 100% porque esta es solo una línea de código. Si lo vemos aquí, regresemos y vayamos a refrescar esta página. Tenemos el componente pie de página y aquí veremos una cobertura de código 100%. 38. Prueba de integración por redacción para la página de contacto: Entonces hasta ahora, agregué una prueba para este componente para este componente post y también para el Foote, pero no probé toda la página La prueba de integración que escribimos para los componentes post nos aseguramos de que el componente se renderizará correctamente. Pero esta página, si queremos probar esta página, queremos asegurarnos de que cuando estemos en la raíz de nuestro sitio web, veremos todos los posts que vienen de la API, y luego también veremos los componentes de pie de página y también queremos asegurarnos de que esto también funcione. Es un poco más complicado, vayamos y primero escribamos para la prueba para la página acerca de y para la página de contacto porque son más simples página estática y es más fácil escribir prueba. Primero, por ejemplo, vayamos y empecemos a escribir una prueba para la página de contacto. Dentro de la página de contacto, verás que agregué un texto que si tienes alguna sugerencia, por favor agrégame un texto. Creo que tengo un tengo algún enlace ES y errores tipográficos y cosas así Me agregué una dirección de correo electrónico y mi informe de Github y también mi enlace. Vamos a crear una prueba para esto. Vamos a llamarlo página de contacto que prueba ese seis, vamos a describir y describir será sobre la página de contacto? No sé, oí. Voy a añadir muestra el peop enlazado en enlaces correctamente. Para ello, voy a renderizar mi componente de página de contacto. Voy a importar este componente. También importo la función de render de la biblioteca de pruebas, y también estoy importando una pantalla y aquí mi condición sería que estoy esperando obtener mi dirección de correo electrónico dentro del texto y lo que va a estar dentro de los documentos. Lo que voy a decir, por ejemplo, quiero ver mi URL de LinkedIn aquí. Quiero asegurarme de que dentro de mi página de contacto, tengo el enlazado en URN y la URL es correcta. Ejecutemos esta prueba y veamos también que en realidad tenemos el enlace Github así que permítanme agregar también este para los GTUb También tengo un texto para la dirección de correo electrónico Asegurémonos también de que se renderizará el texto. Correcto. Aparte de eso, también tengo un párrafo. También tengo un contacto que es un H dos, también puedo agregar una prueba para eso. Puedo decir que la pantalla de resorte se pone por rumbo de rollo cuando espero que una partida tenga esto y espero que esto esté en documento y voy a esperar que esto esté en documentos. Aquí obtener por rollo excepto encabezado rol y el primer parámetro es el nombre, pero creo que va a fallar, así que eso es ayudar Porque en realidad esta tecnología no tiene el título, no tiene el nombre, pero lo que estoy buscando en realidad sería en realidad si busco encabezado, y quiero tener este texto, que es contacto. C. Puedo probarlo con esta función para tener texto cont. Ahora la prueba está pasando. Estoy seguro de que también puedo usarlo por pantalla ese texto y esperaba que estuviera en el documento. Pero aquí estoy agregando otra condición. También estoy comprobando que en realidad este texto existe y también este es un encabezado. Puedo probar todo el párrafo para esto. Yo diría que no es necesario, así podemos y podemos ignorar eso. Hasta ahora, acabo de probar que estos tes existen, pero en realidad todos son botones y tienen enlaces y tienen algunos íconos, así que también puedo agregar algunas pruebas para eso. Puedo venir y decir, puedo volver a usar pantalla get by roll y esto tiene el rollo butthead Estoy esperando ver en realidad los tres botones. Déjame separar esto, hagamos la prueba, se está desvaneciendo. Veamos que no podemos encontrar un elemento accesible con el rol. Veamos qué es lo que realmente reacciona probando biblioteca es renderizar. Como puede ver, han sido reemplazados por anclas. Son enlaces, son enlaces. Cuando tengamos el ancla, el rol será link. Déjame solo deslizar el enlace. Y encontró múltiples, debería decir obtener por fila. Ahora el nombre del rol es correcto, pero porque hay múltiples elementos, entonces debería decir get word. Ahora estoy seguro de que en realidad hay tres anclas por establecer Dentro de esta página hay tres anclas y ahora también puedo empezar a probarlas. Puedo definir esto como una variable. Y puedo decir, primero, necesito ver tres enlaces, y luego realmente puedo probar los enlaces para asegurarme de que son correctos. Entonces puedo esperar enlaces y para el primer enlace, tener en vez de, yo diría tener atributo y estoy esperando que el atributo de H ref para el primero sería correo a ese contacto en un programador D. Vamos a ejecutar esta prueba primero para asegurarnos de que la escribí correctamente. Perfecto. Está pasando. Añadamos también pruebas para el segundo y tercer enlace. El segundo enlace debería ser mi enlace Github y el tercer enlace debería estar vinculado. Yo también Dejemos que hagamos la prueba. Estoy maravillosa la prueba está pasando. Hagamos la prueba con cobertura para ver también el reporte de cobertura del código. Veamos la cobertura dentro de nuestra carpeta. Estamos en la carpeta de páginas laterales del SRC y aquí tenemos la página de contacto y se han cubierto todas las líneas de fuerza La cobertura del código también es buena. Con esta prueba, en realidad me estoy asegurando de que siempre mi página de contacto sea válida y correcta. 39. Prueba de integración de redacción para la página Acerca de: También agregué una prueba para la página A. En este video, no voy y no lo escribiré porque también es similar al video anterior. Te animo a que escribas tú mismo la prueba. Por favor, pausa el video, escribe tú mismo la prueba y puedes compararlo con mi solución. Se trata de una página estética. Lo único que nos importa es este texto se muestre correctamente, y como pueden ver, tengo dos encabezados aquí relativos a la página de contacto que solo tiene un encabezado y para alguna de la prueba, no era tanto importante, así que agrego, pero solo quería asegurarme de que, por ejemplo, este párrafo es este párrafo también es salidas. Si ves la prueba como anterior, voy a renderizar la página. Voy a conseguir todos los rubros porque ahora tenemos dos encabezamientos para el primero Debería ser sobre este proyecto como podemos ver dentro de nuestro proyecto A para el segundo encabezado, debería ser el curso ta entonces estoy esperando ver el texto y la meta y el código base y también todas estas cosas. En realidad, ya hice la prueba para ésta, así puedo eliminar esta porque ya tenía esta prueba para el rumbo así también puedo eliminar esta prueba. Hagamos la prueba. Es una prueba fácil, por lo que todas ellas deberían estar pasando y dejarnos también correr con cobertura. Y veamos el reporte de cobertura de costos. Ahora también vemos que tenemos la cobertura del 100% para el sobre sabio. 40. Prueba de integración de redacción para página de blog (parte 1): Hasta ahora, las pruebas de integración que escribimos no tenían ninguna interacción. Solo estábamos renderizando un componente o renderizando una página y luego esperábamos ver el texto de prueba correcto dentro de la página o dentro de los componentes. Vamos ahora a escribir una prueba para un componente que es un poco más complicado con la página de bloques. Como puedes ver dentro de nuestra página de bloqueo, tenemos una lista de posts y cuando hago clic en esto, cuando el usuario hace clic, puedes ver los detalles de este post. Y ahora quiero agregar una prueba que en realidad también pone a prueba este comportamiento. Entonces queremos escribir una prueba para una página de bloque. Eso asegura que los componentes se renderizarán correctamente y también implica una interacción del usuario y que la interacción del usuario es hacer clic en una publicación y asegurarse que realmente esta página se renderizará. Cuando hacemos clic, estamos esperando ir a una página que es slash post slash dos y esto implica la interacción del usuario Vayamos y escribamos esta prueba. Vamos a crear un archivo. Yo lo llamaré. Página de registro, la prueba seis vamos a describir log. Para el primero, compartiría renders posts correctamente. Veamos el componente. Aquí de nuevo, estamos usando react query. Entonces para hacer eso, deberíamos volver a hacer el marcado y también deberíamos proporcionar algún post y aquí realmente podemos probar para ver si vemos el elemento post y también vemos el enlace y también lo veremos correctamente. Vamos y eliminemos la prueba unitaria que agregamos para la API. Aquí teníamos un post y teníamos un post de uso. La forma en que hicimos esto, fue lo que marcamos, creamos a partir de Faker, obtuvimos un número de 1-20 y para cada uno de ellos, era esta fábrica de pruebas la que estaba generando un post de prueba, y luego envolvimos todo el componente dentro la reacquery y luego estábamos probando Permítanme copiar esto como valores de publicación y vayamos a la página de entrada del blog. Déjanos hacerlo paso para que veas todo lo que está pasando. Primero, vamos a correr ahí nuestra página de blog. Corramos por ahora esta prueba y veamos qué va a pasar. Volvamos aquí, cerremos esto. Como puede ver, la primera será ninguna consulta cliente uso consulta proveedor cliente. Ya conocemos este error, así que voy a regresar y voy a usar realmente para usar un wrapper y voy a copiar toda esta línea y dentro de mi componente post, necesito primero renderizar un proveedor cliente de consulta. Porque esta página usa este componente y para el cliente, voy a usar clientes y ¿qué hemos hecho anteriormente? Era como si estuviéramos usando esto como cliente de consultas. Vamos a crear un cliente de consulta y pasárnoslo a éste. Hagamos ahora de nuevo la prueba. Vamos a arreglarlo también bonito, hagamos la prueba. Y ahora verás que la prueba está pasando porque no tenemos ninguna expectativa. Entonces ahora, vayamos y agreguemos una condición. Qué queremos esperar porque el componente de primera vez estará dentro del estado de carga, así que voy a esperar ver este texto. Entonces déjame agregar esperar aquí pantalla que se obtiene por texto, y estoy esperando que esté dentro del documento en el documento. Entonces, hagamos la prueba. Y la prueba está pasando, pero este no es mi propósito. Este no es mi objetivo. En realidad quiero hacer esperar hasta que se resuelva esta llamada a la API, y luego quiero asegurarme de que voy a ver todos los posts. Y claro, no me interesa la llamada API real y la llamada API con la interacción con el servidor. Quiero marcar esta publicación de uso de una manera que devuelva una matriz de esta publicación marcada, y luego quiero probar que en realidad si esta función devuelve el valor de recolección, ¿veo la página adecuada o no? Entonces hagámoslo y marquemos realmente esta publicación de us. Voy a importar esto. Yo voy a usar D tanto como antes usábamos, y voy a marcar todo este archivo y publicarnos Dentro de mi prueba, voy a decir que en realidad después de haber definido esta variable, estoy diciendo que estoy esperando usar publicaciones. Como marca para devolver siempre un valor fijo. También importo marca de su lo que sería el valor de retorno para el valor de retorno como esperábamos los datos, que necesitamos un dato, que se marcará porque estamos leyendo está cargando un error y está cargando debe ser falso y error debería ser no. Entonces estoy reemplazando toda la voz de uso, reemplazando toda la línea con algo arreglado. Y aquí, voy a marcar todo el módulo con este valor. Otra cosa que es importante porque en la página en realidad es una página que ha sido publicada lo siento, block page es un link y tenemos links dentro de este componente. También necesito envolver todo el componente en el router de memoria. También voy a añadir un recuerdo. Enrutador aquí y voy a usar el componente dentro porque cuando quieras usar un componente de enlace, siempre debes tener un router como fuera de alcance y voy a poner aquí un router de memoria. Ahora, estoy esperando que en realidad esta vez, espero que esta línea no esté en el documento porque estoy esperando que esta condición no se ejecute y en realidad estoy renderizando esto para componente. Primero probemos esta parte. Y la prueba está fallando, vamos a decir que no se puede encontrar un texto, y esto es exactamente lo que esperábamos. Pero aquí ahora, debería sustituir esto por consulta por texto. Solo estoy esperando esto o tener longitud cero. Porque cuando digo esperar, entonces consigue mi texto , busca este texto. Ahora estoy diciendo que en realidad si consultas por todo este texto, y consulta o si estás buscando esta prueba y dentro del componente render, no deberías ver nada y esto debería tener longitud z Ahora la prueba está pasando. Mi propósito era probar realmente para ver todos estos componentes y primero, quiero asegurarme de que en realidad la publicación se renderizará y también quiero asegurarme de que los enlaces sean correctos. Y ¿cuántos enlaces debo ver dentro? Será el número de los puestos que tengo. Voy a establecer y estoy diciendo que consiga todo mi rol y para el rol voy a usar Link, y estoy esperando que esto tenga el número de estos posts marcados. Yo diría puestos marcados, eso es todo. Porque lo que está pasando, le estoy diciendo a la consulta de reaccionar. Le estoy diciendo a esta línea que devuelva el valor fijo que es este falso, el número de las publicaciones falsas 1-20 y esto itera sobre todas estas pruebas Estoy esperando ver este número de estos enlaces dentro de mi componente. Veamos esto y esto también debería pasarse. Ahora que tengo esto, asegurémonos de que, por ejemplo, el primer post en realidad tenga un enlace correcto. Vamos a copiar esta línea y aquí voy a conseguir el primer elemento. Voy a probar que esta prueba realmente tiene el atributo SRC y HR y el atributo HR debe ser un post y el ID del post Déjame usar también la pantalla de plantillas. Debería ser post y el primer post ese ID, estoy seguro que este link debe tener este atributo extra. Volvamos a ejecutar la prueba y esto también debería pasar. Ahora me estoy asegurando de que en realidad haya un enlace. Si alguien viene y cambia este código fuente a algo así, aún los usuarios ven las publicaciones. Pero esto no es calculable, y esta prueba que agregamos en realidad se está asegurando de que debe haber enlaces y los enlaces también deben tener un atributo Hf correcto Volvamos hemos eliminado ahora, debería pasar la prueba Además, quiero asegurarme de que en realidad también se renderizará este componente post. Si lo vimos en el video anterior que tuvimos alguna prueba, también puedo traer todo eso, o puedo decir fácilmente porque tengo otra prueba para el puesto. Ya probé eso, así que solo necesito eso, por ejemplo, para ver en realidad el título. El título del texto deberá estar en el documento. Pongamos a prueba el apretado. Yo diría que te pongas por mensaje de texto y estoy esperando los puestos en el mercado. El primero que es título para estar en el documento. Con esto, me estoy asegurando de que en realidad se hayan renderizado los componentes del poste. Maravilloso. Ahora esto está pasando y esto funciona como se esperaba. Si quieres, también puedes ir y también agregar más condiciones para la URL oatoria y también la imagen Esto hace que la prueba sea aún mejor para probar eso. 41. Prueba de integración de redacción para página de blog (parte 2): Hasta ahora, he probado eso en realidad, puedo ver el contenido de esta página, pero hice una prueba de que en realidad el usuario puede interactuar con la página. Para ello, vamos a usar user event from react testing library, que es una biblioteca que me permite simular e imitar el comportamiento de un usuario, por ejemplo, hacer clic, ingresar un formulario y cosas así Entonces primero, vayamos a nuestro paquete, Jason. Ya existía, así que estamos probando el evento de usuario de biblioteca, pero es una versión antigua. Vamos a instalar la última versión de esta biblioteca y vamos a la terminal y vamos a ejecutar NPM install. Primero, voy a actualizar esta biblioteca y después voy a agregar una prueba que en realidad prueba el clic del usuario en la prueba. La mayor parte de la prueba será la misma. Voy a crear un conjunto de funciones aquí y voy a dejarnos crear un conjunto de funciones y queremos marcar todo el post y queremos tener el mismo método aleatorio. Déjame poner todo aquí y déjame llamar a la configuración aquí. Déjame simplemente devolver este multi post porque necesito esto de esta función, voy a renderizar y luego voy a convertir kips Para la segunda prueba, voy a escribir una prueba como navega a la página de identificación después hacer clic en los ítems Lo que voy a probar, realidad voy a probar que cuando usuario haga clic en un botón y cuando el usuario navega, entonces verá esta página Para eso, voy a volver a usar la configuración, voy a conseguir el post marcado. Ahora, obtendré un objeto de usuario de la biblioteca de eventos de usuario, de la biblioteca de pruebas de reacción. Voy a llamar al método de configuración. Voy a darnos un usuario que puedo hacer algo como click. Algo que haga clic. Esto en realidad simula una interacción de un usuario con un elemento hasta la página lo que voy a hacer clic, voy a, por ejemplo, dar clic en el primer enlace que está relacionado con la entrada del blog. Asegurémonos de que primero tengamos todos los enlaces. Definamos una variable. Yo diría que todos los enlaces de publicación que serán y estoy obteniendo todos los enlaces dentro de la página después de renderizar mis componentes. Y estoy esperando primero que la longitud sea la longitud de publicación Mc porque para cada publicación, tengo un enlace, así que espero que se haga el primer enlace. Entonces voy a dar click en el primer enlace. Primero, asegurémonos de que hasta aquí, todo esté correcto. Vamos a correr esto. Ahora veremos faltante especificador de índice de configuración. Vamos a ver si hice mal la importación. Arreglemos esto. Solo necesitamos importar evento de usuario. Déjame simplemente quitar esto y luego volvamos a importarlo. No necesito el índice pero solo necesito ramificar esto a partir de eventos de usuario. Realicemos de nuevo la prueba. Bueno. Ahora está pasando y asegurémonos de que en realidad esta camarilla funcione Para probarlo, en realidad, necesito crear los enlaces correctamente. Para el primero porque no necesitábamos la prueba, no necesitábamos los enlaces. Acabo de agregar un router de memoria y solo lo aleteo porque lo único que queríamos verificar era asegurarnos de que el enlace sea correcto Pero ahora que en realidad tenemos la interacción entre los enlaces, veamos cómo también funciona nuestra app. Estamos usando router de memoria y este es un router de navegador y siempre que estemos en la barra, vamos a tener la página de bloqueo y luego cada vez que vamos a barra diagonal post ID, vamos a ver esta También voy a necesitar traer estas rutas dentro de mi prueba. Yo diría que quiero tener estas dos rutas y también quiero envolverla dentro del elemento ruta. Y también necesitamos importar rutas de react router Dom y también voy a quitar esta página de sangre y luego voy a poner esto a aquí. Ahora, en realidad, tengo un router que tiene una barra diagonal que muestra la página de renderizado y post mostrar esta página Dentro de nuestro router de memoria, en realidad puedo decir interés inicial, que significa lo que soy actualmente, lo que el usuario está ahí podemos decir que ya estamos slash para renderizar la página de bloque Ahora que en realidad el usuario haga clic en esta cosa, significa que empezamos desde la página de bloqueo. El router de memoria renderizará estos componentes. Ahora, está esperando que la página de detalles de la publicación se renderize después de hacer clic. Este es el contenido que quiero probar. Por ahora, debido a que esta página otra vez, usa una consulta, que es una consulta diferente que marcamos, voy a simplemente probar que en realidad estamos viendo la carga. Voy a agregar esperar aquí y cuando esto sucedió cuando estemos dando click en el post, vamos desde la página del blog, vamos a desarrollar la página de detalles y primero, veremos una carga, pero luego esto se resolverá a una respuesta y luego veremos todo el asunto. Pero por ahora, solo voy a agregar esto porque estoy esperando que esté dentro de los documentos. Hagamos la prueba. Ahora la prueba está ayunando porque el click el click es Acnc acción, así que también voy a añadir un aquí y también voy a hacer esta función acing Démosle tiempo hasta que el enlace y el click y todo funcione para asegurarnos de que esto esté funcionando. Perfecto. Ahora, la prueba está pasando y ahora estoy seguro de que en realidad esta navegación, este click en esta página está funcionando. Si quieres asegurarte 100% porque esta carga también existe dentro de la página de bloque. También tenemos aquí una carga. Ahora, te puedo mostrar algo, por ejemplo, cambiar esto para cargar detalles de publicación. Y luego dentro de mi prueba, puedo decir que en realidad necesito ver esto para estar seguro de que en realidad estoy probando lo correcto porque tal vez esto viene de la cosa o otra manera que será mejor sería en realidad decir eso antes de hacer clic, estoy esperando no ver la prueba de carga. Si cambio esto con consulta alba text, estoy esperando que sea tener longitud cero. Y significa que aquí estoy seguro que el valor simulado para el post de uso ha funcionado. Estoy viendo la página del bloque, todo el bloque se ha cargado, así que no hay página de carga. Pero cuando el usuario haga clic en él, entonces veré la prueba de carga. Ejecutemos esta prueba, y esto también es pasivo. La forma correcta en realidad sería tener también un valor de marca para este, este libro y asegurarse de que, por ejemplo, la diferencia entre esta página es así, mostraremos aquí el nombre del escritor. Si quiero probar eso realmente después de hacer clic, estamos en la página correcta, debo buscar al escritor de este autor de este post. Hagamos eso. Vayamos también y dejémonos exactamente como lo que tenemos. Marquemos aquí la publicación de uso. Solo uso post que trae toda la lista. Vamos a marchar ahora el sencillo. Para hacer eso, solo estoy copiando esta línea, también voy a mapear esta el post. También voy a copiar toda esta marca. Voy a decir que en realidad para esta época, vamos a devolver siempre el primer post. El parámetro no es importante aquí voy que ahora no quiero ver la carga, pero quiero ver en realidad al autor del primer post. Esta es la primera y ahora espero que eso vea esto. Así que vamos a ejecutar esta prueba y ahora veremos que los posts que map no es una función. Tengo un error tipográfico aquí, debería obtener uso post y también debería importar uso post También realmente siempre me encanta mostrar estos errores a mis alumnos porque esto no es así que estoy escribiendo código y funciona por primera vez. Siempre sucede que no vemos algo. Ahora tengo una prueba real realista que estoy probando, que he creado un router de memoria, he creado estas páginas, las he vinculado y estoy empezando con slash y ahora estoy involucrando en la interacción del usuario Y cuando hago clic en eso, me estoy asegurando de que la página haya sido cambiada y porque sé en esta nueva página que este elemento existe. Esta es también una de las mejores prácticas para no verificar la URL. Puedo comprobar que, por ejemplo, la URN debería ser un slash Postm, pero esto es algo interno y en las pruebas de integración, nos interesa en realidad lo que está sucediendo Entonces, ¿qué sucede cuando el usuario hace clic, debería ver el nombre de la persona y debería, por ejemplo, ver también la descripción de la prueba y también se puede agregar una condición, y yo diría que obtiene esa descripción. Pero debido a que la descripción tiene múltiples líneas, también voy a necesitar agregar una condición yo diría, si sólo las primeras diez líneas primero diez caracteres está ahí, está bien. Hagamos la prueba. Probablemente va a fallar porque la descripción tiene muchas entradas. Bien, no perfecto. No, ha estado funcionando. Y ahora estoy seguro que realidad esto funciona porque si vengo antes de hacer clic en esta página y digo consultar todo por texto, estoy esperando no ver el no ver la descripción porque cuando estoy en la página del Blog, solo veo el título, la foto. Si agrego esto, entonces estoy seguro de que en realidad si esta prueba pasa eso estoy probando el escenario correcto. También puedes eliminar esta carga. Primero, estamos en la página del Blog, no tenemos ninguna descripción. Ahora, el usuario hace clic en él. Estoy esperando ver el nombre del autor y esta vez también espero ver descripción. Y enhorabuena. Esta fue una prueba realmente complicada. Tuvimos que hacer muchas cosas, tenemos que trabajar con router de memoria, tuvimos que marcar algunas de las consultas que teníamos pero lo hicimos y esta es una prueba muy buena que la podemos usar dentro de nuestro proyecto. 42. Introducción a la prueba de escritura para la sección de administración: Ya agregamos pruebas para las páginas del blog y todas las páginas del blog tienen pruebas y también ejecutamos las pruebas con la cobertura, veremos que todas ellas están completamente cubiertas, lo cual es maravilloso. En esta sección, quiero ir y quiero comenzar a probar la sección admin. Para el lado del bloque, queríamos ver que la página del blog está funcionando, así veremos el post y cuando el usuario haga clic en eso cambia la navegación y también podremos ver la descripción del post. Y ahora quiero escribir prueba para la sección admin. Si vamos al administrador y a casa, aquí tenemos un número del post como tarjeta. Dentro del post, puedes ver la lista del post. Aquí el usuario admin tiene la opción de agregar un post. Puedo escribir algo y puedo en el post o puedo venir aquí y puedo presionar Editar y puedo cambiar la descripción y el contenido de este post. Estos escenarios están más involucrados con la interacción del usuario. En realidad, si quieres probar esto, primero usuario Admin debería visitar esta página, entonces debería venir y hacer clic en esta y luego debería cambiar algo en el título, cambiar algo en la descripción y luego probablemente cambiar una foto, enviar el post, y luego podemos asegurarnos que en realidad algo está funcionando correctamente. Estas pruebas son un poco más complicadas que las pruebas que tuvimos en la sección anterior. Pero lo interesante será que usaremos más biblioteca de pruebas de reacción y vamos a usar más funciones y más métodos de la biblioteca de pruebas de reacción. Y así en el siguiente video, voy a mostrarte un poco sobre los métodos y funciones que reaccionan probando biblioteca para interacciones de usuario proporcionan, y luego vamos a agregar pruebas para nuestra sección de administración. 43. Diferentes métodos y acciones de eventos de usuario: Entonces hablemos de eventos de usuarios. El evento de usuario es un componente de la biblioteca de pruebas de la biblioteca de pruebas de reacción que podemos importarlo así, importar evento de usuario en la biblioteca de pruebas, evento de usuario de barra diagonal El propósito de este componente es proporcionar interacción del usuario. Por ejemplo, podemos tener diferentes acciones. El primero, puedo ir y puedo escribir dentro de un elemento de entrada, hola. Y con estos ayudantes, en realidad podemos probar las interacciones del usuario con nuestros cuatro elementos En el segundo ejemplo, puedo aclarar lo que ya escribí en el elemento test. Y con click y DBL click, es doble click. Puedo hacer clic en un botón o puedo hacer doble clic en un elemento de celda. Imagina que tienes una tabla, y la tabla si usas un doble clic va a la edición más, que puedas cambiar el contenido de sí misma. Y para probar que tenemos DBL click, que es doble click Podemos probar el desplazamiento del mouse sobre un elemento para ver si está sucediendo una punta de herramienta Si tenemos una selección que tiene opción múltiple, podemos usar la opción method select para seleccionar un valor de esta opción. Si tienes una casilla de verificación para que se marque, también podemos volver a llamar, dar click con los elementos checkbox y para la subida, podemos llamar a eventos de usuario upload y luego pasaremos el archivo que queramos subir y también las entradas que se le asignen con esta acción Estas son las diferentes acciones y me parece realmente interesante que con la ayuda de la biblioteca react testing, podamos probar todo este tipo de acciones y podamos ver qué pasará en nuestra app cuando simulemos las acciones que los usuarios están tomando al trabajar con nuestra aplicación. 44. Prueba de escritura para la mesa de administración (parte 1): Así que comencemos por ir a nuestra carpeta de administración. Dentro de nuestra carpeta de administración, tenemos dos carpetas, páginas de componentes, y primero voy a escribir prueba para la carpeta de componentes. Y verás que tenemos una barra lateral y la barra lateral es un elemento de menú que este es el menú que está mostrando en el lado izquierdo de nuestra página. Y tenemos un post que aquí tenemos crear o editar post. Este es el componente que cuando creamos un post o editamos un post muestra este formulario y tenemos el post list, que es este componente de tabla que renderiza lista del post, y tenemos el botón delete que cuando el usuario presiona sobre él, puedo muestra un primero, muestra una confirmación y si el usuario presiona yes, entonces borra el post Entonces comencemos a escribir test con el primero para el post de la lista, y veamos el componente, qué hace el componente. Utiliza, de nuevo, estamos usando aquí reac query para buscar los posts, y si está en la carga, vuelve, y luego si hay un error, vuelve, y luego vamos a tener unas columnas, que es una matriz de objetos Y esta es en realidad la tabla que se renderizará y cada columna es la primera columna es un número, así que solo estamos renderizando un índice en ella. La primera columna la segunda columna es la imagen característica, y estamos leyendo del post la propiedad de la imagen y URL, y el renderizado será una imagen con el texto alternativo del título del post y la URL de la imagen, y luego esta es la segunda columna. La tercera columna será el título. Lo cual apenas estamos leyendo el título del post, y la primera columna serán las acciones. Y dentro de las acciones, tenemos primero un enlace a una edición que va a este enlace admin post edit, y tenemos un botón dite que estamos renderizando y estamos pasando el post ID a eso Y en realidad, estamos renderizando una tabla con estas columnas que te mostré, y nuestra fuente de datos serán en realidad los objetos que se renderizarán dentro de esta tabla, que son los posts de los que los hemos leído readquire así que comencemos a escribir test Voy a crear un archivo. Voy a recoger Listar publicaciones. La prueba prueba y voy a añadir un bloque describir y será para el componente post lista y dentro de eso voy a añadir un bloque. Como primera prueba, solo quiero asegurarme que si la página se está cargando, vamos a mostrar esta carga. Yo solo estoy escribiendo randoms cargando si no se han cargado los posts Sin embargo. Voy a pasar una función aquí y mi expectativa será en realidad, vamos a importar también. Vamos a renderizar el componente de lista y vamos a importar post, vamos a importar render, vamos a importar también Pantalla biblioteca de pruebas de reacción y nuestra condición sería la pantalla que obtiene por carga de texto para ser inexacta Estoy seguro de que sabes que la primera vez que esta prueba no va a pasar porque en realidad necesitamos marcar publicaciones de uso. Ya lo hicimos, así que voy a las páginas, voy a sitio y voy a páginas y voy a la página del blog. Lo hicimos así. Usar poste. Voy a copiar esto que teníamos anteriormente. Lo puedo poner antes aquí. También tenemos que marcar primero todo el módulo. También necesito traer esta línea para esta, quiero que un dato no sea nada para ser un NTR y quiero aquí para facilitar la carga para que sea verdad Quiero asegurarme de que este componente muestre la carga. Vamos a hacer estas pruebas. Y un punto que quiero mencionar aquí es que es lo más importante de las pruebas. Ya ves lo fácil que agregué la prueba porque anteriormente tenía la misma solución, y solo uso la misma solución aquí. Y mucho desarrollador al principio, cuando empiezan a aprender sobre las pruebas, piensan que es complicado. Requiere tiempo. Al principio, sí, pero cuando configuras tu proyecto y estás configurando cuando estás escribiendo los primeros casos de prueba, después de algunas veces siempre puedes usar los ayudantes, usar las marcas, usar la especia que hayas creado previamente, y hará que sea mucho más fácil para el futuro escribir pruebas Entonces ahora verán que acabo copiar algo de mi prueba anterior, y ahora tengo mi primer escenario, que es asegurarme que en realidad esta prueba sea leal. Y ahora vayamos y cambiemos y agreguemos otra prueba que en realidad estamos esperando renderiza una tabla con una lista de posts. Y ahora, voy a probar que en realidad si cambio esta marca a vuelve a cargar sería falsa y devuelve una lista de publicaciones marcadas, estoy esperando ver una tabla. Y esta tabla debería tener un índice. Esta tabla debería tener y todas las columnas que hemos visto. Y para este post marcado, nuevamente, voy a usar lo que he creado anteriormente. Sólo voy a copiar esta línea. Ya tenemos al farsante. Estamos generando un número con un faker y para cada uno de ellos, vamos a utilizar la función helper, la fábrica de pruebas que hemos creado para esta prueba Voy a renderizar esta vez, voy a esperar no ver nada. Voy a consultar todo por texto y estoy esperando que esto tenga longitud de cero. Espero que esto no se muestre. Hagamos esta prueba. Ya vimos este error anteriormente. Esto está sucediendo porque si voy al post de la lista aquí, también tenemos un elemento link. Para solucionar este problema, debería envolver mi componente dentro de la ruta de memoria. Voy a envolverlo en una ruta de memoria y voy a arreglarlo con más guapa Volvamos a leer sobre la prueba. Y ahora vamos a obtener otro error que también vimos anteriormente, no hemos proporcionado consulta proveedor cliente, vamos y también vamos a traer esto de nuestra otra prueba y vamos a envolverlo. También necesitamos la línea de consulta, vamos a traer también esta línea de la otra prueba. Lo pondré dentro de mi bloque declarado para que todas las pruebas puedan usarlo . Eliminen estos. Volvamos a ejecutar la prueba. No y este error en realidad no está relacionado con nuestra prueba. Esto viene de nuestro componente que reacciona espera que cuando tengamos una lista, que es como, por ejemplo, una tabla, cada fila debe tener un ID único. Y el diseño nos proporciona una clave de fila de propiedad que podemos decir, cada pose tiene un ID y por favor use ese ID como clave para esto. Y porque sabemos que las identificaciones son únicas, ésta será única. Así que agreguemos eso y volvamos a ejecutar la prueba. Y ahora veremos que la advertencia anterior se ha ido, y ahora tenemos un nuevo error, ventana no implementada que computa estilo Y esta es la misma situación con el JSTOM y navegador que dentro de JSTOM no tenemos todas las funciones, así que carta para resolver eso nos deja ir a nuestro conjunto de archivos de configuración Y así lo hicimos anteriormente con los medios de partido, también voy a agregar una nueva marca aquí. Entonces voy a simplemente escribir esto como una ventana que consiga estilo computes, y y solo voy a marcar esto con algo que siempre devuelve y una cadena Eso fue venir y regresar y ejecutar la prueba. Ahora la prueba está pasando y no tenemos ninguna advertencia y error, así que está limpia. 45. Prueba de escritura para la mesa de administración (parte 2): Pero en realidad, para que la prueba sea realista, necesito asegurarme de que la tabla se renderizará y veré todas estas filas y todas estas columnas. Entonces para hacer eso, voy a definir una variable para filas, y yo diría pantalla que obtiene toda la fila de rollo. Y estoy usando Ant Design para la biblioteca de UI y ntsign una fila fila para cada fila Entonces aquí tenemos una fila de encabezado y tres es para el post. Entonces estoy esperando a C, el número de las filas debe ser el número de los postes marcados que es de longitud y uno también para cabeza. Si tengo tres filas, entonces debería ver una mesa con una fila con cuatro filas. Hagamos su prueba. Y ahora está pasando. Pero volvamos a ejecutar la prueba y volvamos a ejecutar la prueba y ahora verás que la prueba está fallada. Quería mostrarles porque este también es un tema realmente interesante en las pruebas y ahora veremos el beneficio de tener el farsante y beneficio de generar números aleatorios Si aquí tuviera una matriz de longitud fija de tres elementos, esta prueba siempre se pasaría. Y no pude ver este caso. Por qué está ocurriendo este caso. Veamos corrí la prueba por las dos primeras veces que estaba pasando por tercera vez, está fallando. Dice que estamos esperando 21, pero el real es 11. Lo que está pasando aquí es nsdsign. Esta tabla de ntsign por defecto proporciona una paginación con el tamaño de diez Oh, yo tengo más de diez posts, va a mostrar una inación de página. Podemos probarlo estableciendo una paginación para que sea un objeto para ser un objeto Creo que debería pasar el tamaño de página de uno. Imaginemos que si tengo el tamaño de página de dos o dos, verás que ahora, me muestra una paginación, para el si cambio este tamaño de página a una, ahora voy a ver tres páginas Por defecto, estas opciones existen y es para las diez filas. Cuando está sucediendo cuando el número de las s marcadas son más de diez, y el diseño solo muestra la primera fila de diez y tenemos una fila de encabezado por lo que debería ser 11. Para que esta prueba funcione, tengo que probar esto que si marcado longitud mayor a diez, entonces estoy esperando obtener un 11 para ver un 11. De lo contrario, estoy esperando ver la longitud. Entonces si el número del cartel tengo más de diez, estoy seguro que la inación de la página va a pasar, así que estoy esperando ver 11 registros. Pero si es menor que, en realidad debería ser el número del puesto más uno. Ahora volvamos a ejecutar la prueba. Ahora está pasando. Volvamos a ejecutarlo y volvamos a ejecutarlo, y ahora veremos que siempre lo es. Con el fin de asegurarme puedo cambiar también este número a 12 para asegurarme de que en realidad mi prueba está cubriendo con la paginación O podemos cambiarlo a la. Es aún mejor si separo esta prueba a dos categorías. Déjame copiar toda la prueba. Primero creemos también un archivo de configuración porque no quiero copiar y pegar todo. Vamos a crear una configuración y esta configuración será una función que voy a poner todo esto dentro de la configuración y voy a devolver Mark post como lo hicimos anteriormente aquí voy a llamar a setup voy a decir eso y voy a definir también los posts marcados aquí para el primer caso de prueba, estoy esperando que los muestre. Voy a copiar toda la prueba y también me aseguraré de que lo llamaré renders una tabla B Hagenation si el número de los puestos son más Y para este caso de prueba, estoy esperando obtener siempre 11 si sé que el número de los puestos son más de 11. Y para simular esto, voy a pasar un parámetro a setup, que será número de posts, que será un número. Y aquí voy a dejarnos llamarlo min y max. Quiero también min max numero de publicaciones. Vamos a llamarlo número de publicaciones. En vez de siempre uno y 20, voy a pasar aquí estos parámetros. Para el primer caso de prueba, siempre voy a pasar una prueba y también puedo hacer que sea el valor predeterminado para uno y en 20. Para el primer caso de prueba, quiero asegurarme de que es menos de diez, así que iré con uno y nueve. Quiero obtener un número de los puestos 1-9 y tengo esperando ver Para el segundo caso de prueba, voy a arreglar algo 11-12 Para este, quiero asegurarme de que la prueba es en realidad la tabla muestra una pagenh Asombroso. Ahora, tengo dos pruebas específicamente. Por dos condición que está ocurriendo. Con esto, también puedo asegurarme de que mi tabla muestre la paginación y cómo podemos asegurarnos de que está funcionando Yo solo vengo aquí y cambio la paginación. Por ejemplo, a false, eso significa que la tabla de páginas no muestra aquí la paginación, entonces esta prueba debería fallar Y verás que esto está fallando porque en realidad renderiza todas las filas y no sólo la primera. Ahora estoy seguro de que estoy renderizando una mesa, y esta mesa tiene suficiente el número correcto de los rollos. Pero también quiero demostrar que estoy renderizando la tabla correcta. ¿Y qué tiene esta mesa? Esto tiene un encabezado, así que quiero asegurarme de que voy a obtener todos estos encabezados correctamente. Quiero que mi primera condición sea obtener por texto, y voy a usar una etiqueta hash para estar en el documento. Hagamos esta prueba. Y está pasando, así que voy a probar y voy a agregar un comentario aquí probando los encabezados de tabla. Y la segunda será una imagen destacada o estás esperando ver este texto dentro de mi mesa, también espero ver un título y una acción. Ahora, estoy seguro de que en realidad la tabla también tiene los encabezados correctos. Tengamos también eso a prueba. Por ejemplo, el primer post se mostrará correctamente. Vamos a copiar esta línea y vamos a probar el contenido de la tabla. Para el primero, por ejemplo, voy a conseguir el primer post. Y espero que el título de este texto esté dentro del documento. También quiero ver el botón de editar y eliminar. Por ahora, eliminemos esto porque siempre tengo múltiples botones, vamos a conseguirlos por todos por rol. El primero es en realidad un enlace, así que puedo usar la fila de enlaces. Consigamos todos por varilla y obtengamos todos por rollo y luego obtengamos el primer enlace y ¿qué queremos verificar? Queremos comprobar que en realidad el enlace tiene un valor correcto. Tienes atributos Hf debería ser Admin post edit y el post ID, admin post Editar también obtener el ID desde el primer post. Déjame simplemente quitarles a estos dos. Arreglemos esto con más guapa y hagamos la prueba. Y ahora la prueba está fallando, en realidad esperar que el elemento atribuya admin post. Tengo una S aquí extra. También puedo reemplazar esto con las pruebas de plantilla. En lugar de tener un plus, también puedo reemplazarlo para que sea así. Si hago eso, creo que será posible en bien sé que lo es. Vamos a devolverlo a lo que era anteriormente. Pero tuve un error tipográfico y ahora estoy esperando que esta vez pase así que ahora veo, estoy seguro que el título está aquí, el edit está aquí y también para el delete, tenemos un botDe éste, también puedo asegurarme de que los botones existan, así también puedo conseguir esperar pantalla que se ponga todo roll y aquí voy a decir botón, estoy esperando exactamente como el número de las publicaciones para el botón. Si tengo tres puestos, también quiero ver que mi tabla renderiza tres y tres. Ahora tenemos dos un error porque creo que la paginación también está aquí Dejemos más claro que para hacer la prueba más específica para el botón, puedo pasar un segundo parámetro cuando estoy usando get role y puedo decir que quiero obtener solo los botones que el nombre del botón es eliminar. Porque si miramos el componente, si vemos que tengo, esto es una confirmación y dos opciones son sí y no, y el texto es eliminar. Yo les digo, por favor dame solo los botones que son el nombre se borra así que no quiero que me confundan con estos botones. Leamos en la prueba. Y ahora está pasando. Leamos en él varias veces para ser probados con diferentes conjuntos de datos, así que en realidad estamos seguros que nuestra prueba es correcta y estamos probando la corrección. Maravilloso. Ahora tengo la prueba para la mesa. Tengo la prueba para la paginación, y en el siguiente video, voy a interactuar realmente con el botón Editar En realidad quiero hacer clic en este botón Editar y quiero hacer clic en este botón Eit y quiero agregar escenarios para estos dos casos 46. Prueba: editar el elemento de acción: Ahora que hemos agregado pruebas para el renderizado en esta tabla, y nos estamos asegurando de que se renderice el título, el número de las filas sea correcto y la tabla se renderice correctamente. Quiero agregar un botón de prueba para editar y eliminar Acciones. Y en este video, voy a agregar una prueba para editar. Y lo que voy a probar, quiero asegurarme de que cuando el usuario haga clic en esta edición, entonces los usuarios verán esta página y esta página tenga una entrada, tenga un área de texto, tenga un botón de subir y enviar botón. Pero la interacción de los usuarios para esta página, no es importante para mí para esta página. Solo quiero asegurarme que cuando estoy presionando el botón Editar, este irá a la página correcta y el usuario será redirigido a la página correcta para hacerlo, llamaré y crearé un nuevo bloque de describir y diría que llamaré y crearé un nuevo bloque de describir y muestra la página de editar publicación cuando el usuario haga clic en la acción Edits Edit Voy a pasarle una función y eliminemos esto. Al igual que anterior, voy a configurar mi post y voy a limitar el número al 1-5. Diré contras puestos marcados iguales a este post. Lo que estoy esperando, estoy esperando ver los enlaces, así que voy a la primera condición sería en realidad que este enlace tenga un atributo correcto, debería ser un administrador de barra diagonal, si ves en la esquina inferior izquierda de la página, el enlace debe ser admin, barra diagonal, editar uno Consigamos enlaces y yo los conseguiría por una pantalla que se pone todo por rollo. Para el primer enlace, voy a esperar que los enlaces cero tengan atributos Hf links. El href debe ser admins ID, post Edit. Permítanme reemplazar esto con la cadena de plantillas y permítanme agregar también exactamente una publicación marcada. Estoy esperando obtener la identificación del primer post estará dentro de la f de este enlace. Ejecutemos esta prueba y está pasando. Después de eso, quiero dar click en este enlace y podemos hacerlo con la ayuda del evento de usuario de la biblioteca de pruebas React. Voy a definir un usuario y llamaría a eventos de usuario que configuro y voy a dar click en el primer enlace. Porque agregué evitar, ahora también debería cambiar esta función para que sea asincrónica Y después de esta edición, voy a esperar y voy a ver el post de edición. Voy a agregar la condición, pero sé que la prueba fallará. Hagámoslo juntos y les diré por qué esto es fallar. Vayamos aquí. Demos clic en la edición. Yo voy y les estoy diciendo que espero que esto se vea dentro de esta página, y voy a esperar que este texto esté dentro del documento. Y hagamos la prueba. Como dije, va a fallar. Ya nos enfrentamos a este problema antes. Quiero que detengas el video, lo pienses y adivine lo que está pasando mal aquí. Todo bien. Si recuerdas, tuvimos el mismo problema dentro de la página del blog, y la razón es que porque si vuelvo a nuestra configuración, aquí, acabo de agregar un router de memoria y acabo de renderizar la lista post componentes. ¿Y por qué hice eso? Porque dentro de nuestro componente de publicación de lista, teníamos un enlace, y en react, cada enlace debería estar envuelto dentro de un enrutador y acabo de agregar esto. Pero no definí las rutas. Yo no definí los enlaces. No definí la navegación entre ellos. ¿Dónde se ha definido esto? Si vamos a nuestro post nivel 65, aquí se han definido las rutas. También necesito definirlos para la prueba. No los necesito a todos. Solo necesito por ejemplo, aquí pensé cuando estamos en el post de barra diagonal admin, por favor cargue la página del post Cuando estemos en la página de edición, cargue la página Editar. Entonces voy a traer esto y voy a tener un bloque de rutas aquí, bloque de rutas, y voy a traer esto y también necesito el espacio de post. Solo necesito estas dos rutas. Y también agregaré un prefijo admin. Yo diría que si estás en las publicaciones de administración porque esta página es barra diagonal admin publicaciones de barra diagonal Por favor, cargue la página de publicación. Si estás en la publicación de administración eliminar, por favor renderizar la página de edición de publicaciones. ¿Por dónde empezamos? Estamos a partir de esta página. También voy a pasar este parámetro como entrada inicial. Entonces ahora, en realidad tengo un router de memoria. Tengo un router que tiene dos rutas y estamos empezando por aquí. Ahora entonces presiono la edición, hay un elemento y hay un índice para esta ruta. Bajemos y volvamos a ejecutar la prueba. Y las pruebas siguen fallando, veamos qué está pasando. Verás eso por dentro, no, no tengo cargando componente y ¿qué está pasando? En realidad, la navegación se ha hecho, pero como fuimos al post de edición, vayamos y veamos esta página. Cuando vayamos a esta ruta, esta página se cargará y esta página, tenemos esta línea. Entonces porque intenta recuperar la publicación del servidor y luego pasa primero al estado de carga Entonces seguimos viendo el post de edición, no estamos viendo este título. Así que vayamos y marquemos esta publicación de uso dentro de nuestra prueba. Y para marcar post, ya hicimos esto también anteriormente. Voy a simplemente quitar solo voy a copiar la prueba que teníamos de la página de bloque. Lo hicimos así. Voy a copiar todo el bloque. Y dentro de mi página de administración, también voy a agregar esto y estamos diciendo que en realidad el primer post debería estar regresando siempre en la perura usar posts, devolver todos los posts en forma corta, devolver el cero También necesito primero marcar también todo el módulo eso es así con esto, estoy marcando este módulo y aquí estoy definiendo que si se ha llamado a esta marca, se debe devolver este objeto fijo. Volvamos y hagamos la prueba. Y maravilloso. Ahora la prueba está pasando. Siempre me gusta tener una advertencia limpia y sección de flecha. Arreglemos también el error que estamos viendo aquí. Verán que aquí tengo una advertencia. Se ha superado la prueba, por lo que el usuario ve esta página, pero también tenemos una advertencia. Qué sucede cuando el usuario presiona sobre esto y hace clic. En esta área, he usado CK Editor, y el error que estamos viendo está relacionado con eso. Y en esta prueba, realidad no me interesa CK Editor. No me interesa interactuar con eso. Y esta es, de nuevo, una de la utilidad de las características de burlarse que puedo ignorar por completo a CK Editor y puedo burlarme de ello Y hagamos esto para no ver una consola sucia como esta. Vayamos y veamos nuestro franqueo de edición y veamos dentro de nuestra página de edición de publicaciones Tenemos el encabezado, tenemos un componente y este componente tiene un CCA Eeditor que probablemente esté aquí, exactamente Veamos dónde se ha importado esto. Esto ha sido importado de Editor cinco y Editor cinco. Voy a marcar todo el módulo. Vayamos y vamos a duplicar esta línea y esta vez voy a que quiero burlarme de Ckditor y volvamos atrás y dejemos leer en la prueba y maravilloso Ahora la prueba está funcionando y además no veo ninguna advertencia y ningún mensaje 47. Prueba del botón de eliminar (caso 1): Tan maravilloso. Tenemos un muy buen progreso, y estoy muy contenta de que estés conmigo aquí. Estamos probando cada pieza de nuestro software y lo estamos convirtiendo en un software de muy alta calidad con este esfuerzo. Ahora mismo, probamos en la mesa, probamos el edit fcton Y en este video, quiero probar el botón de borrar. Y ¿qué pasará cuando los usuarios presionen el botón de borrar? Primero, verán un pop up y luego podrán decidir ver sí o no. Si dicen que no, entonces el puesto se queda. Pero si dicen que sí, entonces esta prueba, esta publicación será eliminada. Si lo hiciste por error y quieres devolver el post, solo necesitas reiniciar el servidor. Entonces, si solo detienes el servidor del nodo J y lo reinicias, y si actualizas la página, volverás a recibir el mismo post. Así que vayamos y escribamos la prueba para este escenario. Voy a crear dos pruebas porque primero, quiero asegurarme de que voy a ver esta casilla de confirmación y después empezaré a escribir pruebas para el escenario. Vamos a agregar un bloque aquí, yo diría que muestra un cuadro de confirmación, dejar que los usuarios hagan clic en los usuarios haga clic en eliminar elemento de acción Y nuevamente, porque necesito al usuario, puedo escoger la mayoría de las líneas de esta prueba y de 1 a 5 publicaciones serán suficientes. Esta vez, me interesan los botones. Voy a conseguir todos los botones y porque solo me interesa el botón de borrar, voy solo me interesa el botón de borrar, a agregar una segunda condición aquí. Diré que solo quiero ver el botón de borrar. Voy después de eso, voy a dar click sobre este botón en el primer botón que estoy viendo, y luego estoy esperando ver este texto. Añadamos una condición para esperar una pantalla que obtiene por texto para estar en el documento. Si esto está sucediendo, entonces mi prueba debería pasar. Maravilloso. Para asegurarme también puedo agregar otra condición, puedo agregar también esta línea antes y puedo decir consulta todo por texto. Primero quiero verificar que en realidad este tenga longitud de cero. Quiero asegurarme de que esto no existe dentro del documento. Cuando presiono este botón de clic, entonces esto está sucediendo. Déjame también bajar esto un poco y tampoco necesito el valor de retorno para la función de configuración. Primero, estoy comprobando que no debería ver este texto, luego si presiono uno de los botones de borrar, entonces este texto debería mostrarse. Y maravilloso la prueba es pasiva. 48. Prueba del botón de eliminar (caso 2): Ahora vamos y probemos el segundo escenario, que será que si presiono el botón sí, y ¿qué pasará si presiono el botón sí? Leamos juntos el código fuente. Tenemos un post de lista y el interior tenemos dos botones de acción. Este es el enlace, este es el botón. ¿Qué es este botón de código de botón de eliminación? Esta es primero esta conformación y luego tiene dos textos, sí o no Y cuando estemos confirmando, en realidad se cortará el post de eliminación. Y ¿qué es esta eliminación? Esta eliminación es una mutación de la consulta rea, que llamará a una llamada API y luego en realidad borra la publicación del servidor Pero para esta prueba, no nos interesa la interacción con el servidor. Somos lo único que condiciona que quiero probar para asegurarme de que esta función ha sido cortada. Entonces, si el usuario hace clic en el sí, quiero asegurarme de que esta función ha sido llamada y esta función ha sido llamada con el parámetro correcto, que es la prueba le. Escribamos esa prueba. Voy a copiar todo este bloque y voy a llamar voy a cambiar esto. Diré eliminar el post o dejemos que seamos más llamadas eliminar post. Si el usuario confirma la eliminación. ¿Qué esperamos? Nuevamente, estoy creando pi pos. Este ya lo probé así que no lo necesito. Voy a recibir el botón de borrar, voy a hacer clic en él, y estoy esperando ver este texto. Esta vez, voy a conseguir el botón de sí. En lugar de esta condición, voy a definir un botón de sí y voy a decir que una pantalla consigue todo por rollo. Y con el botón y esta vez estoy apuntando al botón de sí y voy a obtener el primer botón. Voy a hacer click en esto pero esta vez voy en vez de cambiaré esto. Aquí debería ir mi expectativa y mi expectativa sería que en realidad esa función, esta borrar posts para ser cortados. Pero esta entrada de borrar primero para asegurarnos de que se está llamando, primero debemos marcarla. Esto viene de este módulo y para poder comprobarlo, también necesito marcarlo. Vamos a la parte superior de la página. Duplicemos esta línea y reemplacemos las entradas de API de pases, use delete posts. Vamos a subir publicación de API, usar delete post. ¿Qué hace? Devuelve un objeto que es el mutado es delete post y tiene una E pendiente Ya hicimos esto, así que sólo voy a copiar esto y voy a traer esto dentro. Puedo ponerlo también dentro de la sección de configuración, lo pondré todo junto aquí. Voy a usar dilTPST y diría un mutado. La clave será mutada. Y pendiente, pasaré la E pendiente de niebres. Para este, voy a definir aguja llamarlo eliminar post. También voy a eliminar aquí la entrada de eliminación. Yo diría que const post es igual a t fn. Como recuerdas, dot fn es una función espía. No hace nada, pero solo puedo asegurarme de que esta función haya sido cortada. Si bajara, mi expectativa sería que esta función hubiera sido llamada una vez para haber sido llamada por una vez. Estoy diciendo que cada vez que esto sucede, este botón sí hizo clic, estoy esperando que se corte esta función de eliminación Hagamos esta prueba. Y está pasando y para asegurarme de que en realidad estoy probando la corrección, puedo traer esto también aquí y puedo decir que esta función no debería haber sido llamada. Y cada vez que estamos recibiendo este botón de sí y cuando estamos dando clic en este botón de sí, estamos esperando que nos llamen. Y ahora estoy seguro de que en realidad la acción de este botón ha provocado que se corte este botón. También agregaré otra condición. Estoy diciendo que estoy esperando hayan llamado y con qué parámetro, me hayan llamado y con qué parámetro, si reviso el código, estamos pasando el ID del post porque aquí también estoy obteniendo el primer post con estos enlaces y con estos botones, estamos esperando que esto se llame con el post marcado y también necesitamos el post marcado. Primero consigamos las publicaciones de marca aquí. Y tengo un tipo de poste marcado. Estoy esperando que esto haya sido llamado con la identificación del primer post marcado. Maravilloso. Ahora también tenemos una prueba para el escenario delete. 49. Cómo obtener un informe de cobertura para el componente ListPosts del administrador: Como último paso, vamos a ejecutar todo el bloque describe y vamos a ver toda la cobertura del código de cobertura del código. Tenemos un error aquí, lo siento, me olvidé de eliminar las listas de publicaciones aquí. Y ahora dos de todas las pruebas estaban fallando así que ejecutamos las pruebas y ahora todas ellas deberían pasar. Permítanme ejecutar las pruebas con cobertura y veamos el reporte de cobertura de código para este componente. Así que vayamos aquí y refresquemos la página y vayamos a estuvimos en las publicaciones de barra diagonal de administración de SRC Maravilloso ahora veremos que la página de correos ha sido probada con la cobertura del 100% y también hemos cubierto todos estos. Esta es una muy buena prueba también. También podemos ver la cobertura de los componentes reales. Si vamos al post admin components, también se ha cubierto completamente la lista de componentes pus y como efecto secundario, también se ha cubierto el botón delete, pero nuestro propósito no era cubrir esto desde el componente edit, veremos que estas líneas rojas significan que no han sido cubiertas y estas son en realidad relativas a las acciones que está sucediendo, por ejemplo, enviar formulario y subir algo. Pero porque solo tenemos la navegación y por la navegación, renderizamos esta forma y estas líneas han sido cubiertas, pero la acción porque no tuvimos ninguna interacción con esa forma, esas partes no han sido cubiertas, y por supuesto, no era nuestro propósito. Crearemos una prueba separada para ese componente. Pero para el post de la lista ahora tenemos una cobertura realmente buena y todo lo que está pasando por dentro que se ha cubierto, lo cual es realmente bueno. 50. Introducción a la sección de CreatePost: Agregamos test para el componente list posts dentro de la página de administración, y en los videos anteriores ya probamos que podíamos ver el título, podíamos editar e ir a la página de edición y también podríamos eliminar la publicación presionando este botón. Ahora vamos a probar realmente la creación de un post. Y aquí cuando quiero crear un post como usuario, puedo ingresar, por ejemplo, post title, y tengo un editor aquí. Puedo escribir mi contenido dentro de esto y luego puedo seleccionar la foto y luego cuando presione enviar post, entonces este post se mostrará en esta página. Y refresquemos la página y asegurémonos de que ese post esté ahí. En este video, voy a escribir prueba para este componente. Como veis, requiere mucha interacción del usuario la cual vamos a usar la biblioteca react testing para eso primero, necesito ingresar el título dentro de esta entrada primero y luego segundo, necesito ingresar el contenido del post que quiero, y luego debería poder simular un click y luego seleccionar un archivo y luego subirlo con este botón Entonces debería poder enviar todos estos parámetros a la API con esta pose y luego mi prueba debería verificar que en realidad está sucediendo y es trabajo. Empecemos con la codificación e implementemos esta prueba. Será muy divertido. Empecemos juntos. 51. Observar el componente CrearOrEditPost: Como primer paso, veamos este componente, cree o edite post. Entonces esto es un Este es un elemento de reacción, y aquí tenemos una forma. Tenemos una variable de estado para la descripción. Tenemos una variable de estado para el aceite de imagen y tenemos dos mutaciones de RaquerYo para crear post y una para editar Y aquí, manejar la llamada API es responsable hacer el código API. Y este componente, el mismo componente se ha utilizado para agregar un post y también para la edición. Entonces si ves la URL, si vamos a la edición, esta es la misma forma y el mismo elemento. La diferencia es que te mostrará el contenido y el título del post que ya está cargado. Y si vas a agregar nuevo post, entonces veremos el mismo componente, simplemente todo está vacío. La forma en que es manejar es aquí estamos en el admin post create. Pero cuando estamos editando una publicación, estamos en forma de edición de post admin. Tenemos el ID de publicación aquí dentro de la URL. La forma en que funciona, estamos usando la navegación y aquí estamos leyendo en el objeto post. Si el post existe, significa que ya tenemos un post, entonces vamos a editar este post con el ID y también los datos del formulario. De lo contrario, vamos a crear post, y para ello solo necesitamos los datos del formulario. El mango enviar también para ello como un mensaje de validación para asegurarnos de que ya seleccionamos los archivos y luego él usa los datos del formulario, estamos agregando la descripción del título, y luego estamos agregando la imagen y luego estamos llamando al método anterior, que era manejar la tarjeta API y si tenemos éxito, entonces vamos a agregar en barra diagonal post Aquí para el JSX, verás que tenemos un artículo El primero es el título. Si las publicaciones existen, estamos usando un valor inicial. título de la publicación, este feed debería ser requerido y si el usuario no ingresa el título, mostraremos un mensaje. Por favor ingrese el título. Entonces tenemos un contenido. Aquí estamos usando un Ck Editor y tenemos un inalterado que cuando el usuario ingresa algo dentro de este formulario, entonces se llamará. Y luego tenemos un botón de subir, que usuario puede seleccionar un archivo para la imagen, y luego tenemos el botón de asunto. En este video, en el siguiente video, voy a escribir prueba para este componente. 52. Prueba de procesamiento de elementos de forma correcta: Así que comencemos. Lo primero que voy a hacer, voy a crear un nuevo archivo. Voy a llamarlo crea o edito post la prueba que T six Vamos a describir un bloque, vamos a probar, crear o acreditar componente de post, y aquí lo vamos a tener. Entonces yo diría, primero, solo podemos asegurarnos de que el formulario se esté renderizando correctamente. Podemos simplemente decir renderiza una forma vacía. Para ello, voy a renderizar crear o editar la mayoría de los componentes. Yo lo importaré. También necesito importar render desde la biblioteca de pruebas de reacción. Voy a añadir una pantalla. También voy a importar una pantalla. Entonces, ¿qué espero? Espero ver una entrada. Voy a o también puedo asegurarme de que voy a ver solo una entrada. Puedo usar get all by roll y luego puedo decir que estoy esperando ver una fila. Voy a esperar una pantalla y voy a cambiar esto obtener todo por entrada de fila para tener longitud qué. Primero hagamos esta prueba y veamos qué va a pasar. Como puedes ver, encontrar o usar navega tal vez uses dentro de un componente de enrutador Al igual que las pruebas anteriores, también necesitamos envolver nuestro componente de prueba dentro de un enrutador y dentro de un enrutador de memoria. Voy a traer todos estos ya que ya que en realidad no necesitamos navegación por ahora, voy a simplemente envolverlo dentro de un router de memoria. Voy a definir un conjunto de funciones. Dentro de este conjunto de funciones, voy a devolver render aquí voy a usar una ruta de memoria. Voy a pasar este parámetro aquí y en vez de esto, voy a simplemente el Voy a llamar a la función set. Tenemos que cubrir aquí semicla com aquí. Realicemos de nuevo la prueba. Veremos el cliente de consulta. También necesitamos la consulta rea. Permítame también traer esto y tenemos que cerrarlo. Y también necesitamos el parámetro del cliente de consulta. También copiemos desde aquí. A mi me gusta mostrarte que primero empezamos con nada, luego vendrá el error y luego arreglaremos el error. Podría copiar y pegar completamente de esta prueba, pero me gusta verte cómo me estoy acercando, estoy escribiendo una prueba y siempre que algo no funciona, cómo lo depuro. Ahora en realidad vemos que los errores anteriores se han resuelto, pero ahora tenemos un nuevo error. El componente del editor CK requiere que digas editor, podemos ignorarlo por ahora, incapaz de encontrar una fila. Primero veremos biblioteca de pruebas incapaz de encontrar un elemento x siete con el papel de. Pero tenemos nuestra entrada y necesito que la entrada del título esté aquí. Creo que el papel es solo cuadro de texto. Cambiemos esto a cuadro de texto y veamos qué ha pasado Y maravilloso. Ahora la prueba está pasando. Ahora estoy seguro de que en realidad estoy viendo una entrada dentro de los libros de texto Para las pruebas del editor CK, en realidad, no necesito cargar todo el editor CK. Para efectos de esta prueba, lo único que me interesa es que este componente deba ser renderizado. Y cuando el usuario escribe algo en él y presiona enviar voz, estos datos serían transferidos a la APA. editor CK para nosotros es una dependencia externa, por lo que no necesitamos probar realmente dependencias externas Sólo podemos marcarlo. Para hacer eso, voy y solo voy a agregar esto en la parte superior de mi archivo, voy a reemplazar voy a marcar CK Editor con un en este objeto, que solo lo estoy reemplazando con el área de texto. Esta área de texto tiene un ID de prueba que siempre que quiera obtener este editor, voy a usar este ID. Tiene algún valor diferente si lo pasas y tiene un valor sin cambios. Aquí voy a pero ahora que estoy marcando esto y tengo un área de texto, ahora tengo dos cuadros de texto. Por lo que esta condición será fallida. Por comprobar la existencia del editor CC porque lo he sustituido por la versión marcada. Lo único que tengo que hacer es simplemente verificar que este elemento con este ID de prueba exista. Voy a esperar pantalla que obtenga por identificación de prueba. Esta es también otra función auxiliar del limate de pruebas que podemos asignar a los elementos, un ID de prueba, que podremos usarlo en el futuro para obtener ayuda Estoy esperando que esté en el documento. Y ahora estoy esperando que esta condición se ejecute, pero esta condición fallará porque ahora tengo dos entradas y también espero no ver el mensaje de advertencia porque lo estoy reemplazando el estoy reemplazando CK y esta con la marca segura. Sustituyamos esto por dos y vamos a correr en la prueba. Y ahora la prueba está pasando y tampoco veo el mensaje de error y cómo me aseguro de que estoy probando la corrección si vengo al componente y si elimino esta sección, ahora esta prueba debería fallar porque no he renderizado el ditor CK Si devuelvo esto a uno y si vuelvo a ejecutar la prueba, porque no he cargado el editor CK dentro de mi teléfono, por lo que esta marca no se ha ejecutado y esta condición está fallando. Así que en realidad me estoy asegurando de que se haya renderizado un elemento del editor CK y porque estoy reemplazando un editor CK con un área de texto marcada que solo tiene ID de prueba y estoy probando que este elemento existe. Estoy seguro de que esta prueba es realmente funcional y funciona como se esperaba. Y para que sea mejor ahora que tenemos dos cuadros de texto, puedo volver de nuevo a aquí y para asegurarme también puedo especificar y puedo obtener este primero con la etiqueta o con el título. Para eso, también puedo agregar otra condición aquí, yo diría explicar que se obtiene por textos y el texto es título. Estoy esperando que este también esté en el documento. Ahora en realidad me estoy asegurando de que estoy renderizando el cuadro de texto correcto dentro de mi creación para franqueo Ahora probemos los botones, ya probamos esto. Primer artículo, probamos el Ckeditor y ahora tengo dos Quiero asegurarme de que este formulario también tenga un botón de subir y también tenga una pose subit También puedo hacer eso con esperar pantalla que se pone todo por rollo y esta vez voy a usar el botón roll y estoy esperando ver dos botones dentro de mi teléfono. Hagamos la prueba. La prueba está pasando tan maravillosa. Ahora definiría esto como botones. Voy a definir como una variable botones y se lo asignaré a esto. Ahora estoy esperando que el primer botón tenga contenido de texto de click para subir. Para el segundo botón, estoy esperando que muestre enviar publicaciones. Pongámonos en la prueba. Maravilloso. Ahora la prueba está pasando. Puedes hacerlo así, con definir una variable o también la puedo usar por algo como esto que, por ejemplo, estoy esperando enviar posts y elementos con la idea con el texto de sub costo para estar en el documento. Esta es también otra forma de probar esto. Pero por ahora, solo lo voy a mantener como esto es. Ahora estoy tengo una prueba que se asegura de que el formulario se esté renderizando correctamente y renderizando correctamente. Necesito correr en otra prueba para la interacción del usuario con este formulario. Para esa prueba, estoy esperando ingresar un título. Ingresa una descripción para el post y también selecciona un archivo y subirlo y luego realmente debería llamar para crear post mutación a partir de reacquiri 53. Prueba de escritura para postcreación: Entonces escribamos prueba para eso. Los usuarios pueden crear un formulario de publicación. O simplemente puedo hacerlo sencillo. Mi prueba sería asegurarse de que los usuarios puedan crear una publicación. Pero lo haré mejor cuando escriba la prueba. Por ahora, vamos a ignorarlo. Nuevamente, voy a llamar a la configuración para renderizar los componentes, renderizar todo desde la prueba anterior, sé que tengo dos libros de texto, así que voy a conseguir esto y los llamaré entradas, y para el primero, también necesito eventos de usuario de oído También llamaré a Hs user call user events setup. Porque para esta prueba, necesitamos la interacción del usuario, así que voy a llamar al método type en la primera entrada y luego voy a usar post title. Para el segundo, voy a escribir contenido del post. Ahora necesito un archivo y yo porque aquí tengo un botón de subir. Para eso, voy a usar y esto tiene una etiqueta para que pueda obtener este elemento de formulario con esta etiqueta, pero solo me interesa la entrada de esta imagen. Vamos a juntarlo. Diré una pantalla que obtiene por texto de etiqueta y mi texto de etiqueta será imagen característica. Y entonces voy a hacerlo por ahora, vamos a probar esto para que quede en el documento. Quiero hacerlo paso a paso. Hagamos la prueba. Y está fallando. Veamos qué es lo que es incapaz encontrar un elemento con imagen característica. Veamos que tenemos el contenido, tenemos la imagen característica aquí, el título es imagen característica para que nos aseguremos de que también pueda hacerlo y luego me interesa esta entrada de hecho. O simplemente puedo ingresarlo directamente porque este es el tipo es un archivo. También puedo obtenerlo de eso. Déjame cambiar esto y conseguirlo por eso. Yo diría archivo cons porque ese es mi rol y yo diría que quiero una entrada, pero no quiero todas las entradas. Quiero una entrada que el tipo es es el tipo es cinco. Y la biblioteca de pruebas no proporciona esto, así que de nuevo, necesito sacarlo del contenedor. Voy a conseguir esto voy a recuperar el contenedor de mi archivo de configuración y aquí voy a llamar a contenedores selector de consultas, y luego voy a esperar archivo para estar en el Natural. Vamos a ejecutar la prueba um, y maravilloso no está pasando, así que lo tengo, y ahora quiero subir un archivo dentro de este archivo de entrada. Déjame llamar a este archivo de entrada. Estoy esperando que esta entrada de archivo esté en el documento, luego voy a definir un archivo real. Como constructor como el contenido del archivo, voy a decir que solo el contenido del archivo de muestra no es importante para el nombre del archivo, yo diría que la imagen característica que es PNG y para las opciones, también podemos pasar proceso de opción, por ejemplo, escriba esta imagen, pH. La biblioteca de pruebas nos proporciona una función que realmente podemos subir. Dentro de un elemento, un archivo y el primer argumento serán los elementos de entrada HTML que aquí será entrada de archivo, y la segunda parte será archivo. En realidad, el archivo que queremos subir, porque he usado un peso, así que debería cambiar ACN También puedo agregar un peso para estos dos porque estos dos tipos de usuarios también AC para asegurarme de que mi prueba funcione como se esperaba, también agregaré un peso a esto. También puedo traer este top, vamos a hacerlo un poco más limpio. Y ahora aquí tengo porque ahora tengo un error, el argumento de tipo de nulo no es dejarnos decirle también tipo script que sabemos que este valor existe. Ahora qué va a pasar, ya ingresé algo en el post, ya ingresé algo en el archivo. Ahora voy a presionar el botón de enviar y voy a hacer clic de usuario y obtendría todos los botones. Sé que hay dos botones, así que lo haría también lo puedo conseguir por rollo y pasando un nombre. Vamos a pasarlo en el nombre y el nombre será algo post. Esto también es una sincronización, así que también agregaré un Alight aquí al final, necesito verificar que en realidad se haya llamado la subida Pero agregué tantas líneas, así que por ahora solo hagamos la prueba para asegurarnos de que no rompí nada. Por ahora, se ve bien. Qué pasará cuando en realidad cuando estemos enviando el post este formulario tenga un handle submit y dentro de este handle submit, primero, quiero asegurarme de que esto ha sido llamado y va a crear un objeto format, pondrá todos los valores y luego llamará a la API. Estamos esperando y porque no tenemos el objeto post porque esto es una creación, estoy esperando que se llame a esta pose de creación. Y ya lo hicimos en nuestra prueba anterior. Necesito marcar esta mutación desde reacquery y quiero asegurarme de que esto ha sido llamado y esto ha sido llamado con los parámetros correctos Pasemos a lo que ya hicimos. Hicimos esto por lo mismo con la eliminación. Vamos y llevemos esto. Pero para esta prueba, necesito importar, no usar delete post sino usar Create post. Para que esta línea se ejecute primero, debemos marcar todo el módulo y luego realmente podemos probar. Podemos decir lo que queremos que se ejecute. Voy a marcar post API, usar create post. Para el uso creat pos, vamos a crear un espía aquí Voy a llamarlo crear espía es igual a FM. Solo estoy creando una función vacía que puedo probar si esto ha sido llamado y qué parámetros aspecto. Nuestra condición sería que después de hacer clic en los envíos, estamos esperando que esto cree un espía para haber sido llamado una vez Entonces, hagamos la prueba. En realidad, aquí tengo un error. Si nos fijamos en el código del componente, cuando estamos usando create force, aquí estamos leyendo la propiedad de la asincrónica mutada y aquí estoy marcando la función mutar Debería reemplazar esto para que sea mutar sincronismo. Ahora que estoy usando una opción asíncrona, así que también debería necesitar envolver esto dentro del bloque de espera También voy a envolverlo dentro del bloque de espera. Déjame importar también esperar. También podemos agregar ocho aquí y peso. Volvamos a leer sobre la prueba. Maravilloso. Ahora la prueba está pasando. 54. Prueba de parámetros de createPost: Pero para esta prueba, también quiero asegurarme de que esta función ha sido llamada con el parámetro correcto. Esto es realmente interesante aquí y quiero aprovechar esta oportunidad para enseñarte también otra cosa. No puedo simplemente usarlo los métodos anteriores que he estado usando. Por ejemplo, yo diría que se han llamado W. Porque si paso, por ejemplo, un nuevo formulario data, qué es este formulario data, es un objeto. Y si lo hago algo así, pero esta comparación no existe en los datos de formulario. Cómo podemos probar realmente eso, podemos preguntar a nuestra biblioteca de pruebas de reacción. Podemos pedirle a este Espía todas las llamadas que se ha llamado, y luego podemos hacer nuestra propia comparación para el título, descripción, y también para la imagen. Hagamos eso. Para eso, puedo obtener todos estos parámetros a los que se ha llamado esta función la llamaré para argumentos de datos con esto. Ahora esto es un SPY. Puedo cada SPI tiene un simulacro de función y luego tengo una matriz de llamadas, que es una matriz bidimensional El primer argumento es la primera vez que se le llama porque solo se le ha llamado una vez, usaré cero y el cero será en realidad el primer parámetro al que se ha llamado esta función. Si tuviéramos, por ejemplo, crear un espía con otra cosa, entonces ese sería el índice uno. El número de las llamadas será en realidad el primer índice. Estos son todos los parámetros a los que se ha llamado y este objeto puedo iterar sobre esto y puedo crear un diccionario para mí mismo para todos los parámetros a los que este se ha llamado Por ejemplo, lo llamaré para entradas de datos. Y entonces yo diría, voy a definir un diccionario, que es un registro del anillo a un objeto desconocido. Y luego voy a iterar sobre este argumento de datos de formulario para los argumentos que esta función ha sido llamada, y voy a expandir esto con valor que debería ser no y la clave, que será string voy a llenar mi diccionario con este valor Lo que estoy haciendo aquí es solo un simple flo que estoy leyendo todos estos parámetros a los que se ha llamado este SI y estoy creando un diccionario con una clave y valor para esto. Ahora, puedo asegurarme de que en realidad aquí empieza mi aseveración. Para eso, puedo esperar que ahora que tengo cuatro entradas de datos, ahora en realidad pueda probar el apretado, por ejemplo. Y aquí, porque esta es ahora la cuerda, solo puedo decir que estoy esperando ser anfitrión apretado. Entonces, primero hagamos esta prueba para asegurarnos de que esto realmente está funcionando y es maravilloso. Ahora estoy realmente seguro que el valor que ingresa el usuario dentro de la primera entrada haya sido pasado dentro de mi función create spy, que es una versión espía de la mutación create de la reacquery que realmente llama a la API Me estoy asegurando con esta prueba que todo el formulario, la parte de envío del formulario funcione correctamente. También haré esto para la descripción. Asegurémonos de que está fallando porque ahora debería fallar porque entonces debería ser el contenido del post. Exactamente. Ahora estamos esperando el título del post. Esto debería estar contenido del post y ahora, estoy seguro de que la descripción también está ahí para el foil de imagen, voy a usar y puedo leer esto con la imagen y asegurémonos también de que esta sea imagen. Sí, porque estamos añadiendo una imagen. Quiero que esto solo sea una instancia de un fil. Esperamos que sea un archivo. También queremos asegurarnos de que, por ejemplo, el nombre del archivo y también se haya pasado correctamente. Importar, cuando estoy creando este archivo, también estoy llamando a una edad de características. Tengamos también eso a prueba. Esperemos también que esta imagen tenga el nombre de la página de puntos de imagen característica. Vamos a ejecutar esta prueba esto está pasando, tengo un problema con el script de tipo porque no lo sabe y solo puedo usarlo así como un objeto. Sé que este es un objeto que tiene el nombre es cadena así que solo puedo hacerlo escribir script no se queja, también puedo cambiar esto. Ahora me estoy asegurando de que en realidad prueba, este formulario ha sido enviado con todos los valores que se ha ingresado el usuario. Ahora, hagamos mejor nuestra prueba. Agregué algunos valores codificados, pero ya tenemos el cuidado falso. Vamos a crear aquí estos valores. Voy a definir el título de la publicación aquí. Yo diría falso Permítanme importar primero el cuidado falso de nuestra biblioteca falsificado y voy a usar una oración para el título de la publicación y para la descripción de la publicación Voy a usar un párrafo. Para el nombre de la imagen aquí, agregué un nombre de imagen codificado duro. Yo solo definiría también como un nombre de imagen obtendría falso del módulo del sistema del falso y voy a obtener el archivo y aquí también puedo pasar una extensión que será, por ejemplo, pH. Extensión contras No necesito esto, déjanos hacerlo sencillo. Aquí, en lugar de un valor codificado duro, voy a usar un nombre de imagen y aquí estoy reemplazando este valor por el título de la publicación y aquí estoy reemplazando esto con la descripción de la publicación. Dentro de mi prueba ahora estoy esperando que el título del post sea el título del post. Y la descripción sería la descripción del puesto y también el nombre del archivo debería ser archivo. ¿Cómo lo llamé? Yo lo nombro nombre de la imagen y este debe ser nombre de la imagen. Leamos en la prueba. Sé que cada vez que estoy ejecutando esta prueba, se generarán algunos valores aleatorios para la descripción del título de la publicación y el nombre del archivo y se ve exactamente como los usuarios interactúan con nuestro sistema porque todos usan cosas diferentes, diferentes caracteres y valores diferentes. Ahora estoy seguro que en realidad mi llamada API, mi mutación ha sido llamada con los parámetros correctos. 55. Análisis de la cobertura de código para el componente createOrEditPost: Ahora, veamos el reporte de cobertura de código. Agregamos una prueba para renderizar los cuatro vacíos y agregamos una prueba para crear el post. Entremos aquí y hagamos el reporte de cobertura de código. La primera prueba está fallando y esto es porque agregamos un simulacro. Nos burlamos de esta pose de creación y ahora para la segunda prueba, agregué este Spy pero para la primera prueba esto no existe. Movamos esto a un antes de cada bloque y definamos esto como dentro antes de cada bloque y definamos también esto afuera de Aslett y vamos a anularlo antes de cada uno con la versión espía Ahora no sé no puedo ser el primero y llamémoslo, o también podemos llamarlo con e's simplemente sacar esto completamente a la luz. La primera prueba no tiene ninguna interacción con ella debería estar bien. Ahora la primera prueba también está pasando, vamos a ejecutar el reporte de cobertura. Vamos a nuestro navegador. Vamos a todos los archivos. Estábamos en el puesto de componentes. Ahora estamos por debajo del 90% de cobertura, déjanos verlo. Como puedes ver, la sección de edición no ha sido cubierta. También no se ha cubierto la sección de capturas y estas tres líneas de código no se han cubierto. Para ello, en el siguiente video, también voy y también voy a crear una prueba para este caso. 56. Agregar una prueba para el caso de falla de la API: Justo antes de comenzar a escribir pruebas para estos, hay un punto que debo mencionar. No tienes que, por ejemplo, escribir pruebas para todo. Ahora mismo, tenemos una cobertura del 90%. En muchos recursos y libros, una de las mejores prácticas es tener una cobertura superior al 80%. Oh. Y en realidad, ya estamos ahí, así que puedo ignorar esto. Pero porque este es un video educativo y quiero mostrarles todo el poder y todas las cosas que podemos hacer con la biblioteca de pruebas de reacción, voy a agregar esta línea voy a agregar prueba. Pero técnicamente, después de esta prueba, probaré solo una sola línea de código. Y es que a veces deberías pensar que puedes pensar que tal vez sea demasiado. Si no quieres hacerlo, siéntete libre de no hacerlo. Sólo quiero mostrarte que si quisieras hacerlo, como puedes hacerlo. Entonces escribamos la prueba, y esta prueba es similar a la prueba anterior. Lo único que aquí queremos hacer es así si esta función falla y si fallan las llamadas a la API, queremos asegurarnos de que los usuarios recibirán un mensaje de error. Para ello, voy a copiar todo el bloque y voy a reemplazarlo mensaje de usuarios si crea fase post mutación. Queremos agregar una prueba para el caso de que está fallando. Y ahora que tengo un antes de cada bloque que marca esto y esto es todo exitoso. Para este caso, quiero que esto falle. Y debido a que esta prueba tiene muchos duplicados, también podemos refacturar este tipo de duplicados, pero lo haré y luego Primero vengamos aquí. En lugar de devolver un valor de resultado de marca en lugar de decir que esto está funcionando bien, rechacemos esto con un error que por ejemplo, crear mutación falló. Ahora para este caso, voy a decirle a vitas que quiero que se falle esta marca Quiero simular un error de API y una falla en la APA. Lo que estoy esperando ver cuando esto suceda, estoy esperando que este mensaje se llame a ese error, y este mensaje se le muestre al usuario. También, para ello, creemos un SPI para ello. Diré error. Yo lo llamo mancha de error. Yo diría que FN, espiamos mensaje y error Estoy creando una marca para el mensaje que es error porque quiero probar que esto ha sido llamado. Ahora, al final de la prueba aquí cuando estamos dando clic en el botón de enviar. Nuevamente, esperamos que así se haya llamado. Ya probé todas estas condiciones así que no necesito probarla. Pero esta vez, sé que esto va a fallar. Estoy esperando que voy a agregar un expect B a mi errorSpit time to have been called one and I am expecting it have been called to have been called to have been called with this error message that error and creation of Ya no necesito esta línea, así que mi peso para el comando será que este mensaje de error debería haber sido llamado y debería haber sido llamado con el paramet correcto Maravilloso. Ahora la prueba está pasando, volvamos a ejecutar todas las pruebas juntas de nuevo y veamos que no rompí nada ninguna prueba previa al agregar esta nueva, todas están probando, todas están pasando, maravilloso ahora vamos a ejecutarla con cobertura. Y esta vez, estoy esperando cuando vengo aquí y cuando refresque la página, esta línea no debería ser leída. Veamos juntos y maravillosos. Ahora esta línea también se ha cubierto. Ahora nuestra cobertura se ha incrementado 90-93%. Todavía tengo dos condiciones. Yo uso voy a probar esto en la edición y también escribiré podemos ignorar esto o también podemos escribir una prueba para esta. Sólo otra cosa que quiero hacer este video porque tengo muchas partes o se comparten entre estas dos pruebas, también puedo crear una función auxiliar para eso. Por ejemplo, llámelo, puedo copiar toda esta función y puedo llamarla puedo llamarla interactuar o llenar crear post para. Después de mi configuración, puedo definir esto como una sensación puede definir esta función y ponemos todo este bloque aquí. Y porque todas estas acciones son iguales, así que tengo un error tipográfico, déjame arreglar este error tipográfico y aquí también puedo quitar todas estas partes de la cerradura y simplemente lo reemplazo con esto Ahora es más fácil entender lo que sucede dentro de las pruebas. Volvamos a ejecutar todas las pruebas para asegurarnos de que no rompí nada. Y ahora la función también debería ser una sincronización porque agregué. Estoy usando unos pesos aquí, eso estaba en la prueba. Dentro de mis pruebas también, también debo agregar una evasión aquí, también debo agregar evadir Ahora también necesito estas pruebas necesita en realidad estos valores. También podemos extraerlos de esto. En lugar de no devolver nada, puedo devolver un objeto de título de la publicación, descripción de la publicación, nombre de la imagen y puedo conseguirlos aquí. Yo diría cos post title, post description y image name. Los estoy escribiendo aquí. También tengo un error tipográfico aquí. Volvamos a leer sobre la prueba. También tengo semicol aquí. Leamos en su conjunto describir. Maravilloso. entender si otro desarrollador quiere leer la prueba y ver qué está pasando aquí, es mucho más claro que estamos espiando mensaje ese error, estamos rechazando la promesa, y luego estamos llenando el formulario y luego estamos esperando que nos llamen espía aquí, estamos esperando aquí estamos llenando Ahora mis pruebas están pasando y además es más fácil entender si otro desarrollador quiere leer la prueba y ver qué está pasando aquí, es mucho más claro que estamos espiando mensaje ese error, estamos rechazando la promesa, y luego estamos llenando el formulario y luego estamos esperando que nos llamen espía aquí, estamos esperando aquí estamos llenando el formulario y estamos esperando que haya llamado al espía creativo y también esperamos que los datos de este formulario se pasen con los parámetros correctos. 57. Agregar prueba para la edición de la publicación: Ahora quiero agregar una prueba para la adición. Entonces si tenemos, por ejemplo, porque no probamos esta parte del código, esta parte del código es la misma, pero este componente puede aceptar el objeto post. Si le pasamos un objeto post, entonces estamos esperando que se llame a esta función de edición. Vamos y llevemos toda nuestra función de renderizado. Esta vez quiero pasar un parámetro, así que diría llama lo que usamos, usamos los usuarios pueden crear un post. Hagamos también mejor este mensaje. Digamos llamadas llamadas, crear post mutación cuando los usuarios rellenen el formulario. Aquí yo diría llama a la otra mutación, que es la que llama, editar post mutación. Si se lanza una publicación. Nuevamente, esto va a ser un acing, así que voy a renderizar esta vez y para el post, voy a usar nuestra fábrica de pruebas que hemos creado, obtener post de prueba. Y aquí voy a pasar el objeto post aquí. Yo diría post igual a post. También necesito un cliente de consulta. Tambien traemos un cliente de consulta para este. Esta será nuestra función de render. Tengo una necesidad también en esto para Ahora estoy renderizando lo mismo con el anfitrión. Puedo usar la misma función auxiliar que he creado. Entonces puedo hacer todas las interacciones que tuve con los cuatro pero ahora necesito un nuevo spi también traeré todo este bloque aquí Pero entonces simplemente no necesito crear espía, también voy a crear una función phon Edit posts, spy I also here spy the whole spy the second mutation which is use Edit posts. Voy a copiar este bloque. Voy a esta vez voy a usar Edit post, llamarlo marca y esta vez para la tarea para el espía, vamos a usar Edit post. Por supuesto, si estoy haciendo esto primero, debería marcar todo el módulo, así que voy a la parte superior de este archivo, también voy a marcar usar Editar publicación. Y luego después de eso, estas líneas serán ejecutadas. Tengo el post de edición. Ahora estoy esperando que esta vez, estoy esperando que se corte mi postpe de edición y los parámetros que estoy leyendo de él serán a partir de este momento Ejecutemos la prueba y veamos qué va a pasar. Tenemos un error, vamos a depurarlo juntos, encontramos múltiples elementos roll con el botón name de los posts submit. Ahora tenemos un antes de cada bloque y dentro antes de cada bloque, creo que ya tenía la configuración enviar post, enviar post entonces tenemos el contenido. Tenemos la imagen característica dentro de nuestro contenido y pero no llamé a la configuración en esta función. Creo que aquí tenemos la configuración. Por lo general, configuramos contenedores iguales. Debido a que tengo el contenedor aquí que está llamando a la configuración ahora, estoy renderizando los cuatro dos veces y este formulario de campo en realidad también hace esto. Por ahora, dejémonos Por ahora, permítanme simplemente copiar todo el bloque. Aquí adentro en vez de esta línea, voy a usar esta. Tiene tanta duplicación, pero por ahora, podemos ignorarla. Veamos si esto va a resolver nuestro problema. Porque ahora estoy renderizando mi componente aquí. La prueba nuevamente está fallando, y también debería quitar esta línea, todo el propósito era eliminar esta línea y traer aquí la llamada a la función. Nosotros también el contenedor. Déjenme traer también el contenedor aquí. Nuevamente fallando formulario argumentos de datos que para cada uno no es una función. Veamos aquí estamos obteniendo un ppi de edición. La forma ha sido llamada una vez, por lo que esta función ha sido alineada. A partir de ahora eliminemos estos códigos y volvamos a ejecutar la prueba. Ahora, estoy seguro de que en realidad mi espía de edición ha sido llamado porque si estaba fallando, debería haber fallado en este registro vamos a depurarlo, así que veamos qué está pasando. Y bien, maravilloso. Ahora, depurémoslo juntos. Cuando la publicación de edición está llamando, en realidad, recibirá un objeto que tiene un ID y tiene una propiedad de los datos del formulario y el ID es el ID de la publicación y los datos del formulario son para theta Anteriormente, solo estábamos pasando el primer argumento como los datos completos del formulario. Ahora que estoy haciendo esto, en realidad esta esta es la identificación porque estoy usando las primeras publicaciones, y luego vamos a duplicar esta línea. Necesito y lo siento, este es todo el objeto. Este es el objeto completo al que se ha llamado, que es éste, ID. Así que vayamos y llamemos así a esto. En vez de decir, yo diría un objeto, y estoy leyendo un formulario de datos. La primera llamada será este objeto para los datos del formulario, luego voy a iterar sobre esto Esta vez, no debería ser un problema. En realidad, no, está fallando porque también es otra cosa interesante que puedo discutirlo y te puedo enseñar. Ahora que estamos pasando un objeto post aquí, entonces esta entrada, las entradas que ya tenemos tiene un valor. Y cuando me vaya y cuando esté escribiendo algo dentro de esto, se le añadirá a eso. Para eso, primero voy a borrar la entrada, y me gustaría que el usuario ingresara esa clara para que sea una para que se vacíe y luego agregarle algo. O simplemente puedo eliminar todos estos objetos, y luego diré, para esta prueba, solo quiero agregar un dos. Cómo lo probamos manualmente si vengo aquí y si, por ejemplo, presiono editar aquí, si quiero probar manualmente, a veces solo voy a agregar un número y luego aquí voy a ver que se ha cambiado, así que esto es bueno. Para esta prueba, voy a justo dentro del título, voy a agregar esto y luego lo estoy esperando en lugar de este valor aleatorio, voy a esperar que tenga mi título del post más este nuevo valor que he agregado. Por ahora, eliminemos estas líneas. Asegurémonos de eso solo para probar si esto es trabajo. Y maravilloso. Ahora mi prueba en realidad está pasando. Para esta prueba, también puedo hacer lo mismo por el nombre de la imagen. También puedo hacer esto por lo mismo. Vamos y en vez de pasar en realidad un valor solo añadimos descripción al valor que ya está ahí y es también nos dice que prefiere usar un objeto de templo Cambiemos esto para que sea así y cambiemos también para ser post la descripción anterior que tenía el post, y luego estamos agregando una descripción. Estamos agregando una descripción para esta, para la imagen porque este es un botón de subir, la imagen será reemplazada para que pueda dejar la imagen como estaba antes, así que solo puedo ir y puedo traer aquí la misma línea falsa Y ahora estoy esperando que esta prueba esté pasando. Déjalo ver juntos. Maravilloso. No verifiqué ID, así que probemos también que en realidad se llamará a la publicación de edición con el ID correcto. Estaba agregando una expectativa y estoy esperando que sea post ID. Hagamos la prueba. También estoy esperando que esto se apruebe. Ahora hagamos todas las pruebas juntas para asegurarnos que no rompí nada durante estos cambios. Tan maravilloso está pasando. Volvamos a ejecutar la prueba con la cobertura para ver también el reporte de cobertura Esta vez, espero que estas dos líneas también hayan sido cubiertas. Y maravilloso. Esto ha sido cubierto. También me puede gustar exactamente lo que hice con el mensaje ese error. También puedo probar eso. Cuando la edición es exitosa, estamos viendo dentro de nuestro código fuente que estamos mostrando mensaje de ese éxito. Tengamos también eso a prueba. Aquí antes de renderizar, voy a llamar mensaje. En lugar de espiar mensajes y errores, vamos a espiar al éxito Entonces y voy a llamarlo spot de éxito. Cuando esto haya terminado, cuando todo esto se haya hecho, también estamos esperando que ese espía de éxito haya sido llamado una vez y también esperamos haber sido llamado con este mensaje que es post ha sido actualizado exitosamente. Volvamos a ejecutar todas las pruebas. Y maravilloso. Ahora mi prueba está pasando. También se ha incrementado la cobertura. También agregué esta prueba para estas dos líneas. La cobertura se ha incrementado de 93% a 96%. Y en el siguiente video, voy a poner esto como un ejercicio para ti. También puedes agregar prueba para esto. Aquí, teníamos la condición de que si el post no existe, significa que es un archivo create post. Y no lo estamos editando porque estamos creando. Si los usuarios no seleccionan un archivo, mostraremos un mensaje de error y si quieres verlo dentro de nuestro blog, si escribo título aquí y si escribo contenido, pero si no selecciono una imagen característica e intento enviar, entonces veremos este mensaje de error. También puedes agregar una prueba para esto. Esto va a ser divertido. Por favor, detenga el video y agregue una prueba usted mismo. 58. Agregar una prueba de validación para la selección de imágenes: Entonces, vayamos a la parte de la solución. Añadamos la última prueba y terminemos esta conferencia. Para la última prueba, diría que muestra un mensaje de error si los usuarios no han seleccionado un archivo. Después de que a veces escribir pruebas será mucho más fácil porque ya creé todo lo que necesito de los ejemplos anteriores. Lo único que necesito es sólo copiar y pegar todas las cosas que ya tengo. Vayamos y llevemos En realidad, esta es más fácil de copiar esta vez porque necesitamos espiar el mensaje ese error, así que voy a reemplazar todas estas cosas. Traeré todos estos valores de mi archivo de configuración, no necesito el valor de retorno, solo los traeré para esta última prueba aquí en lugar de no ingresar el nombre de la imagen. Voy a quitar esta línea, eliminaré la creación del archivo. Elimino la entrada del archivo, obtengo la entrada del archivo, elimino el archivo de carga y solo estoy enviando el formulario con este valor vacío porque no necesito subir archivo, tampoco necesito este contenedor, hagámoslo Sencillo aquí solo estoy generando un post title post description. Tenemos un antes de cada trama que siempre marca la creación con un mensaje exitoso. Para esta prueba, queremos que sea exitosa no queremos ingresar no queremos ingresar a la salida del archivo. Después de eso, esperamos sea mensaje de error para ser llamado con este mensaje de error. Vamos y por primera vez, intentemos dejar que falle para asegurarnos de que en realidad estamos probando lo correcto. Hagamos esta prueba. Y ves que exactamente está llamando, espera que se llame con este mensaje. Entonces voy a agregar esto y voy a ejecutar la prueba. Esto fue fácil 2 minutos para escribir esta prueba porque agregué ya todos los demás casos. Y esto es realmente interesante con probar que cuando tienes algunos al principio, se ve complicado. Parece que consume mucho tiempo. Pero después a veces solo se está volviendo mucho más fácil porque tienes todo lo que necesitas para tu prueba. Estoy ejecutando la prueba con la cobertura, estoy refrescando la página y maravillosa. Ahora estas líneas también han sido cubiertas y ahora tengo el 100% para este componente. Todas las líneas, todas las ramas, toda la función, y todo ha sido cubierto para esta prueba. 59. Resumen del módulo de pruebas de integración: Todo bien. Enhorabuena. Has terminado este módulo. Este fue un módulo duro. Sé que hemos cubierto muchos temas con prueba de escritura para crear y editar post. En realidad, aprendimos mucho. Aprendimos cómo podemos realmente ingresar algo en el área de texto con el usuario de ese tipo. Hemos aprendido cómo podemos escribir pruebas y simular la carga del archivo para un formulario También aprendimos a marcar editores complejos como CCA Editor y simplemente reemplazarlos por un área de texto normal . También hemos aprendido sobre la API de éxito y fracaso porque escribimos pruebas para diferente situación si la API funciona y cómo podemos simular un error en la API que estamos mostrando el mensaje de error a los usuarios y además implementamos pruebas para lógica de validación así. Si el usuario no ha seleccionado un archivo y quiere crear una publicación, entonces la aplicación muestra un mensaje matutino, y también escribimos prueba. Este fue un módulo muy avanzado, así que estoy muy contento de que lo hayas terminado. Es el momento. Consigamos tu tiempo y hagamos un descanso rápido. Estoy muy orgulloso de ti, y espero que uses todas estas cosas que has aprendido en este módulo en tus futuros proyectos. 60. Introducción a las pruebas finales finales 2: Entonces comencemos con el fin de diez pruebas. Enhorabuena por terminar las secciones anteriores. Estoy muy orgullosa de ti de que hayas recorrido este largo camino. Y en este módulo, vamos a hablar de terminar diez pruebas. Y lo que es terminar las pruebas gemelas, vayamos y hagamos una revisión. Hablamos de las pruebas unitarias. Dijimos que las pruebas unitarias se centran en una unidad, que es una función o clase. Y en las pruebas de integración, estamos probando la integridad entre diferentes componentes y módulos. Pero al final de las pruebas gemelas, estamos viendo el software como un todo. Entonces no nos importa en qué tecnología se haya escrito. Puede ser de reacción, angular, vista o cualquier otra cosa. No sabemos qué está utilizando la tecnología de back end. Puede ser CSO, Java, JS o cualquier otra cosa. Y en las pruebas a término, estamos viendo el software como un todo, y estamos probando el comportamiento esperado de este software. Y volvamos de nuevo y pensemos en las pruebas por bit. Entonces primero, comenzamos con pruebas unitarias, que eran muchas rápidas y baratas de escribir. Y ahora queremos escribir fin de pruebas Gemelas. Y haciendo pruebas desde el número, hay menos, mucho menos que la prueba unitaria, y son menos también que las pruebas de integración Y ejecutar este tipo de pruebas es más lento relación con la prueba unitaria y en relación con las pruebas de integración. Y por lo general para los desarrolladores y para las empresas, son caros. Entonces, desde el momento en que los desarrolladores necesitan poner de los recursos que requieren y desde el momento para su ejecución. Y ahora queremos comenzar con este módulo con el test gemelo final y con dramaturgo Así que empecemos, y comencemos con la instalación de dramaturgo 61. Instalación de dramaturgo: Para escribir pruebas unitarias, estamos utilizando dramaturgo Dramaturgo es una herramienta para diez pruebas, escritura, y ¿qué hace? En realidad abre un navegador, un Corum He Firefox o Safari y luego lo renderiza visita el sitio web que quieres probar, y luego está actuando como lo que hace un probador normal Se abre la página y luego se puede tener diferente condición de que, por ejemplo, este texto deba ser visitado o este enlace cuando haga clic en él, algo debería suceder. Si envío este formulario, debería ver este mensaje y luego la página debería ser redirigida a esta página Todas estas condiciones, podemos probarla con dramaturgo Entonces comencemos instalando presa bien. Estoy dentro de mi terminal, y aquí, si hago un LS, verán que tengo dos carpetas. Uno es para el blog simple y otro es para el back end. Voy a crear una carpeta y la llamaré prueba TN, y después voy a ir a esta carpeta y a instalar dramaturgo , voy a ejecutar este comer NPM ElenPlayWT voy a ejecutar este comer NPM ElenPlayWT Voy a rezar. Y me va a preguntar, ¿necesito escribir script o Javascript? La opción predeterminada es escribir script. Voy a escoger el script de tipo y donde querer poner tu prueba gemela, la predeterminada es una carpeta de prueba, así que aceptaré también la predeterminada. Y la siguiente pregunta está en el flujo de trabajo de Git of action. ¿Y qué significa esto? Por lo general, en las empresas y en el entorno de producción, estamos usando el calor de acción que cada vez que ocurre una fusión en nuestra sucursal principal, se debe ejecutar una tubería y esa tubería está ejecutando toda nuestra prueba Twin. Por ahora, no necesitamos eso, así que iré con la opción de no. Y la siguiente pregunta será qué navegadores dramaturgos, ¿necesito instalar Voy a elegir la opción predeterminada que por defecto instalará los tres navegadores principales. Simplemente lo voy a cambiar como cierto, lo configuré y luego ahora en realidad está instalando y está descargando el navegador. Como puedes ver aquí, por ejemplo, primero, se inicia instalando Colombio Esto también es interesante para que veas que realmente descarga el navegador, en realidad está probando todo el software exactamente de la misma manera que un navegador y un usuario y un probador funcionan con el software. Y y ahora en la siguiente sección, se trata de descargar Chromium headless, Chromium headless es la versión de Chromium que no tiene la interfaz de usuario que trabaja un usuario normal Entonces, como usuario normal, cuando estamos trabajando con un con la habitación, tenemos estas ventanas. Tenemos todas estas cosas, y Corobu headless solo tiene las API para Corom que renderiza y para las pruebas, solo necesitamos la parte headless del navegador Y aquí los estás viendo, empieza a descargar el firefox y luego empieza a descargar la web. Y estos son los tres principales navegadores que hace el dramaturgo Esto también vuelve a ser interesante que cuando escribimos pruebas con dramaturgo, en realidad, estamos probando nuestro software con diferentes navegadores Y esto también es muy importante que estemos seguros de que nuestro sitio web funciona y nuestra aplicación web funciona correctamente en diferentes navegadores. 62. Ejemplos de pruebas de dramaturgos: Entonces se ha instalado, y también verás que este es el ícono del dramaturgo y también lo podemos ver aquí Dramaturgo viene con algunas pruebas por defecto para ejecutarlas, podemos ejecutar esta prueba de dramaturgo PX Y estas son algunas pruebas predefinidas solo para asegurarnos de que hemos instalado correctamente al dramaturgo, y verán que se ha superado toda esta prueba, y ahora puedo confirmar que en realidad mi instalación ha sido exitosa Genera un reporte de HML, y podemos verlo ejecutando este comando y show de dramaturgo de cerdos Aquí, cuando ejecutes eso, tendrás una página de página y la abriré en host local. Verás que tengo una prueba la cual ha sido ejecutada contra Combo. El segundo, esta es la misma prueba se ha ejecutado contra Firefox y este es el mismo caso se ha ejecutado contra bk. Entonces tengo otra prueba que es obtener una fuga iniciada y la misma se ha ejecutado contra diferentes navegadores. Aquí también verás el tiempo que tardó en ejecutarse cada una de estas pruebas. Si hago clic en él, también verán los pasos que, por ejemplo, tiene un antes, que es una configuración e instalación y luego visita esta web, que es la página oficial del dramaturgo y luego espera ver el texto del dramaturgo y luego hará algún tipo de afterhoks Veamos La otra prueba es, de nuevo, que visita el sitio web del dramaturgo y luego está buscando un enlace el cual es empezar y luego da clic en él Déjanos verlo también. Aquí tenemos este enlace el cual es empezar. Esta prueba es en realidad para este botón, luego hace clic en él, y luego espera que vea una página con el encabezado de la instalación. Veamos juntos. Si hago clic aquí, verán que tengo una página con el encabezado de una instalación y esto es exactamente lo que hace esta prueba. Y para ejecutar pruebas en dramaturgo, también hay otra opción, que es ejecutarlas dentro de un modo UI Y también te puedo mostrar aquí. Entonces si ejecuto la misma prueba cubierta y NPxPat, y si agrego UI, se abre el modo de prueba en la forma UI del dramaturgo Y aquí verán que tengo una ventana y tengo dos pruebas. Puedo ver mi prueba, y aquí puedo ejecutarlas. Y aquí verás que en realidad lo que está pasando. Entonces primero visita un sitio web de dramaturgo y luego espera ver este texto dramaturgo y luego hará algún tipo de limpieza Para la segunda prueba, también puedes ejecutarlo aquí, y verás que primero llegó a esta página y luego hizo clic en este botón, y luego espera ir a esta página y ver este texto de instalación 63. Métodos y ayudas del dramaturgo para hacer pruebas: Y veamos los métodos dramaturgos que hemos utilizado en las pruebas de ejemplo anteriores Tenemos algunos métodos básicos, page dot GT, por ejemplo, esto es lo primero que realmente con esto, podemos decirle al navegador que el dramaturgo está usando para visitar una URL Y luego como biblioteca de pruebas de reacción, tenemos G por rol y podemos consultar desde el HTML de la página en base al botón de enlace, entradas, texto o y podemos obtener este elemento. Y para condiciones exactamente como probamos que teníamos en los videos anteriores, tenemos una expectativa. Tenemos algunos matchers como para tener título, podemos probar que un elemento, un título existe dentro de la página Tenemos que ser visibles, que es lo que es similar a estar en el documento de biblioteca de pruebas de reacción. Y ahora que has aprendido test, ahora que has aprendido a reaccionar probando biblioteca, aprender dramaturgo será mucho más fácil porque conoces la terminología, sabes cuál es el propósito de la prueba y lo que vamos a probar, y será mucho más fácil implementar también prueba T. Y también abrí el proyecto en mi ID, así que he creado esta prueba T. Vamos y veamos los ejemplos de prueba. Y aquí verás también puedes ir a la carpeta de prueba. Entonces veamos primero éste. Esta es en realidad la prueba de ejemplo que hemos realizado. Y como pueden ver aquí, tengo dos pruebas, pero veremos seis porque cada prueba se ejecutará con respecto a tres navegadores, Chromium, Firefox, y kit web. Y aquí se puede ver que tengo el teclado de prueba y esto viene de dramaturgo y la prueba exactamente igual que lo que vimos en la biblioteca de prueba y reactesm, tenemos una descripción para la prueba y tenemos la función, que es la mayoría de las pruebas de dramaturgo son AC porque cuando vamos a cuando estamos visitando una página, esta es una esta es una Entonces tenemos este AXI de playd recibiremos un objeto de página, que podemos hacer métodos en él Por ejemplo, podemos llamar al ir a para visitar una página, y podemos esperar también esta página. Entonces aquí estamos primero a la espera de esto para asegurarnos de que esta acción se haya terminado. Entonces navegador abre esta página porque esto requiere una solicitud de red. Puede ser asíncrono y así agregamos una espera aquí. Y luego aquí, estoy esperando que esta página tenga este título. Cuando lo escribimos así, es mirada es un rejix así que no es fuerza exacta sino que es un Y para la segunda prueba, nuevamente estoy viendo esta URL. Nuevamente, voy a recibir una página como parámetro y luego estoy de visita y ya sabes que ya has visto sintaxis. Primero, obtendrá un enlace. Pero si estás obteniendo enlace, hay muchos enlaces, por lo que también agregará otra condición para comenzar y luego da click en este enlace. Nuevamente, tenemos la espera aquí y luego estamos esperando ver para visitar una página que tenga un encabezado y ese encabezado debería ser instalación. Estos son los dos ejemplos de casos de prueba que vimos en la zona. 64. Escribir nuestra primera prueba de E2E: Todo bien. Empecemos y escribamos nuestra primera prueba con Playt Y voy a probar mi página, y voy a implementar exactamente la misma prueba que quiero visitar este sitio web, y después quiero ver algunos elementos en ella. Entonces abrí la navegación abrí el proyecto en mi ID, y voy a copiar toda la prueba aquí. Voy a ponerle nombre a la sección de blog. Aquí voy a definir una variable para la URL. Voy a usar. Voy a almacenar esto como una variable aquí exactamente igual que la prueba de ejemplo, voy a visitar esta página. Estoy esperando qué título voy a ver el título es lo que vamos a ver aquí, simple página de bloque. Estoy esperando cuando visite eso para ver la página de bloqueo simple y el idioma. Esta es una prueba fácil, así que vamos a ejecutarla y veamos. Como pueden ver, ahora tengo esta ventana y voy a ver el cromo web cube, firefx probado contra diferentes navegadores y todas estas pruebas han sido superadas Enhorabuena. Hicimos nuestra primera prueba en dramaturgo 65. Prueba el encabezado del blog: Y veamos también y asegurémonos de que veremos un encabezado correcto para nuestro sitio web. Voy a agregar otra prueba. Voy a copiar todas estas secciones y voy a llamarlo tiene encabezamiento correcto. Al igual que la página anterior, vamos a visitar la página. Aquí ahora quiero obtener este elemento, que es un elemento H one. Lo conseguiré por localizador de puntos de página. Aquí puedo pasar H uno, puedo conseguir un selector y esto me dará el H uno para esta página. Entonces puedo decir que estoy esperando que este H one tenga texto. El texto será algo que espero ver aquí. Me voy y estoy diciendo que para esta prueba, estoy esperando que vea sangre simple creada por. Hagamos esta prueba, maravilloso. Ahora también está pasando. 66. Prueba de evento de clic y navegación entre páginas: Para la siguiente prueba, también quiero visitar esta página y luego obtener el primer elemento y luego hacer clic en él y asegurarme de que realmente estoy viendo el título de ese artículo post dentro de mi página. Es un poco más complicado. Requiere de múltiples pasos, así que hagámoslo juntos. Cambiemos esta prueba y vamos a llamarla los usuarios pueden ver una publicación haciendo clic en ella. Como primer paso, nuevamente, voy a visitar la URL. Voy a conseguir una voy a conseguir todas las hojas, y para eso, me voy pero no quiero limitar en base al título o en base a ninguna condición. Entonces voy a eliminar esta condición, y también voy a quitar el botón de acción y voy a cambiar esto para llamarlo obtiene enlaces y voy almacenar los resultados en la variable. Para la primera condición, en realidad espero tener tres enlaces y veamos si esto está funcionando o no. Simplemente agreguemos una condición de espera. Digamos que nosotros y definamos estamos esperando que los enlaces de conteo sean tres. Definamos también estos enlaces de conteo, que serán la tarjeta de puntos de enlaces. Quiero almacenar quiero almacenar el número de los enlaces, y quiero probar si veo tres enlaces. Hagamos esta prueba. En realidad, está fallando, y verán que estoy recibiendo tres pero estoy esperando tres, pero estoy recibiendo seis. Porque aquí también tengo otros elementos, también tengo, por ejemplo, estos elementos meno. También son enlaces. Hagámoslo más específico. Inspeccionemos y veamos el H t de la página. Aquí tengo una A y dentro, y esto está dentro de un DV y tengo la sección principal. De hecho, puedo acotar mi selección para que solo esté buscando dentro del área principal. Oh, hagamos esto. En lugar de buscar dentro de toda la página, solo quiero obtener los enlaces que están dentro de esta etiqueta principal. Entonces déjame primero obtener la sección principal. Vamos a venir aquí y vamos a obtener la sección principal. Y puedo hacerlo por localizador de puntos de página. Y aquí voy a pasar selector, y esto me va a dar un subconjunto, toda la tabla H dentro de esta etiqueta principal. Entonces en vez de obtener todos los enlaces y en vez de consultar Obtener por rol en la página, voy a cambiar este get en la sección principal. Y voy a cambiar esto a principal. Entonces estoy ejecutando el mismo requisito, misma consulta, get by roll, pero no lo estoy ejecutando dentro de toda la página. Voy a ejecutarlo sólo para la sección principal. Hagamos la prueba, y esta vez espero que la prueba sea aprobada y maravillosa. Ahora mi prueba está pasando, estoy aquí dentro de esta área y ahora mi siguiente paso sería en realidad dar clic en la primera y asegurarme de que estoy viendo el título correcto. Y así voy a añadir dos condiciones. La primera condición sería en realidad ver este texto cinco monturas llevando recibo. Y entonces mi segunda condición sería cuando haga clic en él, estoy esperando ver una página que tenga este título. Hagámoslo. Voy a esperar que mi primer enlace haga que los enlaces tengan texto. Déjame cambiar esto. Estoy esperando enlaces. Voy a obtener el primer enlace por este método NTH y estoy pasando un índice Estoy diciendo que estoy esperando que esto tenga el texto de que estoy esperando cinco recibos de riego encuadernados, hay que probar de esta manera. También necesito agregar hormiga porque cada vez que en realidad estoy llamando a un método y contando u obteniendo un método, esta también es una operación azing Volvamos a ejecutar la prueba y la prueba está pasando tan bien, voy a ver este texto y ahora voy a dar click sobre esto en el primer enlace Y lo que va a pasar cuando haga clic en es, voy a ir a una página y dejarnos ver qué es esto. También creo que se trata de una H dos. Entonces estoy esperando también estar en una página que estos t existe ahí como un H dos. Y ya lo hicimos aquí. Entonces voy a copiar lo mismo. La voy a usar aquí. Esta vez, solo usaré un localizador H two y mi condición sería exactamente así. Entonces voy a esperar que H dos tenga texto, este será el texto que yo soy este este es el texto que espero ver. Esto también es un. agreguemos también una Imagen y agreguemos también un ps y hagamos la prueba. Y maravilloso. Enhorabuena. Necesitamos una prueba. Hicimos una muy buena prueba primero lo que vamos en este sentido, primero, estamos visitando nuestra página de inicio. Entonces estamos consiguiendo todos los enlaces que se encuentran dentro de esta área principal. Entonces estamos probando para ver tres posts, y luego estamos probando que el primer enlace debe tener este texto. Y luego vamos y en realidad estamos dando clic en este texto, y estamos esperando tener una etiqueta H dos, y esta etiqueta H dos también debería tener este texto. Entonces ahora nos estamos asegurando de que todos nuestros usuarios puedan hacer clic en este elemento, y cuando hagan clic, irán a una página que tenga una etiqueta H dos y el título de la publicación está ahí. 67. Introducción a la interfaz de usuario de Playwright: Ahora que hemos escrito algunas pruebas, quiero mostrarte la interfaz de usuario del dramaturgo Hasta ahora, solo volví a ejecutar la prueba en modo headless, lo que significa que no interactuamos con Dramaturgo directamente, solo nos estábamos quedando sin código y luego Dramaturgo estaba ejecutando estas pruebas y nos estamos diciendo si las pruebas están bien Y para poder ver la interfaz, podemos ejecutar este comando N px Dramaturgo prueba UI, y esto abrirá la interfaz de usuario del dramaturgo Entonces aquí verás, déjame hacer esta pantalla más grande. Entonces aquí verás que tenemos una sección de sección de bloque, que es la prueba que tenemos aquí. Dentro de esta sección de bloque, tenemos tres pruebas para cada una de ellas, verás que en realidad tenemos un ítem y la descripción viene de aquí. El primero es tiene título. El segundo tiene encabezado correcto, y el tercero es los usuarios pueden ver un post haciendo clic en él. Esto también los usuarios pueden ver una publicación haciendo clic en ella. Y junto a cada ítem, tenemos este botón Ejecutar que inicia si hago clic en él, verás que va a ejecutar la prueba. Aquí tengo la oportunidad de ver un navegador y de ver exactamente lo que está tomando el dramaturgo de acción Si estás escribiendo una prueba y de alguna manera tu prueba no funciona, esto te dará una muy buena herramienta para depurar porque verás todos los pasos Ese dramaturgo está tomando en el navegador, y luego puedes ver qué está sucediendo exactamente y por qué tu prueba no funciona Y la primera prueba es realmente sencilla, por lo que es solo verificar que el título sea correcto. El segundo también es cheques solo para este elemento, y como pueden ver, también lo ha hecho audaz para nosotros para que podamos ver qué es lo que está probando. El tercero es un poco más complicado. En realidad estamos visitando la página de inicio y luego estamos haciendo clic y déjanos ver qué está pasando. Cuando ejecute esta prueba, verán que en realidad hizo clic y estamos en el primer post y con el ID del uno y luego aquí también nos mostrará lo que está pasando y lo que está probando Esta es una interfaz de usuario realmente buena que también podemos usar cuando estamos trabajando con Dramaturgo para la depuración y para ver lo que realmente está sucediendo. 68. Ejecutar a Dramaturgo en el modo de depuración: También hay otra opción en el dramaturgo, que es realmente útil desde la depuración Y en este video, te voy a mostrar eso. Así vimos el modo UI del dramaturgo en el video anterior, y ahora voy a ejecutar Dramaturgo con el modo del debug Para ello, escribiré NP, pruebas de dramaturgo depurar. Cuando hago esto, Dramaturgo se abre en el modo de depuración. Tenemos dos ventanas. La primera ventana es en realidad nuestro navegador y la segunda ventana es el código fuente que tenemos para el dramaturgo Como pueden ver, se ha detenido en esta primera línea. Estamos en la primera prueba prueba tiene título, y luego se ha detenido en esta línea. Si presiono este botón resium, ejecutará el código y luego pasará a la siguiente prueba Esta es la segunda prueba y luego vamos a la tercera prueba y esta también se ha ejecutado la tercera. Prueba. Ahora estamos en el archivo de ejemplo del dramaturgo Déjame también pasar por estas dos pruebas y voy a ejecutar estas dos pruebas. Ahora verás que se ha movido al siguiente navegador. Anteriormente, estábamos probando en el Corum ahora estamos en Firefox, así que también puedo ejecutar la primera prueba con este botón, ejecutar la segunda prueba, tercera prueba, y luego va al al ejemplo Dramaturgo nos proporciona Voy a ejecutar la primera prueba y la segunda prueba y ahora vamos a lanzar el webkit, que como pueden ver en mi depuración, ahora Dramaturgo está tratando de depurar y ejecutar esta prueba contra el Simplemente los presionaré para terminar todas las pruebas. Como pueden ver ahora se ha superado 15 pruebas y ahora podemos ejecutar este comando para ver todo el reporte, lo cual ha ocurrido. Verás aquí que, por ejemplo, la primera, esta es la sección Bloquear en el Comium las tres primeras pruebas se han pasado en el firefox se han pasado en el sitio web, se han aprobado Para cada uno de ellos, veremos cuánto tiempo se ha tardado. Este es también el ejemplo que brinda la playwrite. 69. Añadir puntos de ruptura con la ayuda del método page.pause: Pero qué pasa si en realidad quiero depurar mi prueba y quiero tener algún tipo de punto de interrupción que cuando llegue el código haya una parada y no se continúe Y para ello, puedo cambiar mi prueba, por ejemplo, la prueba Tetext, que es un poco más complicada Veamos qué está haciendo. Entonces primero estamos visitando la página principal, luego estamos seleccionando el principal y luego estamos obteniendo todos los enlaces. Y luego estamos contando los enlaces, estamos esperando que sean tres, y luego estamos esperando el primer enlace tenga este texto, y luego estamos dando click en este enlace. Imaginemos que por alguna razón este clic después de este clic, no estamos seguros. Tenemos un problema que queremos depurarlo. Puedes agregar esta línea de código evadir página punto POS. Y le dirá al dramaturgo que se detenga en esto y luego podré ver lo que realmente está pasando Hagámoslo juntos. Déjame detener este proceso y dejarnos ejecutar al dramaturgo con la opción de depuración con el modo de depuración para que podamos ver la interfaz, podamos ver el código y para el primer caso de prueba, estoy bien con el primer caso de prueba No tengo ningún puntero de break para el segundo también. Pero para el tercero, ahora veremos que en realidad el depurador se detuvo en esta línea Y aquí estoy viendo lo que realmente está pasando. Imagina Imagina que tengo un problema y dentro de mi texto, estoy requiriendo tener una H tres. Pero en realidad los elementos que debo buscar es un H dos. Eliminemos esta línea. Déjame detener el depurador y vamos a ejecutar esta prueba. Ahora esta prueba fallará. Pero no sé cuál es el problema y cuál es la razón por la que realmente está sucediendo. Ahora verán que tengo este problema con las pruebas, así que todas ellas están fallando y luego dice localizador H tres y no se encuentra el elemento. Estoy recibiendo a este paso después un clic y después de algo de navegación, así que es mejor para mí ver realmente lo que está sucediendo y depurarlo. Vamos y hagamos la prueba con el depurador. Antes de esta línea, antes de hacer clic, voy a agregar de nuevo, page dot Pause vamos a iniciar el depurador del dramaturgo y saltemos la primera prueba y luego la segunda prueba y luego hagamos la tercera prueba Aquí con la ayuda de esta página ese gato, hecho puedo ver en qué ubicación se mi navegador y qué está pasando dentro de la página Aquí puedo, por ejemplo, usar la herramienta chrome inspeccionar elemento para ver qué elemento voy a capturar. Aquí ahora puedo ver, tengo una H dos dentro de mi prueba, estoy pidiendo H tres. Ese es el problema de que mi prueba no funciona. Y con este depurador, puedo depurar fácilmente Puedo agregar esta línea de trayectorias de página en cualquier parte de mi prueba que quiera y luego jugar bien se detiene ahí. Entonces puedo ver lo que está pasando dentro de la página, dentro del navegador y luego puedo tratar entender el problema y me va a ayudar mucho depurar mi prueba. 70. La estrategia de localización y los métodos getBy* de Playwright: En esta sección, quiero hablar G por métodos que Dramaturgo proporciona Como ya vimos, hemos utilizado G B en la prueba previa. En este video, voy a profundizar un poco más en esta sección y en estos métodos. Y G por métodos son estrategia de localización de Dramaturgos que podemos encontrar y detectar algunos elementos que existen dentro de nuestra página Se han inspirado en probar biblioteca que en la sección anterior hemos visto y la hemos utilizado. Pero la idea principal introducida por primera vez en la biblioteca de pruebas y luego Dramaturgo también usa la nomenclatura y la misma convención de la biblioteca de pruebas Y la idea detrás de G por métodos es que estamos detectando los elementos de la página la misma manera que el usuario interactúa con nuestra aplicación. Así los usuarios interactúan con nuestra app con los elementos que existen dentro de su página por su rol o por el texto que están mostrando al usuario o por la etiqueta que tienen o por el marcador Y estas son las mismas cosas que existen en la obra. Anteriormente, también hay otras herramientas que en las últimas décadas las hemos estado usando y algunas de ellas estaban usando selectores CSS Pero hay algunas ventajas de get by methods sobre los selectores CSS Aquí verás las cuatro principales ventajas y la primera es que un selector CSS no está centrado en el usuario, por lo que es más centrado en el código y cómo el desarrollador asignará las clases a los elementos y tal vez incluso una clase no esté asociada con algo visible que el usuario ve en la página. Pero los métodos Gb están centrados en el usuario, por lo que en realidad estamos probando la misma manera en que el usuario interactúa con nuestra aplicación. Y también tienen el beneficio de accesibilidad y están implementando roles de Audio y Audio significa para ricas aplicaciones de Internet. Tienen algunos atributos extra externos para los roles que tienen las personas con discapacidad que están utilizando algún tipo de asistencia para trabajar con computadoras, también pueden usarlos y sostendrán nuestra aplicación para que también sea utilizable por estas personas y también podamos probar la accesibilidad de nuestra aplicación. La tercera ventaja es que son estables a lo largo del tiempo, por lo que no son tanto frágiles como los selectores CSS Si tienes algunos selectores CSS y si intentas obtener elementos basados en las clases o estilos CSS, con los cambios mínimos en el front-end en la interfaz de usuario o refactorización, se puede romper y tus pruebas gemelas finales están fallando Pero en realidad, tal vez no hay nada malo, pero simplemente está sucediendo por las refactorizaciones Pero obtener por métodos son menos frágiles, nos ayuda a ser más estables con el tiempo. Yo también nos ayuda a tener pruebas más legibles, tal vez una clase CSS no nos diga exactamente lo que intentamos lograr a través de esta prueba. Pero estos métodos nos ayudan a tener pruebas legibles. 71. Métodos más comunes de getBy*: Y hablemos de algún uso común get by métodos. Y te voy a dar algunos ejemplos aquí y algunos de los más famosos que puedes usar dentro de tu aplicación. El primero es G por rol, que podemos pasar un rol y también podemos pasar un segundo parámetro, que es un parámetro opcional, pero también podemos especificar algunas opciones. Por ejemplo, si tenemos un botón en nuestra página y queremos obtener este botón, podemos usar el botón G por rollo. Si tienes varios botones y uno de ellos tiene un nombre específico, por ejemplo, para submit, podemos usar este nombre submit como segundo parámetro para obtener exactamente ese elemento. Obtener por rol es bueno para botón, enlaces, casilla de verificación, encabezados Como recuerdas en nuestras pruebas, también usamos el rol Geb por ejemplo, para H dos para verificar el encabezado de la página El segundo método es G por texto, y esto es exactamente lo que dice, G por texto. Es genial para verificar el contenido de texto que el usuario realmente ve en la página, para que podamos obtener los elementos basados en el texto que realmente el usuario está viendo. Y el tercer método es G por etiqueta, que es útil para entradas, área de texto y casillas de verificación, las cuales tienen una etiqueta asociada a ellas. Entonces también podemos usar esta G por etiqueta para, por ejemplo, verificar si la entrada existía y tener algún tipo de interacción con la entrada que está asociada con la etiqueta. Y el siguiente método es obtener por marcador de posición. Esto es realmente útil cuando tenemos una entrada y esta entrada no tiene una etiqueta, lo que no podemos usar G por etiqueta, pero esta entrada tiene un marcador de posición el usuario ve este marcador de lugar que dice a los usuarios qué tipo de datos deben ingresar en esta entrada También podemos usar este marcador de posición para obtener estos elementos. Y el siguiente es get by Alts text, que es una abreviatura de G por texto alternativo Y esto también es si tenemos algunos elementos que tienen este atributo alt, y lo son y también promueve la accesibilidad del HTML semántico También podemos usar texto G por Alt para obtener estos elementos. El último es G by Title, y este encontrará elementos basados en el atributo title. Entonces si tenemos, por ejemplo, la punta de herramienta y esta punta de herramienta tiene un título, y queremos obtener esa punta de herramienta y asegurarnos que muestre los textos correctos al usuario, podemos usar Get by Title.