Detox 101: Cómo escribir pruebas estables de extremo a extremo para tu aplicación React Native

Rate this content
Bookmark

En comparación con las pruebas unitarias, las pruebas de extremo a extremo tienen como objetivo interactuar con tu aplicación como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.


Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden brindar la mayor confianza de que tu aplicación funciona. Y si se hacen correctamente, pueden convertirse en una herramienta increíble para aumentar la velocidad de desarrollo.


Detox es un marco de pruebas de extremo a extremo de caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí mismo como su herramienta de pruebas de extremo a extremo.


Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean sólidas.


Prerrequisitos

- iOS/Android: MacOS Catalina o posterior

- Solo Android: Linux

- Instalar antes de la masterclass

117 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Detox es un marco multiplataforma para escribir pruebas estables de extremo a extremo para aplicaciones React Native. Sincroniza con tu aplicación, espera a que se quede inactiva y evita que las pruebas fallen debido a procesos o animaciones en curso. Detox te permite escribir pruebas unificadas que funcionan tanto en iOS como en Android, al tiempo que admiten código específico de cada plataforma. La masterclass cubre la instalación y configuración de Detox, la escritura de pruebas con Detox utilizando medidas, acciones y expectativas, y la depuración de fallos en las pruebas. También se enfatiza el aislamiento de pruebas y las mejores prácticas.

Available in English

1. Introducción a Detox y Automatización de Pruebas

Short description:

Bienvenidos a nuestro masterclass de Detox 101. Hoy aprenderemos cómo escribir pruebas estables de extremo a extremo para tu aplicación React Native utilizando Detox. Detox es una herramienta de prueba de caja gris desarrollada por Wix para solucionar el problema de lentitud e inestabilidad en la automatización de pruebas. Es diferente de otros frameworks y es popular en la comunidad de React Native. Detox te permite acceder a la memoria, leer el estado de la aplicación y sincronizarte con el hilo principal de tu aplicación.

Así que, hola a todos y bienvenidos a nuestro masterclass de Detox 101. Estoy muy feliz de verlos a todos aquí. Hoy en realidad intentaremos hacerlo práctico. Practicaremos mucho y luego aprenderemos la herramienta. Y aprenderemos cómo escribir pruebas estables de extremo a extremo para tu aplicación React Native.

Pero primero, permítanme presentarme. Hola, mi nombre es Yevgenia. Pueden llamarme Jane. Soy de Ucrania y actualmente también estoy en Ucrania. Soy gerente de control de calidad en Wix y durante los últimos años me he enfocado en desarrollar estrategias, mejores prácticas, educación y soporte de pruebas para la automatización de pruebas tanto en web como en móvil en Wix. Y para web tenemos nuestra solución interna y para móvil, como probablemente ya sepan, tenemos nuestro framework de pruebas de extremo a extremo de código abierto para aplicaciones móviles, que se llama Detox. Y hoy hablaremos de eso. Además, soy instructora autorizada en ICA Agile y soy fundadora de QA School en Ucrania, donde educamos a los QA sobre cómo hacer buenas pruebas automatizadas. También soy oradora pública. Normalmente hablo en conferencias de QA, pero ustedes me invitaron a hacer el desafío y hacer un masterclass en una DevConference, así que es la primera vez para mí. Deseenme suerte. Y estoy realmente emocionada de hacerlo. Y soy una amante loca de los Corgis, especialmente amo a este pequeño. Se llama Ruby y está por aquí cerca hoy. De hecho, fue nombrado así por un lenguaje de programación, así que es uno de los participantes. Pero él no es el tema de hoy. Hoy estamos aquí para hablar de Detox.

Y como estamos hablando de una herramienta de pruebas, antes de comenzar a hablar de la herramienta en sí, también vale la pena mencionar que hoy tenemos un increíble equipo de Detox con nosotros. Casa llena. Chicos, por favor saluden. Genial. Así que tenemos a Amit, Asaf, Joseph y Jonathan. Muchas gracias por unirse. Chicos, estaremos aquí para ayudarlos durante el masterclass. En caso de que tengan algún problema o pregunta o cualquier cosa, siempre pueden publicar en el canal de Discord creado para este masterclass. Se llama RSH Detox 101 y está dedicado a nuestro masterclass. Así que en caso de que tengan algún problema durante el masterclass, estarán allí para ayudarlos. También he publicado un mensaje allí llamado Para Preguntas y Respuestas. Si tienen preguntas a las que desean obtener una respuesta, como cuál es su próxima función Informé de un error, ¿cuándo lo van a solucionar?, o cómo puedo contribuir, reservaremos tiempo al final para las preguntas y respuestas. Solo colóquenlo en el hilo. Y nuevamente, no duden en pedir ayuda en caso de que la necesiten. De acuerdo. Y mantengámonos en silencio. Seguiré el flujo del masterclass y los chicos estarán allí para ustedes en Discord para ayudarlos.

Antes de comenzar a hablar nuevamente sobre las pruebas de extremo a extremo y las herramientas, vale la pena recordar el concepto principal en eso es la automatización, es posible que ya lo hayan visto antes. Es el concepto de la pirámide básica de la automatización. Lo que realmente dice es que debemos tener múltiples niveles de pruebas para cubrir nuestra aplicación de la manera más rentable posible. Deberíamos tener tantas pruebas unitarias como sea posible, porque están probando el código en sí, las funciones exactas. Son las más baratas, las más rápidas, así que podemos tener tantas como sea posible. Luego deberíamos tener una cantidad menor de pruebas de integración. Puede ser una integración regular, pueden ser pruebas de componentes y otros niveles intermedios Deberíamos tener menos de ellas para conectar esas unidades entre sí. Y luego tenemos pruebas de extremo a extremo para todo lo demás que queda. Y en las pruebas de extremo a extremo, pensamos que debería ser la menor cantidad de ellas, porque en realidad están conectando los puntos actuando como un usuario real simplemente presionando botones en tu aplicación, verificando visualmente algo y así sucesivamente.

En este caso, cuando hablo con los desarrolladores, porque trabajo mucho con grupos de desarrollo en Wix. Escucho que usan muchas pruebas unitarias, escucho que les gustan las pruebas de integración, pero casi nunca escucho que les encanta escribir pruebas de extremo a extremo. Y generalmente, las pruebas de extremo a extremo se consideran problemáticas. Y la razón de eso generalmente es la inestabilidad. A veces, como las pruebas de extremo a extremo están relacionadas, dependen de muchas, muchas circunstancias. Dependen de la conexión, de otros módulos que estás probando, de la conexión a internet, de terceros, de todo. Porque literalmente lo están haciendo como un usuario real. Así que significa que terminas teniendo pruebas inestables, incluso porque no fue como tu problema. Y lo bueno es que Detox fue creado precisamente con este problema en mente.

Así que conozcan a Detox. Detox fue desarrollado por Wix para solucionar el problema de lentitud e inestabilidad en la automatización de pruebas y es utilizado por React Native como su propia herramienta de pruebas de extremo a extremo. Para explicar por qué y cómo Detox es diferente de otros frameworks y por qué es popular en la comunidad de React Native. Lo primero es que Detox es de caja gris y no de caja negra. Es posible que hayan escuchado los términos como caja negra, que es cuando estás probando algo como un usuario real, no tienes idea de lo que está sucediendo bajo el capó, y caja blanca, que es cuando sabes todo y más o menos sabes cómo funciona cada función, así que generalmente está cerca de las pruebas de unidad y así sucesivamente. Pero también hay un concepto intermedio en el medio, que se llama caja gris. Entonces, la caja gris es cuando sabes algo sobre cómo funciona tu sistema bajo el capó y puedes trabajar de acuerdo a eso. En términos de automatización de pruebas, cuando miras la caja negra, la caja negra es cuando solo conoces la jerarquía de la interfaz de usuario de tu aplicación. Básicamente sabes cuáles son los componentes que tienes aquí y sabes que puedes interactuar con ellos. Eso es todo. No tienes nada más. Pero cuando hablamos del concepto de caja gris, puedes acceder a la memoria, puedes leer el estado de la aplicación y puedes sincronizarte con el hilo principal de tu aplicación.

2. Introducción a Detox

Short description:

Detox es un marco de trabajo multiplataforma para escribir pruebas estables de extremo a extremo para aplicaciones React Native. Se sincroniza con tu aplicación, espera a que esté inactiva y evita que las pruebas fallen debido a procesos o animaciones en curso. Detox tiene soporte de primera clase para React Native y no depende de WebDriver. Te permite escribir pruebas unificadas que funcionan tanto en iOS como en Android, al tiempo que admiten código específico de cada plataforma. Hoy utilizaremos un proyecto de demostración, una aplicación básica de películas, para aprender y practicar cómo escribir pruebas con Detox.

Entonces, ¿qué significa esto en realidad? La forma en que Detox funciona es sincronizándose con tu aplicación y trabajando mediante este gráfico súper simple. Espera a que la aplicación esté inactiva y, continuamente, cada milisegundo verifica si la aplicación está inactiva. En caso de que no lo esté, seguirá esperando hasta que esté inactiva. Y una vez que lo esté, procederá. Básicamente, esto evitará que las pruebas fallen en muchos casos. Por ejemplo, cuando ingresas a una pantalla, debes esperar a que se cargue y, especialmente en la web, simplemente presionas un botón que no estaba presente y tu prueba falla porque la aplicación aún estaba realizando algunas solicitudes o cargando alguna animación, y la prueba falla porque la aplicación no se reprodujo realmente. Detox espera a que la aplicación esté inactiva y lo hace. Esto evita que muchas pruebas fallen y las hace mucho más estables. Otra cosa es que Detox es multiplataforma, lo que significa que puedes escribir la misma prueba y funcionará tanto en iOS como en Android, lo cual es genial. También puedes tener código específico de cada plataforma, como usar algunos gestos específicos de la plataforma o algunos componentes específicos que solo están disponibles en iOS o Android, pero aún así puedes usar algo unificado y tener una sola prueba que se ejecutará tanto en Android como en iOS, lo cual probaremos hoy. Detox no depende de WebDriver, fue creado desde cero para aplicaciones móviles y tiene soporte de primera clase para React Native. Hoy jugaremos un poco con Detox. Usaremos la aplicación React Native para hacer todo con Detox, y esto es Detox en acción. Les mostraré cómo escribir pruebas hoy y estaremos en, como, la agenda detallada en unos minutos, pero probaremos muchas acciones diferentes, aprenderemos algunos consejos y mejores prácticas, y aquí pueden ver cómo funciona. Trabajaremos con el proyecto de demostración que he preparado para este masterclass. Es una aplicación de películas muy básica. Espero que les gusten las películas, porque a mí sí. Esta aplicación fue preparada para el masterclass. Es muy fácil y tiene algunos componentes agregados, así que jugaremos con ella. Realmente espero que hayan tenido la oportunidad de clonarla ya, instalar todo y hacerla funcionar. En caso de que no lo hayan hecho, por favor háganlo ahora. Tienen el enlace en el canal de Discord en la parte superior, así que búsquenlo y asegúrense de seguir los requisitos previos para que podamos... Les animo mucho a hacerlo práctico conmigo.

3. Agenda del Masterclass y Configuración

Short description:

Hoy configuraremos Detox para iOS y Android, aprenderemos sobre cómo escribir pruebas con Detox y exploraremos diferentes formas de ejecutar pruebas. También discutiremos consejos para evitar la inestabilidad en las pruebas. Habrá una sesión de preguntas y respuestas al final, y tendremos descansos a lo largo del masterclass para tomar algo y hacer preguntas.

Genial. Hoy, en nuestra agenda, haremos, como, cuatro cosas principales. La primera cosa es configurar Detox. Configuraremos Detox tanto para iOS como para Android. Para iOS será bastante fácil, pero para Android será un poco más... más acciones, porque tendremos que configurar nuestro proyecto nativo para Android para que funcione.

Luego, pasaremos a escribir pruebas. Jugaremos con diferentes conceptos que tenemos en Detox. Jugaremos con la coincidencia del elemento, realizaremos diferentes acciones, estableceremos expectativas. Y luego, en la tercera parte, ejecutaremos nuestras pruebas de muchas formas diferentes. Aprenderemos cómo ejecutarlas en paralelo, aprenderemos cómo depurar una prueba fallida, cuáles son los comandos de la CLI que debemos utilizar para eso. También aprenderemos algunos consejos sobre la inestabilidad, cómo escribir tus pruebas para que no sean inestables, porque ningún marco de pruebas es mágico. Hace todo lo mejor que puede, pero aún así necesitamos escribir buenas pruebas para que no sean inestables.

Y como dije antes, al final, tendremos tiempo para preguntas y respuestas, así que en caso de que tengan preguntas, hay un mensaje en el canal de preguntas y respuestas. Simplemente publiquen sus preguntas en el hilo o guárdenlas para el final. Abriremos un espacio para que cualquiera pueda preguntar. Además, tendremos una pequeña estructura para este masterclass, tres horas es mucho. Haremos dos descansos. Haremos un descanso de una hora y diez minutos, otro descanso de una hora y nuevamente diez minutos, y una última hora, para que puedan tomar un café, refrescarse y regresar. Además, estaré aquí durante la mayoría de los descansos, así que en caso de que tengan algún problema o algo, primero, no duden en preguntar en Discord. Segundo, pueden esperar hasta el descanso para preguntar en persona.

4. Instalación de Detox y Configuración de Detox RC

Short description:

Comenzaremos instalando Detox y configurando el archivo de configuración de Detox para iOS y Android. Te guiaré a través del proceso y te daré tiempo para completar los pasos en tu máquina. Tenemos una aplicación React Native con dos carpetas: una para la aplicación y otra para las hojas de trucos. Asegúrate de haber completado los pasos previos y tener las dependencias necesarias instaladas. Utilizaremos las últimas versiones de Detox y Jest. Después de instalar Detox y Jest, inicializaremos Detox utilizando la CLI de Detox. Se crearán archivos de plantilla para el ejecutor de pruebas Jest.

