Curso Kotlin Multiplatform #22: Screenshot Testing con Roborazzi

Описание: En esta entrega elevamos el estándar de calidad visual de nuestro proyecto. Tras haber asegurado la lógica de negocio y la cobertura de código, integramos Paparazzi, una herramienta potente para realizar Screenshot Testing. Aprenderemos a validar nuestra interfaz de usuario de forma automática, asegurando que cada componente de Compose Multiplatform se vea exactamente como esperamos en Android e iOS sin necesidad de emuladores.

NOTAS DE LA CLASE:

¿QUÉ ES EL SCREENSHOT TESTING Y POR QUÉ USAR PAPARAZZI?
El Screenshot Testing es una técnica que consiste en capturar una imagen de un componente de la UI y compararla con una imagen de referencia (Golden Image) para detectar cambios visuales inesperados. Utilizamos Paparazzi porque nos permite ejecutar estos tests directamente en la JVM mediante Robolectric, lo que resulta en una ejecución extremadamente rápida y eficiente sin la sobrecarga de un emulador o dispositivo real.

CONFIGURACIÓN DE PAPARAZZI Y ROBOLECTRIC
Aprendemos a configurar el plugin de Paparazzi en nuestro catálogo de versiones y archivos de Gradle. Explicamos por qué Robolectric es fundamental para "simular" el entorno de Android en la JVM, permitiendo que Paparazzi renderice nuestros componentes de Compose de forma precisa y veloz para generar los reportes visuales.

GENERACIÓN DE REFERENCIAS Y VALIDACIÓN
Vemos paso a paso cómo ejecutar la tarea recordPaparazzi para crear nuestras imágenes base y verifyPaparazzi para validar futuros cambios. Analizamos cómo interpretar los fallos cuando la UI cambia, permitiéndonos mantener una consistencia visual perfecta en la App de Rick & Morty a medida que el proyecto crece.

🔗 Enlaces del Proyecto:

📂 Repositorio: https://github.com/carlosgub/Rick-And...
📂 Repositorio: Roborazzi: https://github.com/takahirom/roborazzi
📂 Repositorio: Roboelectric: https://github.com/robolectric/robole...
📂 Repositorio: Composable Preview Scanner: https://github.com/sergio-sastre/Comp...
📂 Commit de esta clase: https://github.com/carlosgub/Rick-And...
▶️ Curso Completo (Playlist):    • Kotlin Multiplatform  
🧬 Rick & Morty API: https://rickandmortyapi.com/documenta...
▶️ Video de Sergio:    • Automating Screenshot Testing in Compose M...  
#Kotlin #KMP #ScreenshotTesting #Paparazzi #ComposeMultiplatform #UIUX #AndroidDev #iosdev

00:00 Introducción al UI Screenshot Testing
00:38 Robolectric + Roborazzi: configuración inicial
02:46 Agregando dependencias para Screenshot Testing
05:52 Configuración del Android Unit Test
08:34 Creando PreviewScreenshotTest paso a paso
11:49 Ejecutar tests automáticos por cada @Preview
13:07 Generando Golden Images (Baseline)
14:55 Detectando cambios visuales en Compose
17:05 Comparación de imágenes y reportes visuales
19:53 Validación visual automática en proyectos reales