Genial, ¿estamos listos, chicos? Por favor, denme alguna reacción. Utilizaré el mecanismo de reacción con ustedes para asegurarme de que todo esté bien. Solo denme alguna reacción para confirmar que me están escuchando. Muy bien, perfecto. De acuerdo, genial. No veré todas las reacciones, pero intentaré cambiar. Bien.

Así que comencemos con la primera parte. Instalaremos Detox. Configuraremos el archivo de configuración de Detox y lo haremos tanto para iOS como para Android. En caso de que solo estés trabajando en una plataforma, quédate con nosotros porque la otra plataforma llevará algo de tiempo. Sin embargo, te animo a hacer ambas configuraciones en caso de que puedas, porque será más interesante, creo. Genial, ahora cambiaré a mi VS Code. La forma en que trabajaremos es que les mostraré algo y después de eso, una vez que les muestre algo, les daré unos minutos para que lo hagan en su máquina, y luego, una vez que terminen, solo denme algunas reacciones para confirmar que lo hicieron. De acuerdo.

Este es el proyecto que tengo. Les mostraré en GitHub. Jaroslav ya envió un enlace al canal, nuevamente, para que lo obtengan. Básicamente, esta es una aplicación React Native con algunas películas mostradas, y lo importante de explicar aquí es que tiene dos carpetas. Tiene la carpeta para la aplicación, esta, y también tiene la carpeta para las hojas de trucos. Las hojas de trucos son básicamente como hojas de trucos con una lista de los comandos que utilizaré durante el masterclass, para que puedan abrirlos y simplemente copiar y pegar, sin necesidad de escribir después de mí. Esta es la que ya les envié sobre cómo iniciar el proyecto e instalar todo, y comenzar su aplicación de iOS y Android, así que espero que ya lo hayan hecho. En caso de que no lo hayan hecho, asegúrense de al menos ejecutar npm install e instalar los pods, para que podamos continuar. Trabajaremos con otras hojas de trucos más adelante. Otra cosa para mostrar es que tiene varias ramas. Tenemos una rama master en la que trabajaremos. En esta rama tenemos la configuración de Detox, que ya tiene la configuración de Detox, así que después de la primera hora del masterclass. En caso de que estés atascado, no estés seguro de por qué no está funcionando para ti, o qué te falta, siempre puedes cambiar a esta rama con la configuración de Detox y continuar desde ese punto. Y con tests, en realidad tiene el resultado final de nuestro masterclass, con las pruebas escritas y todo configurado, puedes usarlo como referencia después del masterclass, en caso de que quieras probarlo en tu proyecto, o si quieres trabajar con alguien más, eres muy bienvenido a utilizar todos los materiales que provienen de este masterclass.

Genial. Creo que estamos listos para comenzar. Cambiaré a mi VS Code y les pido que abran esta primera hoja de trucos en esta carpeta de abajo. Verán, hay una configuración de Detox, simplemente ábranla como yo la estoy abriendo en modo de vista previa, en el lado derecho, y lo primero que haremos en realidad es instalar Detox. Durante los pasos previos, deberías haber instalado la CLI de Detox, que también utilizaremos, pero también necesitamos instalar Detox como una dependencia e instalar el ejecutor de pruebas para Detox. Así que hagámoslo ahora. Nuevamente, les estoy mostrando y explicando algo. Luego les daré un minuto para que lo hagan en su máquina y me den algunas reacciones de que lo hicieron. De acuerdo. Así que vayamos a la carpeta y esperemos que no ocurra ningún problema. Cambiaré a esta carpeta y simplemente copiaré y pegaré el comando. Así te asegurarás de que lo estás haciendo correctamente. Lo primero que hago es instalar Detox como una dependencia de desarrollo. Siempre puedes trabajar con las últimas versiones. En caso de que haya algún problema, también publicaré después el repositorio de Detox y el Discord de Detox. En caso de que tengas algún problema o pregunta, puedes unirte y preguntar. Esto es en realidad lo primero que haremos. La instalación de Detox llevará algo de tiempo. Ahora puedes hacerlo en tu máquina. Te daré un minuto. Espero que alguien lo haga en vivo conmigo hoy. La CLI de Detox ya era parte de los pasos previos, por lo que debería haberse instalado previamente. Pero en caso de que no lo hayas hecho, asegúrate de revisar la hoja de trucos de inicio del proyecto y verifica que tienes todo mientras hacemos esto y hablamos. Veo algunas reacciones, así que espero que estén bien. Genial. El siguiente paso es instalar Jest. Nuevamente, copio este comando e lo instalo aquí. Estoy instalando la última versión de Jest. Así que ya está funcionando con Detox. Básicamente, Detox, antes y ahora también, era independiente del ejecutor de pruebas, lo que significa que podías trabajar con cualquier ejecutor de pruebas que desees, como Mocha o Jest. Pero recomendamos encarecidamente usar Jest porque en el futuro podríamos quedarnos solo con el uso de Jest, y por eso recomendamos encarecidamente, en caso de que estés configurando tu proyecto en este momento, simplemente úsalo con Jest. En caso de que, por alguna razón, necesites algo más como Mocha, también puedes encontrar ejemplos en el repositorio de Detox donde tenemos algunos proyectos de ejemplo y puedes encontrar allí una configuración de Mocha. Genial. Así que hazlo en tu máquina y dame algunas reacciones, todo está bien. La segunda línea estaba instalando Jest. Pasemos al siguiente paso, y el siguiente paso es en realidad inicializar Detox. Para esto, ya estamos utilizando la CLI de Detox. Así que en caso de que no lo tengas instalado, obtendrás un error y en este caso, asegúrate de volver a la hoja de trucos de inicio del proyecto, encuentra la línea sobre la CLI de Detox e instálala. Presta atención a mi pantalla. Una vez que ejecute detox init, se crearán archivos de plantilla según el ejecutor de pruebas Jest y se crearán cuatro archivos. Lo que tienes a la izquierda es que se crearán las carpetas E2E, que tienen tres archivos, y también tendrás el archivo Detox RC JSON, que es un archivo de configuración para Detox.

5. Configuración de Detox y detox RCJSON

Short description:

Configura Detox actualizando el archivo detox RCJSON para iOS y realizando cambios en la aplicación nativa para Android. Detox tiene muchas opciones de configuración y puedes encontrar ejemplos y guías en la documentación de Detox. Abre la vista previa del archivo de configuración y copia su contenido en el archivo detox RCJSON. La configuración incluye especificaciones para aplicaciones, dispositivos y configuraciones. Asegúrate de reemplazar los valores necesarios con los tuyos propios. El archivo contiene configuraciones para iOS en modo de lanzamiento y depuración, así como para Android en modo de depuración y lanzamiento. Especifica el tipo de compilación, la ruta del binario y el comando de compilación para cada configuración.

Así que hazlo ahora mismo y cuando termines, comenzaré a explicar y configuraremos Detox. Tómate un minuto y hazlo.

De acuerdo, genial. Gracias por darme reacciones porque necesito entender de alguna manera si todavía me están escuchando o no. Y bien. Espero que hayas terminado porque fue un comando muy pequeño. Ahora veamos qué hemos hecho en realidad. Hemos creado cuatro archivos. El primero es un archivo de configuración JSON, que es en realidad una configuración para nuestro ejecutor de pruebas. Puedes ver aquí las líneas más importantes, como la cantidad de trabajadores que serán relevantes para la ejecución en paralelo. Más adelante hablaremos de eso. Luego también ves que se especifica el ejecutor de pruebas. Estamos utilizando automáticamente Circus para este proyecto. También hay un tiempo de espera para las pruebas. Es básicamente el tiempo de espera de tu prueba hasta que falle porque no pudo hacer algo o porque hay alguna animación infinita, por ejemplo. Así que los 120 milisegundos esperarán hasta que falle debido al tiempo de espera. Y luego, lo importante es que hay una expresión regular para las pruebas para indicar dónde se encuentran tus archivos de prueba. Así que en caso de que cambies la estructura, recuerda actualizarlo aquí también. Luego tenemos un archivo de entorno, en el que no vamos a tocar y al que no prestaremos mucha atención. Y pasemos a esta primera prueba, E2E. La primera prueba, E2E, son archivos de plantilla, pruebas de plantilla que no tendrán sentido para nuestra aplicación, por supuesto. Pero aún así, puedes ver aquí un ejemplo de algunas pruebas que esperan que algo sea visible, luego la prueba se detiene en algo, verifica algunas pruebas, etc. Modificaremos esas pruebas para que funcionen un poco para nuestra aplicación pronto. Pero déjalas como están por ahora. Y luego tenemos nuestro último archivo, que es DetoxRCJSON, que es en realidad una configuración de Detox. Tiene principalmente tres partes. Tiene las especificaciones de las aplicaciones, lo que significa el comando de compilación de iOS, la ruta de la aplicación de iOS, el comando de compilación de Android, la ruta de compilación de Android y cualquier otra compilación que necesites. Entonces, si necesitas compilaciones de depuración para iOS y Android, o necesitas compilaciones de lanzamiento para ambos, las especificas allí con los comandos exactos, como el comando de compilación regular que usas para tu aplicación. Luego, también lo haremos en unos minutos, y luego tienes una parte de dispositivos. Los dispositivos son simuladores o emuladores reales que tienes en tu máquina. El ejemplo tendrá mi propio simulador, así que debes reemplazarlo con el tuyo. Y luego tenemos configuraciones, que son en realidad una combinación de dispositivo y aplicación. Aquí dices, ok, digamos que quiero tener una configuración de lanzamiento de iOS, y dirá que quiero compilar mi lanzamiento de iOS e instalarlo en mi iPhone 12 o algo así, y puedes hacer combinaciones de lo que necesites. Genial.

El paso dos es en realidad comenzar a configurar nuestras aplicaciones. Para iOS, será extremadamente fácil. Solo necesitaremos actualizar nuestro detox RCJSON, es decir, poner una configuración válida allí, y para Android llevará un poco más de tiempo, porque haremos los cambios en la propia aplicación nativa, pero no te preocupes, solo sigue los pasos y lo haremos. Y por favor, ábrelo. Ahora puedes hacerlo en Weascode o en otro monitor, puedes abrir esta vista previa de la configuración. Este archivo es bastante largo. Tiene todo lo que necesitamos configurar, y luego también puedes usarlo como guía para la configuración de tu propio proyecto. Lo primero que haremos es abrir nuestro archivo detox RCJSON y comenzar a configurarlo. En realidad, Detox tiene muchas opciones de configuración. Puedes ver un enlace en la parte superior del documento. En realidad, Detox busca muchos tipos de archivos de configuración. Por defecto, busca DetoxRc, el JS y RCJSON. También puedes, de otra forma popular, poner una sección de detox en tu package JSON en caso de que tu configuración sea pequeña. Por ejemplo, si solo estás ejecutando iOS. Luego puedes ver todas las demás configuraciones que puedes hacer. En realidad, la documentación de Detox tiene muchas guías y ejemplos. Literalmente copiaremos y pegaremos de allí hoy y puedes hacer lo mismo en tu proyecto. Ahora, comencemos a configurar la primera parte. A la derecha, puedes ver que ya tenemos todo el archivo JSON preparado. Simplemente cópialo y pégalo en nuestro archivo Detox RCJSON. Tómate un minuto y hazlo ahora mismo, y te explicaré lo que tenemos dentro de este archivo. Por favor, denme sus reacciones nuevamente cuando hayas terminado y podré continuar con el siguiente paso. Veo algunas reacciones. Genial, espero que todavía estén conmigo. Lo que he pegado aquí es en realidad una configuración bastante grande. Tengo aquí cuatro configuraciones de aplicaciones. Tengo una configuración de lanzamiento y depuración para iOS, y una configuración de depuración y lanzamiento para Android. Puedes ver aquí que tengo tres cosas principales. Tengo un tipo de compilación, tengo la ruta del binario donde estará mi aplicación exacta después de hacer la compilación. Es como la ruta a tu archivo .app, y luego tienes el comando de compilación en sí. Puedes poner aquí tu comando de compilación regular o puedes intentar usar el mío. Solo reemplaza el nombre de tu proyecto una vez que lo hagas en el tuyo. Lo mismo para la configuración de depuración de iOS. En Android, es bastante genérico. Puedes ver aquí que hacemos la compilación de depuración y también compilamos las pruebas de Android, lo cual es importante para Detox.

6. Configuración de iOS y Android

Short description:

Asegúrate de actualizar los dispositivos en tu archivo de configuración para iOS y Android. Para iOS, obtén los nombres de tus simuladores desde Xcode. Para Android, usa el comando 'emulator -list avids' para obtener los nombres exactos de AVD. Inicia el proceso de compilación y configura Android mientras se ejecuta. Ejecuta 'detox build -C iOS sim debug' para iniciar la compilación de iOS. Si surgen problemas, solicita ayuda en Discord. Una vez hecho, pasa a configurar el proyecto de Android editando el archivo build.gradle en la carpeta de Android.

Asegúrate de no pasarlo por alto una vez que lo hagas en tu lado. Pero para nosotros, está básicamente configurado. Lo siguiente que te pedirán hacer es actualizar tus dispositivos. Esta configuración actual tiene mis dispositivos aquí, pero necesitaremos reemplazarlos por los tuyos. Para obtener los nombres de tus simuladores de iOS, puedes abrirlos desde Xcode y verlos aquí, haciendo clic derecho y seleccionando 'device'. Verás los nombres exactos de los dispositivos que tienes. Es probable que si tienes la última versión de Xcode, puedas tener iPhone 12. Puedes dejarlo como está. Y para Android, es un poco más complicado obtener la lista de tus simuladores. Puedes ir a Android Studio, lo cual lleva mucho tiempo, o puedes ejecutar un simple comando llamado 'emulator -list avids' y obtendrás el nombre exacto de tus simuladores por el nombre de AVD. Es importante que aquí pongas el nombre exacto de AVD del simulador que tienes en tu sistema y simplemente copia y pega desde aquí. Y en caso de que solo tengas Pixel 5, no lo encontrará, necesitas tener el nombre exacto de AVD. Genial, así que ahora, tómate un minuto y actualiza los dispositivos para que sean los correctos en tu archivo de configuración, y eso es todo para iOS. Comenzaremos la compilación de iOS justo después de eso. Genial. Sí. De acuerdo. De acuerdo, genial. Veo algunas reacciones, así que espero que estemos bien. Así que ahora, lo que necesitaremos hacer para comenzar es en realidad, comenzar la compilación. La compilación llevará mucho tiempo, así que durante este proceso de compilación, configuraremos Android en nuestro lado. Así que simplemente ejecutemos la compilación desde la CLI de Detox. La forma de hacerlo es verificar cuáles son las configuraciones que tienes. Puedes cambiar los nombres, puedes decidir cuáles son los que quieres tener. Y básicamente, aquí tengo cuatro configuraciones. Tengo iOS SimRelease, debug, y Android Debug y Release. Solo usaré debug para este taller. Y la razón de eso es que cambiaremos nuestra aplicación. Y al igual que cuando haces el desarrollo, quiero que sea actualizable, así que usaré la compilación de debug. Y es como la mejor práctica probablemente para el desarrollo local. Una vez que estés ejecutando y escribiendo tus pruebas mientras escribes la aplicación. Pero una vez que lo hagas en tu CI, y Detox está diseñado para CI, puedes hacer todo desde la línea de comandos, y antes del lanzamiento, por supuesto, es mejor hacer la compilación en la configuración de lanzamiento y ejecutar tus pruebas de la misma manera. Entonces, lo que haré, comenzaré mi compilación. Haré 'detox build -C iOS sim debug'. Solo copiaré y pegaré desde aquí, así que estaré seguro. 'detox build -C iOS sim debug'. Por favor, tómate un minuto para hacerlo en tu lado y asegúrate de que no falle desde la primera línea. Pero en caso de que lo haga, simplemente haz una pregunta en Discord y te ayudaremos. Y dame una reacción una vez que hayas terminado con eso. No una vez que se haya completado la compilación, sino una vez que hayas iniciado el comando, por favor, porque llevará mucho tiempo. De acuerdo, mi compilación falló. De acuerdo, genial. Déjame revisar. Lo siento, creo que tengo algún problema con el simulador, solo un momento. De acuerdo. Pero podría salir mal, por supuesto, en la demostración en vivo. De acuerdo, genial. Hagámoslo. De acuerdo, ejecutaré mi compilación un poco más tarde solo para ver, solo un momento. Arreglémoslo en mi lado para asegurarnos de que todo esté bien. Compilar sí. De acuerdo, tengo algún problema aquí. De acuerdo, así que comenzaré a configurar Android y lo arreglaré un poco más tarde. De acuerdo, veamos si estoy en ello ahora mismo. Así que comencemos a configurar Android en nuestro lado. Lo siguiente que haremos es en realidad configurar el proyecto de Android. Para hacer eso, simplemente abre tu archivo build.gradle, este desde la raíz de Android. Asegúrate de abrir el de la raíz porque necesitaremos editar ambos. Y aquí ves que tenemos esta sección X y tenemos nuestras dependencias.

7. Configuración de la versión de Kotlin en build.gradle

Short description:

Copia la versión de Kotlin de las preferencias de tu Android Studio y pégala en tu archivo build.gradle. Reemplaza la versión de Kotlin existente con la que copiaste. Avísame cuando hayas terminado.

Entonces, necesitaremos pegar una línea en esta parte X, simplemente copia desde este lado derecho, como la versión de Kotlin, blah, blah, blah. Solo pégalo aquí. Y lo que necesitarás hacer, es reemplazarlo con la versión exacta de Kotlin que tienes en tu máquina. La forma de verificarlo es ir a tu, como, es un poco tonto, pero necesitas ir a tu Android Studio, no necesitas abrir ningún proyecto. Lo que debes hacer es hacer clic en Android Studio, preferencias, y en las preferencias, tienes idiomas y frameworks y tienes Kotlin. Aquí tienes la versión actual del complemento de Kotlin. Puedes ignorar 2.1.1. Solo coloca este 1.6.21, cópialo y pégalo en tu build.gradle. Tómate un minuto, hazlo ahora mismo. Lo dejaré aquí para que puedas encontrarlo donde lo tengas, y solo dame alguna reacción una vez que hayas terminado y arreglaré mi compilación en este segundo.

8. Configuración de Android para Detox

Short description:

Agrega la clase pass Kotlin gradle plugin y la versión de Kotlin en las dependencias. Edita el archivo build.gradle de la aplicación y agrega las dependencias para Android. Crea el archivo de prueba Java de Detox y pega el código precreado. Actualiza el nombre del paquete y elimina la prueba opcional de Butler Probe. Habilita el tráfico de prueba claro para Detox creando un archivo de configuración de seguridad de red XML y agregándolo al manifiesto de Android. Modifica el archivo de prueba para que coincida con el elemento esperado por texto específico y ejecuta la prueba.

Genial, lo siguiente que agregamos es este complemento de Kotlin gradle de clase pass, la versión de Kotlin aquí en tus dependencias. Así que por favor agrégalo ahora mismo. Y luego en otras cosas que necesitaremos hacer también es cambiar nuestro informe completo, toda la sección del repositorio, que es como a continuación. Así que por favor agrega esta línea en tus dependencias y luego copia estos dos repositorios aquí y ponlos aquí. Reemplazaré Google porque ya lo tengo. Así que necesitas tener estos dos bajo la sección del repositorio. Así que por favor hazlo ahora mismo y dame la reacción de que estás bien. De acuerdo, genial, lo siguiente a lo que realmente cambiamos es que también necesitamos editar nuestro archivo build.gradle de la aplicación, que se encuentra en la carpeta de la aplicación. Asegúrate de guardar y cerrar este y no te metas con, entre esos y debajo de tu aplicación también tienes un archivo build.gradle, solo ábrelo y también necesitaremos hacer algunas modificaciones aquí. Genial, así que desplázate hasta el final del archivo y un poco hacia arriba, y verás que hay una sección de dependencias aquí y necesitaremos agregar dos dependencias para Android. Necesitaremos agregar alguna implementación de prueba que en realidad nos permitirá trabajar con alguna aplicación de prueba de la que hablaré en unos minutos, así que simplemente pégalo al principio de tus dependencias o al final, no importa. Solo agrega estas dos líneas y luego también copia esta segunda parte, ves estas dos líneas, y pégalas en la sección de configuración predeterminada. Puedes buscarlo, pero es como en la parte superior del archivo, y justo después de esta parte, simplemente ponlo aquí, soluciona algunos problemas espaciales, y estas son dos líneas que se necesitan para que Detox funcione con la aplicación de prueba porque en realidad en Android, Detox necesita dos archivos de aplicación, el real que construyes y también el archivo de prueba para que pueda trabajar con él. Así que tómate un minuto y hazlo ahora mismo y dame una reacción de que estás bien con estas dos. De acuerdo, veo que eres súper rápido, genial. De acuerdo, solo un segundo más, luego pasaremos al siguiente. Así que el siguiente paso es un poco más complicado. Necesitamos crear un archivo de prueba Java de Detox, una clase de prueba de Detox, y nos gustaría, debemos asegurarnos de que estamos usando la ruta exacta correcta que tengo aquí. Así que ve a la carpeta src de tu aplicación, y dentro de ella, debes crear esta ruta que termina con el nombre de tu paquete. En nuestro caso, nuestro nombre de paquete es detox workshop en minúsculas. Y aquí lo tienes en una configuración predeterminada, y asegúrate de que tu ruta sea correcta. Así que la estoy creando en la carpeta src, creo una nueva carpeta, simplemente la pego así, y también pongo detox workshop aquí. Así que esta es la ruta final que tendré, y presiona Enter. Hazlo por favor, ahora mismo. Debido a que es un poco desordenado, así que no romperemos nada. Solo hazlo y listo. Veo que la gente ha terminado. Genial, me encanta. Es como si fueras muy rápido. Me preocupaba que fuera demasiado aburrido hacerlo junto conmigo. De acuerdo, genial, y ahora lo que necesitamos hacer, necesitamos abrir el enlace aquí, y abre el proyecto de ejemplo del repositorio de Detox. Y literalmente necesitamos copiar y pegar todo el archivo. Ya está precreado, no necesitas designarlo tú mismo. Así que solo copia todo el archivo. Solo mira, presta atención a lo que tengo, y luego ve a esta carpeta de taller de Detox, y crea un archivo debajo de ella, que se llamará detoxtest.java, así. Asegúrate de que el nombre exacto del archivo sea así, y luego simplemente pega todo lo que copiaste de ese archivo aquí. Hazlo ahora mismo, y luego lo modificaremos un poco, para que funcione para nuestro proyecto. De acuerdo, de acuerdo, genial, veo las reacciones, genial. Entonces, después de pegarlo, necesitamos actualizar nuestro nombre de paquete en la parte superior. Entonces, nuevamente, reemplázalo con detox workshop como ya hicimos en la carpeta. Y lo segundo que debes hacer es algo opcional en tu proyecto. Eliminaré la prueba de Butler Probe. Es en realidad algo que te ayuda a debugar fallas y bloqueos en tu aplicación, pero no lo usaremos específicamente para este taller, así que simplemente lo eliminaré para que no tengamos problemas durante la compilación y solo guarda. Así que esto es todo lo que necesitamos para este archivo. Nuevamente, dame reacciones una vez que hayamos terminado y procederemos al siguiente paso. Increíble, y mi compilación aún se está ejecutando así que tenemos tiempo para un paso más. Así que el último paso es en realidad habilitar el tráfico de prueba claro para Detox desde creo que Android 28. Estaba deshabilitado y Detox en realidad necesita acceder al tráfico. Así que por eso haremos una pequeña configuración. Así que vamos a SRC, dentro de SRC encontramos main res y aquí necesitamos crear nuestra carpeta xml así que simplemente crearé una carpeta así y dentro de esta carpeta crearé este archivo el archivo de configuración de seguridad de red XML, así que solo copia el nombre y créalo en tu carpeta xml así como esto. Y lo único que necesitas agregar ahí es lo mismo, déjame cerrar el resto y puedes tomar estos minutos para hacer el archivo y la carpeta y mi computadora está diciendo que es demasiado difícil para él. Así que, de acuerdo, lo que necesitas hacer es en realidad está bien, en realidad necesitas copiar esta parte, la versión xml blah blah blah primer fragmento en este archivo y guardar. Así que hazlo por favor, dame reacciones de que has terminado. Genial, ahora me siento un poco como un blogger hoy pidiéndole a la gente que me dé muchas reacciones en marcha. De acuerdo, genial, veo. Bien, increíble. Así que lo último, lo último que hacemos es en realidad agregar este archivo a nuestro manifiesto de Android. Así que solo copia esta única línea y ve al manifiesto de Android que está muy cerca de este archivo y dentro de él, coloquémoslo aquí, genial, y dentro de tu aplicación, así en esta parte justo antes de la última etiqueta de cierre, simplemente colócala así y hemos terminado con nuestra configuración de Android. Espero que aún estés vivo porque es lo más aburrido espero que no estés demasiado aburrido pero eso es en realidad todo y mi compilación en realidad ha tenido éxito así que podemos intentar ejecutar la prueba. Entonces, como recuerdas, hemos creado esta prueba de plantilla que no tiene sentido para nuestra aplicación y quiero que mi prueba esté en verde desde la primera ejecución así que lo que podemos hacer es en realidad eliminar estas dos pruebas y lo que haré es que sé que mi aplicación tiene un texto llamado trending movies aquí así que simplemente modificaré mi prueba, mi única prueba para que coincida con el elemento esperado por texto específico, lo siento, trending movies para que sea visible y luego simplemente la ejecutaré después. Así que por favor abre este archivo de prueba, modifícalo así para que esté en verde y dame una reacción para que pueda comenzar a ejecutar la prueba. Mhm. Mhm. De acuerdo, de acuerdo, veo. Genial, increíble. De acuerdo, de acuerdo, así que genial y ahora ejecutemos nuestra prueba así que para ejecutar la prueba necesitamos exactamente el mismo comando que usamos para la compilación, lo único que reemplazamos es la palabra build por la palabra test. Así que hazlo así y cerraré Android Studio para que mi Mac no explote y en realidad presionaré Enter y debería comenzar a ejecutar mi prueba. Así que tengo mi simulador en segundo plano así que simplemente lo iniciaré manualmente para que también lo veas.

9. Escribiendo Pruebas con Detox

Short description:

Hemos completado la configuración de Detox en las plataformas iOS y Android. La compilación es exitosa en ambas plataformas y las pruebas están en verde. A partir de ahora, nos enfocaremos en escribir pruebas con Detox. Aprenderemos sobre medidas, acciones y expectativas en Detox. Las medidas se utilizan para encontrar elementos en la pantalla, similares a los selectores en la automatización web. Las acciones definen qué acciones realizar, como tocar, desplazarse y deslizar. Las expectativas se utilizan para verificar el estado de los elementos, como visibilidad, enfoque o texto. Es importante tener expectativas en tus pruebas y cada prueba debe verificar solo una cosa. Comencemos con las medidas.

De acuerdo, de acuerdo. De acuerdo, mm-hm, mm-hm. Oh, sí. Ya ha instalado mi aplicación. La volveré a ejecutar para que puedas verla nuevamente y luego entraremos en detalles sobre lo que está sucediendo aquí. Pero lo bueno es que tenemos la primera prueba aprobada así que bien por mí, salió bien. Solo hazlo ahora mismo en tu máquina, por favor. Ejecuta la primera prueba, asegúrate de que esté en verde, dame tu reacción. Solo un pequeño consejo en caso de que estés ejecutando y el nombre de tu simulador sea incorrecto. En este caso, Detox fallará pero te dará una especie de consejo como que no son los nombres reales que tienes y estos son los simuladores que tienes para que puedas copiar desde allí y simplemente ponerlo en tu archivo Detox RC para configurarlo para que se ejecute en el específico.

Genial, en realidad nuestra primera parte está casi terminada y lo último que necesitaremos hacer es construir nuestro proyecto de Android y en realidad comenzar la prueba pero propongo comenzar la compilación ahora mismo e ir a un descanso para que volvamos una vez que la compilación haya terminado y podamos ejecutar nuestra prueba una vez más. Entonces, nuevamente, estoy haciendo la compilación de detox menos C. En caso de que ejecutes sin menos C especificando tu configuración, simplemente fallarás porque dirá que hay múltiples configuraciones como esta y si alguien tiene algún problema durante el descanso estamos aquí así que me iré solo por un segundo así que ayudaré con los problemas. Así que ejecuta detox build menos C y luego simplemente copia desde tu detox RC porque no crear un error como este y simplemente ejecútalo y eso es todo para la primera parte. Entonces, creo que podemos comenzar la segunda parte así que en realidad hemos hecho toda la configuración que necesitamos. Hemos instalado detox. Hicimos la configuración de detox tanto para iOS como para Android. Mi compilación en realidad está en verde lo cual es genial desde el primer intento y ahora simplemente ejecutaré lo mismo pero solo para ver que mi prueba de detox para Android también está bien. Así que por favor hazlo junto conmigo. Solo ejecuta tu prueba de Android. Debería iniciar tu simulador e instalar la aplicación de la misma manera que lo hizo para iOS y la prueba debería verse exactamente como la de iOS porque es la misma prueba.

De acuerdo. Mm-hmm, genial. De acuerdo y las aplicaciones se recargaron, genial, y la prueba está en verde, genial. Android también está en verde, tenemos dos pruebas en verde en diferentes plataformas, lo cual es increíble. Entonces, a partir de este punto, en realidad cambiaré a usar solo iOS porque todas las pruebas serán correctas y serán multiplataforma. Entonces, en caso de que quieras, también puedes cambiar a usar solo una plataforma, ya sea iOS o Android, lo que prefieras. Yo usaré iOS, pero nuevamente, si quieres puedes seguir usando ambos, y solo usaré el de iOS usaré solo el de iOS. Así que lo pondré en algún lugar aquí para que puedas verlo todo el tiempo. De acuerdo, genial. Y en realidad, en esta parte, practicaremos cómo escribir pruebas con Detox. Aprenderemos cómo se ve la prueba de Detox, de qué se compone, la sintaxis básica. Aprenderemos cómo encontrar el elemento porque en caso de que tengamos algunas mejores prácticas de las que hablaré, y algunos otros consejos y trucos que puedes usar en caso de que no puedas usar la mejor práctica. Hablaremos sobre tres conceptos principales en Detox que son medidas, acciones y expectativas. Y también intentaremos cómo hacer acciones específicas de la plataforma en caso de que lo necesites o en caso de que estés, como, trabajando solo con una plataforma y cosas así. Entonces podrás escribir, como, una prueba y literalmente funcionará incluso con pasos específicos de la plataforma para ambas plataformas.

Genial. Entonces, chicos, por favor, denme alguna reacción de que sus pruebas también están en verde y están listos para continuar desde este punto para que pueda comenzar a mostrarles la parte de escritura de pruebas. De acuerdo. Verde, verde, genial. De acuerdo. Veo que más personas realmente están dando reacciones, lo cual, como, mejora mi estado de ánimo aún más. Entonces, y ahora simplemente cambiaré a la escritura de pruebas. Así que tenemos otra hoja de trucos para esta parte también. Así que solo abre la tercera en vista previa porque aquí verás algunas mejores prácticas, enlaces a la documentación también. Tendrás algunos, como, ejemplos de código y realmente te animo a usarlo después del taller en caso de que quieras escribir algunas pruebas. Y lo que realmente comenzaremos es, puedes, como, abrirlo en otro lugar. Solo comenzaré mostrándote un buen lugar para ir en caso de que estés comenzando a escribir tus pruebas con Detox. Así que tenemos documentación, como, referencia de API para tres tipos de cosas en Detox. Tenemos medidas, tenemos acciones y expectativas. Las medidas son la forma en que encuentras tu elemento, como selectores en la web. También compararé un poco con la web en caso de que estés familiarizado con otros tipos de automatización. Es como selectores en la web. Una forma de encontrar tu elemento en la pantalla. Luego están las acciones, que son, como, lo que quieres hacer, tocar, desplazarte, deslizar, lo que sea. Y también puedes tener expectativas. Debes tener expectativas en tu prueba, que en realidad es el propósito de tu prueba, es verificar algo. Y puedes esperar que algún elemento esté visible, que esté enfocado o que tenga algún texto, etc., que tenga cualquier tipo de expectativa que desees. Asegúrate de que una buena prueba siempre tenga la expectativa, y termina con la expectativa, así que asegúrate de tenerla, y verifica solo una cosa dentro de tu prueba, lo cual siempre es una buena práctica. Genial. Entonces comenzaremos hablando de las medidas. Así que cerraré esto, para que veas mejor. Básicamente, veamos primero qué hace esta prueba. Entonces, tengo un típico JustSyntax que probablemente ya te resulta familiar. Tenemos describe, que es como un conjunto de pruebas, como todas tus pruebas que tienes en este archivo. Luego tienes las declaraciones beforeall y beforeeach, que es el código que se ejecutará antes de todas las pruebas, solo una vez, o antes de cada prueba que tengas. Entonces, aquí puedes ver que antes de todas las pruebas, estoy lanzando la aplicación. Y antes de cada prueba que tengo, estoy recargando el React Native. Entonces, en caso de que ejecute mi prueba, permíteme mostrarte.

10. Tocar un botón y esperar texto

Short description:

En esta parte, aprendemos sobre la importancia de comenzar desde un estado limpio en nuestras pruebas y cómo tocar un botón y esperar que aparezca texto. También discutimos la importancia de usar IDs de prueba para hacer coincidir elementos en las pruebas de Detox.

Verás que se abre dos veces porque la primera vez, verás que se está instalando en el simulador. Y una vez que lo hace, lo abre, lo lanza por primera vez. Así que se ejecuta antes de todo y luego se recarga porque la recarga de React Native funcionó y luego mi prueba realmente funcionó. Así que lo necesitaremos en caso de que tengamos múltiples pruebas porque siempre es la mejor práctica comenzar desde un estado limpio. Al final, si tenemos tiempo, jugaremos un poco con la inestabilidad. Te mostraré cómo hacer que tu prueba no sea estable, como hacer y no hacer con tu inestabilidad. Jugaremos con eso un poco más tarde, pero solo para que sepas, por eso lo necesitamos.

Luego, tenemos nuestra prueba, que está dentro de la declaración it. Y simplemente cambiaré el nombre, comenzaré con algunas pruebas súper básicas que tocarán este botón y esperarán que aparezca el texto de presión del botón. Entonces, para hacer eso, necesito tocar el botón amarillo. Por cierto, si te sientes aburrido, siempre puedes jugar con eso e intentarlo antes que yo y luego comparar con cómo estoy haciendo esto y jugar con eso, si estás esperando. Así que debes tocar el botón amarillo y esperar que aparezca el texto. Para hacerlo, en realidad, como dije antes, iré literalmente a la documentación de detox. Tienes un enlace en tu chateo. Iré a acciones y como quiero tocar, encontraré la acción de tocar aquí y puedes ver que hay ejemplos de trabajo, así que puedes copiar y pegar. Así que simplemente copié esta línea. Espero el elemento por el toque táctil y simplemente lo pegaré en mi prueba así. Y lo siguiente que necesitaré reemplazar es mi ID de prueba. Por ahora, pongamos el ID de prueba que tengo. Explicaré cómo encontrarlo o por qué este ID de prueba. Más adelante, no necesitamos enfocarnos en eso ahora mismo. Así que hazlo como yo. Agrega esta línea a tu prueba y luego agregaré mi ID de prueba y tú harás lo mismo. Tómate tu tiempo y agrega esta línea de expectativa y luego dame una reacción una vez que lo hayas agregado. Y buscaré el ID de prueba exacto mientras esperas. ¿Estamos bien aquí? ¿Has agregado esta línea o lo has encontrado? ¿Está arriba? Por favor, avísame.

De acuerdo, veo, genial. De acuerdo, entonces lo que necesitamos actualizar en esta prueba. También te daré más tiempo una vez que complete esta prueba. Así que también lo harás y lo ejecutarás. Entonces, lo que también necesitaremos agregar aquí. Así que simplemente pon las mismas ideas que tengo ahora mismo. No prestes atención a por qué es así. Y explicaré después de nuestra prueba, por qué necesitamos este ID y cómo crearlo. Y lo haré, ya que mi texto que estoy buscando es `button pressed`, también reemplazaré esto por texto con botón, de acuerdo, de acuerdo, mm-hmm, de acuerdo, guardaré y ejecutaré mi prueba. Así que tómate tu tiempo, haz lo mismo. Se queda en la pantalla. Así que haz lo mismo. De acuerdo, creo que tendrás tu primer fallo aquí. Sí, podría ser. Sí. Genial. Está bien, sí, está bien. Es un fallo intencional, así que estamos bien. En realidad, haremos todo a través del fallo y la corrección para que aprendas algunas mejores prácticas y todo eso. Y simplemente dame una reacción una vez que hayas terminado. Y arreglaremos la prueba. La haremos pasar a verde, y luego pasaremos a otro ejercicio. De acuerdo. Me encanta que tengamos participantes tan atentos. De acuerdo, genial. Así que tenemos nuestra primera prueba y en realidad está haciendo lo que necesitamos. Pero actualmente falla por la razón de que no puede encontrar la medida que estamos buscando. En este caso, simplemente tenía un texto incorrecto escrito. Y esa es la razón por la que falló mi prueba. Pero también puedes tener algún error en tu ID de prueba o algo así y en este caso, es bastante claro que fallará. Así que en caso de que lo reemplace así, debería pasar. Arréglalo en el código. Sí, arréglalo en el código. En realidad, a veces es algo bueno cuando tu prueba falla y realmente escribiste algo significativo, escribiste el texto correcto en tu lógica, pero la prueba falló, a veces realmente significa que necesitas actualizar algún texto en tu aplicación porque no tiene sentido. Así que mi prueba ahora está en verde, está funcionando. Por favor, quien esté haciendo esto, dame una reacción de que tus pruebas también están en verde ahora y continuaré con una parte más interesante, porque por ahora, es algo muy básico, básico.

De acuerdo, genial. Básicamente, lo que hacemos aquí, es tocar un botón y esperar que aparezca un texto. Y aquí estamos esperando al elemento, estamos tocando el elemento por su ID. Entonces, ¿qué significa este ID en realidad? La mejor práctica al escribir pruebas de Detox es siempre hacer coincidir tu elemento por la propiedad de ID de prueba. En realidad, puedes tener muchas opciones diferentes de qué hacer coincidir, puedes hacer coincidir por texto, como hicimos con las cadenas de prueba que estamos buscando en Alerta. Podemos hacer coincidir por etiqueta, podemos hacer coincidir por rasgos para iOS, y eso tiene algún ancestro o descendiente específico, podemos hacer coincidir con alguna combinación de medidas como que el elemento tenga este ID y este texto, y también podemos hacer coincidir por índice. Podemos tener muchas medidas complicadas diferentes, pero el ID de prueba siempre será la mejor opción.

11. Uso de IDs de prueba para la identificación única de elementos

Short description:

Para hacer que tus IDs de prueba sean únicos, agrégalos a tus componentes de React Native. Se transforman en identificadores de accesibilidad en iOS y etiquetas en Android. Puedes encontrar los IDs de prueba en la sección de accesibilidad de Xcode y en el inspector de diseño de Android Studio. Esto es útil para proyectos complejos cuando no puedes recordar la estructura de los IDs de prueba. Los IDs de prueba ya han sido agregados a este proyecto.

Entonces, con el ID de prueba, puedes hacer algunos trucos para que sea súper único y trabajar siempre con él. Por eso recomendamos encarecidamente agregar un ID de prueba a tu componente de React Native y, una vez que lo hagas, hacer coincidir por tu ID de prueba. En realidad, una vez que pases tu prop de ID de prueba a tu componente de React Native, eventualmente se transforma en el identificador de accesibilidad en iOS y en una etiqueta en Android. Entonces, en caso de que estés buscando el ID de prueba, eventualmente puedes abrir Xcode. Te mostraré antes del descanso cómo hacerlo, porque creo que es algo opcional. Puedes hacerlo de esta manera, pero usaremos los IDs de prueba preparados antes del masterclass. No perderemos tiempo en eso, pero básicamente en Xcode, si depuraras tu clave de kara, puedes encontrar esta sección de accesibilidad aquí y verás el identificador, que es nuestro ID de botón que acabamos de usar. Y en Android, es un poco diferente. Se llama etiqueta. Puedes encontrarlo en la lista de atributos de la misma manera. También en Android, puedes usar Android Studio, adjuntar tu inspector de diseño a la jerarquía que tienes, a las pantallas que tienes y ver la etiqueta de esta manera. Entonces, ¿por qué necesitarás esta forma de buscar el ID de prueba? Cuando tienes una estructura súper complicada de tu proyecto y realmente no puedes recordar cómo diseñaste tu ID de prueba y no puedes obtener la versión final. En este caso, lo necesitarás. Pero ya he agregado los IDs de prueba a este proyecto. Así que simplemente los usaremos tal como están. Entonces, si quieres, puedes buscar a través de estos componentes y encontrar los IDs de prueba que necesitas o puedes usar los míos junto con, genial.

12. Tocar en la imagen de películas de moda

Short description:

Pasemos a la escritura de pruebas. Nos enfocaremos en tocar la imagen de películas de moda y esperar a que se muestre el texto de descripción general. Practicaremos diferentes acciones y expectativas. Cambiemos el nombre de la prueba y copiémosla para crear una segunda. Usaremos IDs de prueba para identificar la imagen. Ejecutemos la prueba para ver si falla.

Así que eso fue todo lo aburrido por hoy. Pasemos a la escritura de pruebas. Genial, hagamos algo más. Tenemos esta segunda sección, que se llama películas de moda y tiene un deslizador con diferentes películas mostradas. Y es más o menos la misma imagen y componente de título repetitivo. Así que hay muchos de esos, podemos deslizarlos y ver qué más tenemos.

Lo que quiero hacer es en realidad tocar en esta imagen de películas de moda y esperar a que se muestre este texto de descripción general. Así que comenzamos practicando dos acciones diferentes y más adelante también practicaremos mejores expectativas. Cambiemos el nombre de esta prueba a debería tocar en el botón y copiémosla para hacer la segunda. Así que quiero tocar esta imagen. Iré a esta galería de películas y veré cuál es mi ID de prueba. En este caso, tengo un ID de prueba aquí. Se pasa como una prop de esta manera en caso de que estés agregando un ID de prueba a tu componente React Native, es posible que no sea compatible, por lo que deberás pasarlo como prop una y otra vez hasta llegar a tu componente nativo real como herramienta. Como aquí tengo una imagen. Básicamente, por eso lo estoy pasando aquí, como props test ID punto imagen. Entonces, mi ID de prueba final contendrá dos cosas. Contendrá este ID de prueba películas de moda y tendrá punto imagen. Entonces, mi ID de prueba será punto imagen así. Y quiero tocarlo y asegurarme de que se muestre mi descripción general. Y silenciemos la imagen. Y tómate un minuto, haz lo mismo y ejecuta nuestra prueba para ver si realmente falla y luego descubriremos por qué.

13. Tocar en la imagen por índice

Short description:

En Detox, es importante hacer que tus IDs de prueba sean únicos para evitar tocar en múltiples elementos. La mejor práctica es generar un índice para cada imagen en un componente repetitivo. Otra opción es usar la medida 'at index', que te permite especificar el índice de la imagen en la que quieres tocar. Asegúrate de revisar la documentación para conocer la sintaxis correcta. Ejecutemos la prueba y veamos si pasa.

De acuerdo, genial, espero que hayas terminado con esta prueba. Y ahora déjame explicarte cuál es la razón de esto. Así que, en comparación con la automatización web, cuando estás buscando algún elemento, como por ejemplo, si quieres tocar en alguna imagen que es repetitiva, o si tienes algún componente de lista y tienes títulos que se repiten. Y todos ellos tienen el mismo ID de prueba. En mi caso, todas estas imágenes, esta y esta y esta y esta, todas tienen el mismo ID de prueba porque es un componente repetitivo. Entonces, si estás trabajando con la automatización web, en la mayoría de los casos, lo que esta prueba haría es tocar en la primera que encuentre. Pero Detox no funciona así, en realidad fallará con el problema de que se encontraron múltiples elementos con esta medida, lo cual es bueno para la testabilidad porque en este caso prestarás atención y necesitarás reemplazar esta medida para que sea súper única y tocar en una específica. Y en este caso, como lo hice, es súper genérico y podría tocar en cualquier imagen. Y para que esto pase, necesitaré especificar cuál es la imagen específica en la que quiero tocar. Entonces, nuevamente, la mejor práctica es siempre hacer que tu ID de prueba sea único. Entonces, lo que puedes hacer con esto, es que podrías tener en este componente, la galería de películas, lo que podrías hacer, es generar de alguna manera aquí tu índice de la imagen. Entonces tendrías tu ID de prueba como punto cero, tendrías el índice de la imagen en la que quieres tocar. Así que cada imagen tendría un ID de prueba único, la primera tendría cero, la segunda tendría uno y así sucesivamente. Esta es la mejor práctica, pero sería demasiado fácil si solo tuviéramos best practices. Así que hagámoslo de otra manera. Simplemente lo eliminaré. Y usaremos otra opción que tenemos. Tenemos una medida llamada 'at index'. Nuevamente, volveré a la documentación para mostrártelo. Tenemos una medida llamada 'at index'. Y te muestro siempre la documentación. porque dependiendo de las medidas que uses, a veces tendrás una estructura diferente en esta línea. Así que presta atención a todas estas partes donde la estás colocando. Simplemente copiaré este 'at index' y lo colocaré justo aquí antes de 'top'. Y tocaré la imagen cero, que es la primera imagen en mi lista. Así que la película Shawshank, y esperaré a que suceda. Y ejecutémoslo para ver si está en verde. Tómate tu tiempo, haz lo mismo, asegúrate de que tu prueba esté en verde. Espero que mi prueba esté en verde en realidad. Sí, genial. De acuerdo, genial. Dame reacciones una vez que hayas terminado. Genial, genial. Veo reacciones. Increíble. Excelente.

14. Tocar en la imagen y acción de deslizamiento

Short description:

Especificamos el índice en el que queremos tocar y actualizamos el estado antes de comenzar la prueba. Sin embargo, cuando intentamos tocar en una imagen de película, no era lo suficientemente visible para que Detox pudiera tocarla. Para solucionar esto, necesitamos realizar una acción de deslizamiento o desplazamiento antes de tocar en la imagen. Lo demostraré en la próxima prueba. Ejecuta tu prueba y avísame si pasa.

De acuerdo. Así que ahora déjame explicar un poco lo que acaba de suceder. Entonces especificamos, creo que entiendes que especificamos el índice en el que queremos tocar. Así que en realidad estaré en una rama con la prueba. Lo que verás es que tendrás los ejemplos de prueba antiguos. Tendrás resultados de fallos y la razón del fallo y los que están en verde. Así que puedes ponerte al día con eso después pero solo mantendré las pruebas en verde. Así que nuestra mejor suite estará en verde. Entonces, lo que ves en mi prueba es que en realidad se estaba recargando el estado antes de comenzar. Por eso tengo dos pruebas ahora. Cada prueba comenzó desde el mismo punto de partida desde la pantalla de inicio. Y en caso de que elimine esta línea. En realidad, la segunda prueba comenzaría desde esta escena. Jugaré un poco con esto en la parte de la inestabilidad pero aún así, solo para que sepas, realmente lo necesitamos una vez que tengamos varias pruebas.

Genial, así que estamos bien con tocar en la imagen por índice. Y lo siguiente que haremos en realidad, quiero tocar en una imagen que está, digamos, en la línea. Así que esta, digamos El Padrino. También una película, así que intentemos tocarla. Así que nuevamente, copiaré mi prueba. Debería tocar en la tercera imagen por índice, y lo reemplazaré por tocar en el índice dos. Y ejecutaré mi prueba. Tómate tu tiempo, haz lo mismo, y veamos qué sucede. De acuerdo, genial. Tenemos un fallo. Así que dame una reacción una vez que también tengas un fallo para que pueda comenzar a explicarlo. Y probablemente omitiré la prueba anterior que tenía para que sea más rápido. De acuerdo. Y esperando tus reacciones. Veo, de acuerdo. Dame algunas más, y continuaré. De acuerdo, genial. Tenemos un fallo. Genial, bien. Entonces, ¿qué sucedió en realidad en este caso? Lo que intentamos hacer es tocar esta película, lo cual es posible si lo hago manualmente. Pero la razón del fallo en este caso sería que la imagen en la que intentamos tocar no era lo suficientemente visible para que Detox pudiera tocarla. Esto es importante saberlo en caso de que intentes tocar un elemento que no cumple con un umbral de visibilidad puedes ver un problema aquí. Puede ser del 75% o del 100% dependiendo del tipo de componente que tengas. Pero en caso de que no lo cumpla, fallará en este paso simplemente porque no pudo tocarlo. Entonces, para solucionar esto, lo que necesitaremos hacer es realizar una acción de deslizamiento o desplazamiento. Y después de eso, tocaremos la imagen que se muestra. Dado que esta falló, simplemente cambiémosle el nombre a desplazamiento de toque, lo siento, deslizamiento. Y tocar en la tercera imagen por índice. Y nuevamente, iremos a nuestra documentation aquí, encontraremos la acción que necesitamos, que es un deslizamiento. Y copiaré nuevamente esta primera línea. Lo siento, desplazamiento. Necesito un deslizamiento. De acuerdo, ahora deslicemos, de acuerdo. Oh, así, sí. Genial. Pegaré esto antes de tocar. Y lo que necesitaré reemplazar, será el componente en el que estoy deslizando, donde comencé la acción de deslizamiento, y luego la dirección que estoy usando para el deslizamiento. Así que mi dirección es definitivamente hacia la izquierda. Y el componente en el que estaré deslizando es en realidad mi imagen. Entonces, la mejor práctica en caso de que estés deslizando algo, sería comenzar a deslizar desde el primer componente que tengas. Así que tu deslizamiento será como el más pequeño, y más controlable. Es como una pequeña pista. Entonces, en caso de que estés haciendo esto, estaré deslizando desde, así, así. Permíteme copiar todo esto. De acuerdo, así. Y simplemente lo pegaré aquí. Así que comenzaré a deslizar en cero. Deslizaré hacia la izquierda, luego intentaré tocar, y luego espero, nuevamente, que esta página se abra y todo sea visible. Y estoy intentando ejecutar mi prueba. Tómate tu tiempo, haz lo mismo. Lo dejaré así para que veas el código. Pero realmente te animo a copiar y pegar desde la documentation. Es realmente lo más fácil y rápido siempre. Así que, simplemente hazlo. Genial. Mi prueba está en verde, avísame si la tuya también lo está.

15. Explorando el Deslizamiento y Desplazamiento en las Pruebas de Detox

Short description:

En esta parte, discutimos el problema del deslizamiento en las pruebas de Detox y sus limitaciones. Exploramos una opción alternativa, el desplazamiento, que proporciona más control y estabilidad. El desplazamiento tiene varias opciones, incluyendo desplazarse por un elemento específico y desplazarse continuamente hasta que un elemento sea visible. Recomendamos usar el comando 'mientras el elemento' para esperar a que un elemento sea visible mientras se desplaza. Esto proporciona un enfoque más confiable para interactuar con elementos debajo del área visible.

Y chicos, no hay prisa, así que en caso de que necesiten más tiempo siempre pueden escribirme en el chat si necesitan más tiempo, necesito otro minuto así que siéntanse libres. Quiero que todos lo completen. Mm-hmm. De acuerdo, esperaré dos minutos más porque veo que no hay muchas reacciones. Así que no los interrumpiré, simplemente háganlo y continuaremos desde ese punto. En realidad, noté que de hecho si deslizas no desde la primera imagen sino desde toda la sección de películas populares el deslizamiento es enorme y te pasas mucho de la película El Padrino y la prueba falla. Es cierto, si tienen un segundo chicos si están esperando que terminemos siempre pueden jugar con el deslizamiento en diferentes componentes, deslizando en diferentes índices saben, dando más atributos al deslizamiento como la velocidad de este deslizamiento adentro. En realidad, verán que en mi opinión el deslizamiento no es una opción tan controlable así que es un poco difícil, ya saben necesitas darle muchos más atributos para hacerlo de alguna manera controlable y sospecho que también funcionará un poco diferente dependiendo del simulador y el tamaño de la pantalla y todo. Así que, más adelante, les mostraré otra opción que pueden usar en esos casos que será mucho más confiable. De acuerdo, básicamente necesitamos el deslizamiento para presentar esta imagen y funcionó para nosotros, pero nuevamente, como dije antes no es la solución más estable así que también probaremos otras. Así que podemos hacer otra cosa. Vamos a nuestra documentation nuevamente y veamos qué tenemos. Tenemos muchas acciones diferentes. Tenemos top, tenemos multi-top, tenemos pulsación larga. Tenemos algunas acciones que son específicas de la plataforma como arrastrar con pulsación larga para EE. UU. o desplazarse hasta el índice para Android. Así que en caso de que estuviéramos usando Android en este caso podríamos intentar desplazarnos, lo siento, desplazarnos hasta el índice exacto pero no funcionaría para iOS. Y también tenemos algunas cosas específicas de iOS como establecer columna a un valor o fecha del orador a una fecha específica.

16. Desplazamiento y Verificación de la Visibilidad del Elemento

Short description:

El desplazamiento en las pruebas de Detox tiene varias opciones, incluyendo desplazarse por un elemento específico, desplazarse continuamente hasta que un elemento sea visible y desplazarse hacia arriba o hacia abajo. Se recomienda usar el comando 'mientras el elemento' para esperar a que un elemento sea visible mientras se desplaza. En este ejercicio, crearemos una prueba que se desplaza hasta la sección de 'otras películas' y verifica si es visible. Para hacer esto, reemplazaremos el elemento por el que nos estamos desplazando y el elemento que esperamos. Asegúrate de agregar un ID de prueba a la vista de desplazamiento en el archivo Home.js. Tómate tu tiempo para completar el ejercicio y ejecutar tu prueba para ver el resultado. Siéntete libre de explorar otras opciones de desplazamiento en la documentación de Detox y prueba a usar desplazamiento en lugar de deslizamiento en los casos apropiados.

También puedes probarlo en tus propias aplicaciones. Y otra cosa que tenemos además del deslizamiento es el desplazamiento. El desplazamiento tiene muchas opciones diferentes. En primer lugar, puedes desplazarte por un elemento específico como en una dirección específica, en una cantidad específica de espacio desplazado. Y otra opción, lo que puedes hacer es desplazarte continuamente hasta que se muestre algún elemento. Básicamente, esto es lo que intentaremos porque creo que es la forma más estable en caso de que quieras tocar algún componente o al menos esperar a que sea visible y esté debajo de la vista.

Recomiendo usar este comando 'mientras el elemento'. Es un comando bastante largo. Lo que hace en realidad es esperar a que un elemento sea visible mientras se desplaza por el elemento con el ID. Así que asegúrate de que cuando te desplaces estés desplazándote por tu vista de desplazamiento. Debes tener una vista de desplazamiento para poder desplazarte, lo cual tiene mucho sentido. Entonces, lo que haremos es ir aquí, crear otra prueba para nosotros. De acuerdo. Y lo que haremos es llamarla debería desplazarse hasta que algún elemento sea visible. Y luego tocaremos en él nuevamente. O tal vez solo esperemos a que algo sea visible para verlo y hacer el texto. Así que quiero desplazarme hacia abajo aquí y ver esta sección. Quiero verificar que el estilo de 'otras películas' se muestre realmente. Así que presta atención porque es un componente repetitivo nuevamente. Tenemos la sección de películas de entrenamiento y luego tenemos otras películas, que es la misma sección pero con un nombre diferente. Nuevamente, un componente repetitivo. Así que debes tener mucho cuidado en términos del ID de prueba, nuevamente. Así que vamos a intentarlo. Voy a mostrarte el comando de desplazamiento y luego te daré espacio para que lo intentes tú mismo para encontrar la medida exacta que necesitas para encontrar el texto de 'otras películas' y no el de abajo. Genial, así que voy a eliminar estos dos y voy a ir a la documentation. Voy a copiar este largo comando, este. Espera un rato mientras el elemento y lo pondré en la primera línea. Ahora necesitaré reemplazar el elemento por el que me estoy desplazando y el elemento que espero. Así que asegúrate de que el primer elemento sea el que esperas y el segundo elemento sea el que te desplazas. Así que espero, hagámoslo de una manera simple. Usaré el texto de 'otras películas', así que esperaremos el texto. No es necesario una medida complicada solo para ver la pantalla de prueba. Y luego necesito desplazarme por alguna vista de desplazamiento, así que es una página de inicio. Así que solo verificaré y veré si tengo el ID de prueba, lo cual no tengo. Entonces, lo que haremos, lo agregaremos ahora mismo. Lo agregaré aquí y lo llamaré HomeScrollView así, así. Y lo pondré aquí y simplemente eliminaré la segunda línea, recomendaré la segunda línea por ahora y solo ejecutaré la primera. Así que nuevamente, tómate tu minuto ahora, copia este largo comando, luego reemplaza el texto que estás buscando y agrega un ID de prueba a tu página de inicio. Lo dejaré así, para que veas dónde ponerlo. Simplemente agrega un ID de prueba HomeScrollView por el que te desplazarás. Así que tómate tu tiempo, uno, dos, cinco, está bien. Solo intenta hacerlo. Y abriré la prueba allí como esto. Lo siento, solo un momento, así. Así que verás tanto la prueba como la página de inicio. Sí, hazlo y dame reacciones cuando hayas terminado. Y ejecuta tu prueba en realidad para ver que esté en verde y ver qué hace. Y lo mostraré en mi máquina después. Solo verificando si se supone que debemos agregar el ID de prueba a nuestra vista de desplazamiento o no todavía. Así que sí, siéntete libre de agregarlo. Ve a este archivo Home.js. Luego tienes esta vista de desplazamiento, que es para toda la página. Y agregas el ID de prueba justo aquí, así. Puedes agregar tu propio ID de prueba que te guste y simplemente ponerlo allí. Y recuerda siempre la mejor práctica de hacerlo único para que no interfiera con alguna otra vista de desplazamiento en caso de que la tengas en tu página. Chicos, cuatro minutos más para completarlo. Tómate tu tiempo y dame reacciones una vez que hayas terminado. Ya veo una reacción, genial. Pero unos minutos más para que todos continúen. Y chicos que acaban de terminar, les recomiendo encarecidamente que vayan a la documentation y jueguen con otras opciones de desplazamiento. Jueguen con el desplazamiento hacia abajo, jueguen con el rápido o veo más reacciones. Jueguen con el desplazamiento hasta el final, jueguen con este desplazamiento como este. Hay desplazamiento solo hacia arriba o hacia abajo, desplazamiento hasta el borde, simplemente jueguen con la API cuando tengan tiempo. Y pueden reescribir el ejemplo anterior donde estaban usando deslizamiento en lugar de desplazamiento. También pueden usar desplazamiento, ¿verdad? Puede ser más estable. Pero a veces el deslizamiento es la opción, pero diría que el deslizamiento es más la opción en caso de que tengas algún componente de deslizador que siempre se desliza solo a uno, al segundo, al primer componente que tenemos aquí. Como este, que puede cambiar solo a la segunda imagen, así que el deslizamiento funcionaría allí. Pero en otros casos, es mejor asegurarse de que estás buscando algo específico. De acuerdo, bien. Veo. De acuerdo.

17. Agregando Expectativas y Comparadores Únicos

Short description:

Descomenta la expectativa y utiliza el comparador 'to have text' para verificar que un elemento tenga el texto exacto. Es una buena práctica hacer coincidir por ID para verificar la visibilidad del elemento. Haz que el comparador sea único modificando la galería de películas o utilizando otros comparadores como end o ascendent. Prueba el código modificado y avísame si está en verde. Tener múltiples expectativas en un caso de prueba es aceptable siempre y cuando verifiquen criterios diferentes. Sin embargo, si la primera expectativa falla, las demás no se ejecutarán.

Genial. Así que hagámoslo un minuto más y continuaremos con el siguiente.

De acuerdo, unos segundos más y continuemos con la siguiente parte.

De acuerdo, cerraré este HomeJS. Creo que la mayoría de las personas ya han terminado. Lo siguiente que haremos en realidad, como lo hicimos en esta prueba, fue desplazarnos hacia abajo hasta que algún elemento sea visible. Pero esto no es realmente una prueba. En realidad realiza una acción y se desplaza y no falla, pero en realidad no es una prueba. Y la razón de eso es que le falta una expectativa. Así que ahora descomentemos esta expectativa y hagamos mejores expectativas de las que hicimos antes. Entonces, lo que hicimos antes en la mayoría de los casos es esperar por el texto. Pero esperar por el texto no siempre es una buena práctica. Y la razón de eso es que en realidad podemos cambiar el texto. Podemos tener una aplicación multilingüe, lo que significa que el texto puede ser diferente dependiendo del idioma y más. Esto crea inestabilidad y costos adicionales de mantenimiento, así que no lo necesitaremos. Entonces, la mejor práctica siempre es hacer coincidir por ID si quieres verificar que el elemento sea visible. Pero si queremos verificar que el elemento tenga el texto exacto, lo que debemos hacer es esperar, como esperar que algún elemento por ID tenga un texto específico. Así que esto es lo que haremos en realidad. También te mostraré la documentación de las expectativas. Así que podemos esperar tener diferentes cosas. Antes esperábamos que fuera visible y también podemos esperar que exista, que esté enfocado, que tenga texto y cosas así. Y también puedes agregar una declaración negativa, en caso de que quieras esperar que algún elemento no sea visible. Así que simplemente lo agregas así. Agregas, esperas que el elemento blah, blah, blah, punto no, punto sea visible. Así que funciona con cualquier expectativa, pero usaré una diferente usaré tener texto. Así que vamos a copiarlo. Y lo que haremos en esta prueba es esperar que el elemento por ID tenga el texto 'otras películas'. Es un poco estúpido en este caso porque en realidad nos estamos desplazando para ver otras películas y luego lo hacemos, pero aún así. Hagámoslo. Así que simplemente probaremos esta API. Así que voy a verificar que mi componente, mi título, tenga el texto correcto. Iré a mi galería de películas para obtener el ID de prueba de mi título. Creo que tampoco lo tiene. Así que simplemente lo editaré aquí. Aquí. Genial. Así que simplemente agregaré nuevamente mi ID de prueba. Lo llamaré, hagamos algo súper estúpido por ahora, que eventualmente necesitaremos corregir. Llamémoslo título. Y simplemente lo editaré en nuestra prueba y esperaré que el elemento por ID título tenga el texto 'otras películas' y guardaré. Y simplemente ejecutemos nuestra prueba nuevamente para ver qué obtenemos. Nuevamente, lo estoy abriendo en partes para que puedas ver ambos, agrega tu ID de prueba, agrega esta expectativa de esperar que el elemento por ID título tenga el texto 'otras películas'. Y avísame si tu prueba está en verde o no, solo dame una reacción. Creo que hay alguna reacción que Yaroslav siempre usa con la manzana verde. Así que en caso de que tu prueba esté en verde, solo dame una manzana verde si la tienes en tus reacciones. Y si está en rojo, dame algo más. Y también la ejecutaré. Rojo, de acuerdo. Veamos qué obtenemos aquí. De acuerdo, también tengo rojo, genial. ¿Quién más tiene el resultado rojo? De acuerdo, genial. ¿Alguien más? De acuerdo, tomate rojo, muy original Yugoslav. Es muy original. De acuerdo, rojo, genial, excelente. Así que puedes continuar escribiendo pruebas después de mí una vez que termine de hablar. Así que creo que ya entiendes la razón del fallo. Y la razón del fallo es en realidad que nuestro comparador no es único, era extremadamente genérico. Así que hagamos otro truco para hacer que este comparador sea súper único. Así que haré un pequeño desafío para ti. Ve a los detalles de la documentación y trata de hacer que este comparador título sea único de todas las formas posibles que encuentres. Puedes modificarlo, como en la galería de películas, o puedes hacerlo a través de los comparadores reales que puedes usar como end, ascendent o cualquier otro, y simplemente hazlo, haz que tus pruebas estén en verde, como una pequeña tarea de desafío, y dame una reacción una vez que tu prueba esté en verde, y eventualmente te mostraré una forma simple, como múltiples formas de hacerlo. Así que hubo una pregunta interesante, ¿debemos tener múltiples expectativas en un caso de prueba o no? Es una buena pregunta porque realmente depende del caso. En general, diría que es mejor que tu prueba verifique solo una cosa. No significa que solo tengas una expectativa, pero significa que el objetivo de tu prueba es verificar solo una cosa específica, que ocurrió alguna acción o no sé, que se creó una cuenta, y blah-blah-blah. Y una vez que lo estés verificando, en realidad puedes tener múltiples criterios sobre cómo verificarlo. Por ejemplo, si hiciste un registro exitoso, cuando tienes algún mensaje de éxito, y aparece una imagen de cuenta, como en la realidad, el control de calidad manual haría múltiples verificaciones. Verificaría que el mensaje de éxito sea correcto, verificaría que aparezca la imagen, verificaría que aparezca el nombre y cosas así. Entonces, en este caso, si estás esperando múltiples elementos, podría estar bien, pero debes conocer el inconveniente de que en caso de que esta primera expectativa falle, las otras no se ejecutarán. Así que en este caso, podrías perder la verificación de otras dos expectativas, pero para este caso específico, está bien.

18. Mejores Prácticas en la Escritura de Pruebas con Detox

Short description:

Al escribir pruebas con Detox, es importante evitar combinar múltiples pasos y expectativas en una sola prueba. En su lugar, divide las pruebas para verificar cada paso individualmente o utiliza diferentes niveles de pruebas. Detox ofrece múltiples opciones para hacer coincidir elementos, incluyendo la generación de IDs de prueba para componentes repetitivos y el uso de ancestros o comparadores. Se recomienda hacer que los IDs de prueba sean únicos y modificar el código del componente cuando sea posible. Detox también permite la ejecución de código específico de plataforma, lo que hace que las pruebas sean genéricas para las plataformas iOS y Android. Tómate un minuto para completar el ejercicio de escritura de pruebas y avísame cuando hayas terminado.

Pero en caso de que lo estés haciendo, lo que definitivamente no deberías hacer es cuando haces paso, paso, paso, expectativa, luego dos pasos más y otra expectativa, este no es el camino a seguir. Deberías dividir esas pruebas para verificar cada una por separado. Así que incluso si tienes algo como hacer el registro y digamos que estás ingresando tus data y luego presionas el botón y luego quieres verificar, digamos que tu botón se activó, entonces lo presionas y quieres verificar que se haya creado tu cuenta, no es el mejor enfoque. Es mejor reemplazarlo con dos pruebas diferentes o en este caso, sería mejor reemplazarlo con diferentes niveles de pruebas. Como verificar el botón desactivado, activado, lo verificaría con otros niveles, probablemente como pruebas de componentes o algo así. Y el escenario real del registro, por ejemplo, lo verificaría con la prueba completa de extremo a extremo. Así que nuevamente, úsalo sabiamente, intenta usar una expectativa, pero en caso de que quieras verificar múltiples situaciones que aparezcan en el mismo punto, puedes usar múltiples. Espero que esto responda la pregunta.

Genial, en realidad hay múltiples opciones posibles que podrías haber usado. Podrías haber ido a esta prueba escribiendo chatear aquí y ver, como esto. De acuerdo, así que puedes ver aquí múltiples opciones diferentes. Puedes generar tu ID de prueba para componentes repetitivos. Entonces podrías haber agregado algo como, en lugar de tener aquí, solo el ID de prueba título, podrías haber pasado las props test ID punto título, y en este caso usarlo. Otra opción que podrías usar es usar estas dos opciones, ya sea con ANCESTOR o y comparadores. Entonces con ANCESTOR significa que tu componente ANCESTOR, como este, por ejemplo, debería tener algún ID de prueba específico. Entonces en nuestro caso, lo más fácil sin siquiera cambiar el código del componente es decir con ANCESTOR otras películas, porque mi ANCESTOR tiene el ID de otras películas y funcionaría. Entonces si hago, simplemente copiaré completamente mi línea para no perder tiempo en eso porque tenemos más cosas que hacer. Así que lo haría así, si no quiero cambiar el código del componente, lo haría así y debería funcionar. Intentemos ejecutarlo y verlo. Pero por supuesto, no es la mejor práctica. Estoy mostrando este ANCESTOR, descendientes, índices y todo solo para casos en los que realmente no puedes modificar cosas o estás importando algún componente. En este caso puedes usar, y solo para jugar con la API de Detox también. Pero en caso de que lo estés, puedes hacer que tus IDs de prueba sean únicos, entonces úsalos. Genial, nuestra prueba está en verde, lo cual es genial. Ahora quería mostrarte una última cosa en realidad para jugar con ella. Quería mostrarte cómo agregar código específico de plataforma. Así que simplemente copiaré mi primera prueba. Y solo, será como, solo para mostrar el concepto. No escribiremos ningún código complicado. Es algo fácil de hacer. Lo llamaré debería tener código específico de plataforma. Y simplemente modificaré esta prueba para ejecutar el código específico de plataforma. Digamos, lo haré, es en realidad algo fácil. Solo haré si device.getplatform. Entonces, si device.getplatform es igual a iOS, entonces en este caso haré algo. Y puedo tener el mismo código que sucede para Android. Y básicamente significa que, en caso de que se esté ejecutando en la plataforma iOS, creo que todos entienden cómo funciona. Simplemente irá a este y ejecutará esta línea, e ignorará las líneas que están en Android. Esta es una buena manera de hacer que tus pruebas sean genéricas para ambas plataformas, en caso de que quieras usar algunas acciones específicas de la plataforma como las que has visto en las acciones. Así que intentemos ver si realmente funciona. Entonces, puse este botón superior en amarillo desde la primera prueba en iOS, así que debería ejecutarse en mi ejecución de iOS. Y luego la prueba debería estar en verde. Pero en caso de que lo ponga en Android, debería ignorarlo y la prueba debería fallar porque no hay algo así. Así que hagamos dos pruebas como esta. Así que las probaremos. Solo observa después de mí ahora. Y luego lo intentarás tú también. Así. Y lo pondré en iOS, y ejecutaré ambos en iOS. De acuerdo. Genial. Deberíamos tener dos pruebas. De acuerdo. Entonces el primero funcionó porque en realidad era la plataforma iOS. Y el segundo falló porque ignoró el código que estaba en la parte de Android. Así que nuevamente, un último ejercicio de escritura de pruebas. Tómate un minuto, haz lo mismo, y luego te mostraré cosas relacionadas con la ejecución de pruebas. Creo que esta cosa, como mientras trabajaba también trabajaba con diferentes frameworks, como frameworks híbridos para automatización móvil antes. Y con Detox, creo que esta es una forma realmente genial de hacer que tus pruebas sean genéricas porque me gusta, creo que a muchas personas les gusta reutilizar código tanto como sea posible. Así que iría con esto en caso de que estés haciendo algo genérico. Y nuevamente, dame una reacción una vez que tus pruebas estén bien. Una debería estar en verde, otra debería estar en rojo. Entonces, Yaroslav, el emoji perfecto para esto sería probablemente un semáforo. De acuerdo, veo reacciones. Genial, tomémonos un minuto más y finalmente cambiaremos a la depuración de una prueba fallida. De acuerdo. De acuerdo. Genial, creo que continuaré desde este punto. Simplemente eliminaré estas pruebas que tengo y omitiré todas mis pruebas porque cambiaremos a la parte de escritura de pruebas y jugaremos un poco con las pruebas fallidas. Así es como realmente comenzaremos. Entonces, en Detox tienes muchas, muchas pruebas y en Detox tienes muchas, muchas opciones diferentes mientras ejecutas tus pruebas.

19. Investigando Fallas en las Pruebas con Detox

Short description:

Abre la hoja de trucos de escritura de pruebas y desplázate hasta la sección de pruebas fallidas. Aprende sobre las opciones disponibles para ejecutar pruebas en Detox, como especificar configuraciones, nombres de dispositivos y niveles de registro. Intenta ejecutar pruebas con diferentes niveles de registro para obtener información más detallada sobre las interacciones con tu aplicación. Utiliza la API de Detox para tomar capturas de pantalla de las pruebas fallidas y acceder a ellas en la carpeta de artefactos. Graba videos de las pruebas fallidas usando el comando 'grabar videos' y encuéntralos en la carpeta de artefactos. Estas características son útiles para depurar y analizar las fallas en las pruebas.

Por favor, abre la hoja de trucos de escritura de pruebas que tienes. Nuevamente, y busca la sección de pruebas fallidas. Por lo general, cuando estamos pensando cómo queremos ejecutar nuestras pruebas, simplemente vamos a la documentación de Detox, al CLI de Detox y puedes ver cuáles son las opciones que tienes para la prueba. Para la prueba, puedes especificar la configuración con la que quieres ejecutarla, como hicimos antes. Puedes hacerlo con nuestra configuración en caso de que tengas múltiples configuraciones en tu proyecto. Puedes especificar el nombre del dispositivo si quieres ejecutar en uno específico. También puedes trabajar con niveles de registro si quieres lo cual es útil para depurar. Puedes usar artefactos de prueba si quieres probarlo, también lo probaremos en unos segundos que son capturas de pantalla y videos que es mi herramienta favorita en Detox porque realmente te ayuda a depurar tus pruebas muy rápido, y también puedes especificar algunos reintentos, limpiar después de tus pruebas. Puedes especificar trabajadores para ejecutar en paralelo y probaremos todo eso ahora mismo. Así que no más charlas de mi parte. Solo jugando con eso. Así que probemos la primera cosa. Hagamos que algunas pruebas fallen. Hagamos que esta segunda prueba recuerdes que estaba tocando la imagen por índice. Y dejemos esta línea como está y cambiemos solo el texto en Overview a OverviewblahBlah. Así que esta prueba debería fallar y luego la omitimos y solo la ejecutamos para ver que falla. Así que solo quiero ver la prueba en rojo y empezar a hacer algo con el error. Solo esperemos a que falle. De acuerdo, está sucediendo aquí. Sí, falló. Así que digamos que queremos saber cuál es la razón de este fallo. Queremos entrar en detalle. Entonces lo primero que puedes hacer es ejecutarlo con un nivel de registro diferente. Tienes muchas opciones. Recomiendo usar verbose. Así que hagámoslo ahora mismo. Agrega a tu comando en ejecución el signo menos L y pon verbose aquí. Y ejecútalo. Tómate tu tiempo, haz lo mismo y comprueba qué verás en tus registros. Verás las interacciones exactas con tu aplicación. Verás mucha más información al respecto. Genial, en realidad, como Amit escribió en el chat, el nivel de registro predeterminado es info. Así que podemos profundizar con el verbose y en realidad puedes ver las cosas que tenías en tu pantalla y es muy largo pero es muy informativo en caso de que estés buscando un problema y no estés seguro de qué es. En nuestro caso, está bastante claro, pero aún así, en caso de que no estés seguro, simplemente intenta usar este nivel de registro. Probemos la segunda cosa. Intentemos tomar capturas de pantalla de nuestro fallo. Entonces Detox tiene una API que toma capturas de pantalla para tu prueba dependiendo de la indicación que le des, puede tomar capturas de pantalla de todas tus pruebas, puede tomar capturas de pantalla de pruebas específicas, puede tomar capturas de pantalla solo de las que fallan o ninguna. Así que tomaré capturas de pantalla de la prueba que falló. Verifiquemos que mi comando sea correcto. Sí, lo es, genial. Nuevamente, tómate tu minuto, ejecuta lo mismo y explicaré lo que acaba de suceder y dónde buscar esas capturas de pantalla. De acuerdo. De acuerdo, así que mi prueba falló, tengo las capturas de pantalla. Dame reacciones una vez que hayas terminado para que pueda comenzar a mostrar y hablar sobre las capturas de pantalla, por favor. De acuerdo, genial. Veo muchas reacciones, excelente. Puedes ver a la izquierda, tal vez ya lo hayas notado, que aquí tienes una carpeta de artefactos creada. Y esta carpeta de artefactos, ¿qué contiene? En realidad, tiene las tres capturas de pantalla. Así que la primera captura de pantalla que tiene es cuando la prueba comenzó. Así es como se ve la prueba una vez que comienza. La segunda captura de pantalla que verás es cuando falla. Así que este es el punto exacto de tu prueba cuando falló y luego tienes la prueba finalizada, que es el último punto después de todas las limpiezas finales o después de que se ejecuta el código. Así que esta es la última, que verás en mi caso, ya que no estoy ejecutando nada después de mi prueba, será igual, pero básicamente tienes tres capturas de pantalla. Así que puedes verificar si te falta algo en tu pantalla, como si estás esperando algún elemento y en realidad te falta o algo más. Verás que, como en la web, es muy popular tener este tipo de fallo porque algo aún no se ha cargado en la pantalla, pero aquí no enfrentamos este problema porque aunque tenemos varios cargadores en nuestra aplicación, Detox espera a que se inactivos, y solo entonces espera o verifica que algo sea visible, por lo que no necesitamos agregar esos waiters, no necesitamos hacer algunos waiters personalizados para animaciones y cosas así. Lo hace automáticamente. Entonces, esto es como lo de las capturas de pantalla, realmente me encanta, es muy útil si estás trabajando en tu propio proyecto también puedes jugar con eso, y una vez que configures Detox para CI, que es un punto para otro taller, pero aún así, en ese caso también podrás, como puedes hacer algo de magia, ya sabes, subir tus capturas de pantalla a algún lugar y acceder a ellas desde allí o puedes usar realmente esta API de capturas de pantalla donde quieras. Genial, y lo siguiente que realmente intentaremos lo último en investigar la falla es saber por qué nuestra prueba falló mediante el video. Así que intentemos usar el comando grabar videos. Es casi lo mismo que tomar capturas de pantalla, pero aquí solo agregas grabar videos y pones en fallando y lo ejecutas y nuevamente, hazlo, mira qué sucede. Intenta encontrar tu video. Estará en la misma carpeta de artefactos y dame alguna reacción. Oh, de acuerdo. De acuerdo, ¿estamos bien? ¿Encontraste el video grabado? De acuerdo, veo una reacción. De acuerdo, genial, veo dos. Genial. De acuerdo. Entonces, en cada ejecución, tendrás esta carpeta creada con la fecha y hora exactas de la ejecución, para que puedas encontrar tu ejecución exacta. Y aquí tendrás tu video del archivo de prueba.

20. Depurando Fallas en las Pruebas con Detox

Short description:

Puedes usar el video completo de la prueba para depurar la falla de tu prueba y ver los pasos. Detox proporciona un artefacto de prueba que generalmente es suficiente para depurar tu prueba específica. Es una de las características más adorables de Detox.

Solo lo revelaré en mi Finder, y simplemente ábrelo para ver qué estaba sucediendo. Entonces esta es la prueba exacta. En realidad, se detuvo y luego falló. Así que vamos a reproducirlo. Este es el video completo, y esta es probablemente la mejor herramienta en caso de depurar la falla de tu prueba. Puedes ver los pasos completos de la prueba y ver qué estaba sucediendo. Entonces, esto es prácticamente lo último para depurar una falla, porque generalmente eso es más que suficiente. Pero en caso de que quieras depurar paso a paso como sueles hacerlo para tu aplicación, también puedes usar un punto de interrupción regular de InSpec en tu comando de prueba, el mismo comando de prueba, luego vas desde InSpec. Siempre está adjunto... Como lo haces para tu aplicación regular, puedes depurarlo de la misma manera en caso de que lo necesites, pero en la mayoría de los casos, para depurar tu prueba específica, este artefacto de prueba será suficiente. Y en realidad, es una de las características más adorables que creo que tiene Detox. Genial. Todas las características son, por supuesto, adorables, pero esta es mi favorita.

21. Visualización de IDs de Prueba y Ejecución de Pruebas en Paralelo

Short description:

En esta parte, aprendemos cómo ver los IDs de prueba en Xcode y Android Studio. El orador explica dos métodos: agregar una línea de código para crear una instantánea de la jerarquía o adjuntarse al proceso en el dispositivo. Demuestran el proceso en Xcode y mencionan que se puede hacer de manera similar en Android Studio. El orador enfatiza la importancia de diseñar pruebas para que se ejecuten de forma independiente y proporciona instrucciones para ejecutar pruebas en paralelo con varios trabajadores. Demuestran el proceso y resaltan la reducción significativa en el tiempo de ejecución de las pruebas. El orador concluye mencionando que compartirá consejos para lidiar con la inestabilidad y invita preguntas de la audiencia.

De acuerdo, genial. Ahora quería mostrarte una cosa más. A veces, otro dolor de cabeza o razones de falla pueden ser los IDs de prueba que agregaste a tu destino que eventualmente resultaron incorrectos. Como prometí, mostraré cómo puedes ver tus IDs de prueba exactos. Lo mostraré en Xcode y luego intentaré mostrarlo también en Android Studio. Es un poco lento para mí, así que tal vez lo muestre aquí, pero incluso si no lo muestro para Android Studio, te daré instrucciones sobre cómo hacerlo en tu lado porque es la misma lógica. Básicamente, en Xcode, lo que necesitas hacer es abrir cualquier proyecto, como que en realidad no estoy trabajando con Xcode o Android Studio mientras trabajo con Detox porque la línea de comandos es más que suficiente pero en caso de que quieras ver visualmente la jerarquía, puedes hacerlo de dos maneras. Puedes agregar una línea al final de tu prueba que creará una instantánea de tu jerarquía y simplemente puedes abrir este archivo o puedes adjuntarte al proceso que tienes en tu dispositivo aquí y en este caso, podrás simplemente adjuntarte a este. Así que usaré debug, adjuntarme al proceso. Estoy obteniendo la lista de procesos y este es el que necesito. Así que solo esperaré a que esto suceda. Puedes descansar ahora, no habrá más codificación después de este punto así que puedes descansar. Ese fue el último punto de codificación y si te interesa en paralelo conmigo hablando siempre puedes jugar con otras API. Entonces, debes abrir si vas a hacer esto debes abrir este taller de detox taller de detox y encontrar el archivo de delegado, ábrelo y luego verás en la parte inferior aquí es un poco difícil mostrarte, no puedo agrandarlo pero ves que hay un debug en la jerarquía inferior. Si lo presionas, verás que se muestra mi jerarquía real. Así que detrás de Xcode puedes ver que hay otro dispositivo que en realidad estaba abierto es como para adjuntarse a este proceso así que puedes ignorarlo. Pero mi interfaz de usuario real desde este lugar se muestra aquí, y si toco cualquier elemento, verás que en el lado derecho en realidad tengo el identificador de accesibilidad, este, que es mi ID de prueba real que estaba pasando. Así que en algunos casos, si no lo has pasado correctamente hasta el componente nativo real en este caso, es posible que lo tengas vacío, o si hiciste alguna confirmación y agregaste algunas líneas es posible que lo tengas de manera incorrecta. Así que para comprobarlo, puedes ir aquí y ver ¿cuáles son los identificadores de accesibilidad que tienes? Así que puedes ver aquí en este modo y también puedes cambiar aquí al modo 3D. Puedes ver la jerarquía exacta que tienes. Puedes encontrar componentes ancestros o descendientes para usar. Y aquí puedes ver que tengo esta imagen de Películas de Tendencia que usamos antes. Y este será el título de Películas de Tendencia. Así que puedes trabajar con esta parte mientras copias y pegas los IDs de prueba en caso de que la estructura de tu proyecto sea realmente complicada o algo así. Genial. Mentí. En realidad tenemos una cosa más, algo realmente genial para probar. Lo olvidé por completo, pero definitivamente lo haremos. Creo que te encantará porque intentaremos ejecutar en paralelo. Haremos un ajuste realmente fácil. Simplemente duplicaremos nuestro archivo de prueba. Este lo copiaremos y lo renombraremos como segundo test. Así que simplemente intentémoslo. Sí, y tengamos algo, eliminemos la mayoría de mis pruebas para tener solo una prueba con el desplazamiento, que es bastante largo en el segundo y algunas pruebas cortas en el primero. Que sea esta primera prueba. De acuerdo, genial. Ahora tengo dos archivos donde tengo pruebas. Entonces, para ejecutar en paralelo, lo que necesitas tener son dos archivos separados con pruebas. Por lo tanto, cada uno de los archivos se abrirá en paralelo. Entonces, para ejecutar en paralelo, básicamente usas esta bandera menos V workers que especifica la cantidad de trabajadores a crear para ti. Crearé dos, puedes crear más, depende de ti, pero siempre debes recordar que será como un consejo. Me encanta decir que una vez que estás diseñando como escribir tu prueba, siempre debes escribirla como si se ejecutara eventualmente en paralelo con otras pruebas, porque una vez que estás diseñando tu prueba súper independiente, para que pueda ejecutarse sin fallar otras pruebas y sin interactuar con otras pruebas y realmente se ejecute de manera independiente y aislada, en este caso tu prueba será la mejor. Si tu prueba es dependiente, siempre será un problema eventualmente. Entonces, simplemente ejecutémoslo en varios trabajadores, haré dos, haré menos V dos. Y la primera ejecución será bastante lenta porque se lanzará mi segundo emulador. Pero después de eso, una vez que lo haga por segunda vez, será mucho más rápido que hacerlo en un solo trabajador. Así que simplemente intentémoslo. De acuerdo, así que ves que mi segundo emulador se está iniciando y tomará tiempo para que se inicie. Entonces, en el primero, ya comencé a trabajar, lo volveré a ejecutar después. Y ahora puedes hacer lo mismo, solo tómate tu tiempo, crea el segundo archivo. Incluso puedes tener todas las pruebas allí, solo asegúrate de tener dos archivos para algunas pruebas y ejecuta con este menos v2 y dame una reacción como siempre. Genial, mis pruebas ya están terminadas. Dame reacciones una vez que también hayas terminado, y mientras tanto, simplemente volveré a ejecutar mis pruebas. Genial. Veamos, está hecho. Genial. Y la segunda vez, puedes ver si alguien me está mirando ahora, puedes ver que sucede mucho más rápido. Entonces las pruebas se están ejecutando realmente, y tomó mucho menos tiempo para cada prueba y en total fue la prueba más larga. Fueron 15 segundos y no como 40 o 30 segundos que tendríamos si lo ejecutáramos secuencialmente. Entonces, si continúas haciendo esto, si no has terminado, y en realidad cambiaré a la parte final de este taller hoy, casi hemos terminado. Quiero darte algunos consejos geniales sobre la inestabilidad porque en Wix realmente luchamos mucho contra la inestabilidad. Simplemente odiamos lo mismo, tanto en web como en móvil y tenemos algunas herramientas que creamos a su alrededor y algunos consejos que tenemos, y creo que realmente funcionan, así que quiero compartir algunos. Y si tienes alguna pregunta, siéntete libre de publicarla ahora mismo en el chat de Zoom y las abordaremos después una vez que tengamos preguntas y respuestas, y si no hay preguntas, tal vez le dé la palabra a Amit para que dé algunas ideas sobre lo que nos espera en el futuro en caso de que quiera. Y después de eso, me retiraré de este taller, genial. Así que abriré esta escritura de prueba y quiero hablar un poco sobre la inestabilidad, por lo general, cuando hablamos de agregar a las pruebas, la inestabilidad es algo que creamos ya sea por el entorno o nuestras manos, lo que significa cuando escribimos, nos equivocamos. Y debo decir que la segunda parte ocurre con mucha más frecuencia porque a veces podemos escribir algunas coincidencias no únicas, podemos omitir algún elemento o podemos desplazarnos de manera inconsistente. Entonces, estas son las cosas que realmente crean inestabilidad. Otro punto de crear inestabilidad es en realidad los datos. Imagina que tienes una prueba que está haciendo algunos cambios en el perfil del usuario. Entonces cambia su nombre o algo así.

22. Aislamiento de Pruebas y Mejores Prácticas

Short description:

Para garantizar el aislamiento de las pruebas, sigue una estructura de prueba correcta con pasos de preparación, la prueba en sí y la limpieza. Evita crear pruebas dependientes que se basen en un orden específico. Comienza cada prueba desde un estado nuevo y haz coincidir los elementos por IDs de prueba generados únicos. Intenta ejecutar pruebas en hilos paralelos para garantizar el aislamiento. Si la inestabilidad persiste, usa el comando 'retries' para volver a ejecutar las pruebas varias veces. Detox es de código abierto y da la bienvenida a las contribuciones. ¡Gracias por asistir a la masterclass!

Y luego tienes otra prueba que realiza alguna apertura del perfil de usuario y verifica que su nombre sea visible. Entonces, en este caso, lo que verás es que tus pruebas realmente interactúan con los mismos datos. La primera prueba pasará porque cambiará algo, pero es probable que la segunda falle porque estaba buscando algunos títulos antiguos que ya no son válidos. Y esta situación ocurre con bastante frecuencia porque generalmente probamos en la misma cuenta de prueba y no es realmente relevante, ya sabes, crear la cuenta de prueba para cada prueba así que debes pensar cómo hacer que tu prueba esté aislada.

Lo que funciona en este caso es, creo que la mejor estructura probablemente, dejaré de compartir esto o así veremos las caras de cada uno. Básicamente, la mejor práctica, creo que es mantener la estructura correcta de tu prueba en general. Es tener algunos pasos de preparación, a veces es incluso mejor hacerlo a través de la API, ya sabes, crear un usuario o hacer algún cambio, y luego la prueba real se realizará a través de la interfaz de usuario, como lo hicimos hoy. Y después de eso, tendrás una fase de limpieza. La fase de limpieza también es mejor y más rápida hacerla a través de la API, pero incluso si no puedes, puedes hacerlo a través de la interfaz de usuario. Pero recuerda que en caso de que tu prueba falle, también se ejecutará la limpieza porque esto será un 'after'. Así que puedes tener un lío con los datos. Todavía soy partidario de tener alguna configuración de datos de la API luego la prueba en sí, y luego la limpieza. Asegúrate de no crear pruebas que sean como, agregar el contacto y la segunda prueba que elimina el contacto. No están aisladas, no son consistentes porque si cambias el orden de esas pruebas, definitivamente fallarán. Y probablemente el consejo más importante es no crear pruebas dependientes. Y algunos más, una vez que comiences tu prueba, asegúrate de comenzar desde cero. Como hicimos recargar React Native antes de cada prueba que tienes, hazlo en la declaración 'before each'. Así que tendrás esas, en realidad tienes esos consejos en el chat para que puedas revisarlos después. Así que asegúrate de comenzar desde cero. Haz coincidir por algo único como hicimos hoy. Nuevamente, resumiendo, siempre es mejor hacer coincidir por un ID de prueba generado que sea único para el componente en lugar de hacer trucos en las API o hacer trucos con ideas de prueba súper genéricas. Utiliza esta estructura de prueba correcta e intenta ejecutar las pruebas como si se ejecutaran en paralelo. Incluso puedes intentarlo, como lo hacemos a veces para la web. Es un poco pesado para móviles, pero también puedes intentarlo. Lo que puedes hacer es poner tus pruebas que estás dispuesto a ejecutar, como nuevas pruebas que creaste y quieres enviar, puedes ponerlas en archivos separados y ejecutarlas en múltiples hilos paralelos, lo que te dará la imagen real en caso de que las estuvieras ejecutando sin aislamiento. Porque en la vida real, lo que puede suceder en caso de que estés interactuando con los mismos datos, incluso puedes ejecutarlo siempre en un solo hilo. Puedes no tener ejecución paralela. pero puedes tener múltiples PR ejecutándose en paralelo de diferentes personas y aún así tendrás interacciones con los mismos datos. En este caso, es solo un consejo, intenta ejecutar tus pruebas en paralelo entre sí para ver que están aisladas y estarás bien. Y otro último punto que quería mencionar, tenemos un comando de trampa, llamémoslo, que se llama 'reuse'. Entonces, en caso de que hayas hecho todo lo posible y no hayas podido solucionar tu inestabilidad, a veces sucede. Lo entendemos. En este caso, puedes ejecutarlo con una bandera llamada 'retries x', como 'retries' tres veces, lo que volverá a intentar tu prueba, como volver a ejecutar tu prueba hasta tres veces para ver si pasa. Entonces, en este caso, tu prueba puede pasar en el segundo intento o en el tercer intento, lo cual no es algo bueno. Pero en caso de que no tengas otras opciones y quieras que tu compilación esté correcta, hazlo. Esto es todo lo que quería decir por hoy. Compartiré mi pantalla para mostrar una diapositiva hermosa aquí. Lo que hicimos hoy es que en realidad intentamos... Aprendimos cómo se ven las pruebas de detox, aprendimos cómo encontrar un elemento, probamos diferentes medidas, acciones y expectativas. Probamos cómo trabajar con acciones específicas de la plataforma. También probamos el Detox CLI en acción. Usamos diferentes niveles de registro. Intentamos grabar capturas de pantalla y videos de nuestras pruebas. En realidad ejecutamos en paralelo y aprendimos algunos consejos sobre la inestabilidad. Así que chicos, hicimos mucho. Fueron dos horas y media largas y tenemos algo de tiempo para preguntas. Espero que también tengan algunas. Y antes de pasar a las preguntas, solo quería decir que Detox ha sido de código abierto desde el primer commit y un proyecto TDD desde el primer commit. Entonces, si estás interesado en ayudarnos a desarrollar alguna función o solucionar algunos errores que veas, o incluso formar parte de nuestro equipo, siempre eres bienvenido. Eres súper bienvenido a contribuir. Debes buscar en nuestro proyecto tickets que digan 'user looking for contributors' con esta etiqueta. Y también tenemos una guía de contribución de Detox que puedes encontrar en el enlace. Compartiré las diapositivas en el canal del taller justo después y toda la información estará allí y puedes hacer preguntas después hasta que este canal se elimine en realidad. Y ahora he terminado de hablar. Así que simplemente cambiaré a preguntas y respuestas.

Watch more workshops on topic

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
WorkshopFree
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
TestJS Summit 2022TestJS Summit 2022
20 min
Testing Web Applications with Playwright
Top Content
Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools.Let me introduce you to Playwright - Reliable end-to-end cross browser testing for modern web apps, by Microsoft and fully open source. Playwright's codegen generates tests for you in JavaScript, TypeScript, Dot Net, Java or Python. Now you really have no excuses. It's time to play your tests wright.
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!