Testing while developing: una nueva forma de testear en frontend

En este vídeo, Kevin Martínez, arquitecto de software en Orbitant, presenta un nuevo enfoque para el testing frontend: testear mientras desarrollas (Testing While Developing). Esta metodología propone integrar las pruebas directamente en el proceso de desarrollo, en lugar de tratarlas como una tarea separada o posterior. Kevin explica cómo el testing actual en frontend (con herramientas como Cypress, Playwright o Testing Library) genera fricción al separar desarrollo y pruebas, y presenta TWD.js, la herramienta que él mismo ha desarrollado para implementar este enfoque. TWD.js combina la potencia de selectores de Testing Library con feedback visual en el navegador, ejecutándose directamente en tu entorno de desarrollo sin navegadores externos. La propuesta cambia el paradigma habitual: en lugar de "desarrollo ➡️ testing" o "Test-Driven Development (TDD) ➡️ desarrollo", este enfoque plantea hacer ambos simultáneamente, automatizando las pruebas manuales en tiempo real mientras construyes tu aplicación. ℹ️ En esta sesión descubrirás: - Por qué el testing frontend actual genera fricción y cómo TWD.js lo soluciona - La filosofía Testing While Developing (TWD): testear y desarrollar como un único proceso - Demo en vivo: añadir features testeadas desde el minuto uno sin levantar backend - Ejecución en CI/CD y generación de coverage reports - Casos de uso reales 🔗 Recursos mencionados: - Principios TWD 🔗 https://kevinccbsg.github.io/twd-principles/ - Documentación oficial TWD.js 🔗 https://brikev.github.io/twd/ - Repositorio GitHub 🔗 https://github.com/BRIKEV/twd Visita nuestra web y suscríbete a nuestra newsletter para acceder a nuestras sesiones de Knowledge Sharing 🔗 https://orbitant.com/ ________________________________________________ ENGLISH DESCRIPTION Testing While Developing: A New Way to Test Frontend Apps Frontend testing doesn't have to be separate from development. Join Kevin Martínez (Software Architect at Orbitant) as he introduces TWD.js, a revolutionary approach to testing web applications by integrating tests directly into your development workflow. In this session, Kevin presents TWD.js (Testing While Developing), a new tool that combines the best of Cypress, Playwright, and Testing Library to deliver a fully integrated testing experience right in your browser—no friction, no context switching. You'll learn a methodology that shifts the paradigm: instead of "develop ➡️ test" or "TDD ➡️ develop," discover how to do both simultaneously, automating your manual tests in real-time as you build your application. ℹ️ In this session you'll discover: - Why current frontend testing creates friction and how TWD.js solves it - The Testing While Developing philosophy: testing and developing as one unified process - Live demo: adding tested features from minute one without backend setup - CI/CD execution and coverage report generation - Real-world use cases 🔗 Resources mentioned: - TWD Principles 🔗 https://kevinccbsg.github.io/twd-principles/ - Official TWD.js Documentation 🔗 https://brikev.github.io/twd/ - GitHub Repository 🔗 https://github.com/BRIKEV/twd Visit our website and subscribe to our newsletter to access our Knowledge Sharing sessions 🔗 https://orbitant.com/en ________________________________________________ TIMESTAMPS (EN/ES): 00:00 Intro / Introducción 01:30 Testing frustration / Frustración con el testing 03:00 What is TWD / Qué es TWD 05:00 Mindset change / Cambio de mentalidad 06:30 Automating tests / Automatización de tests 07:30 Tool comparison / Comparativa de herramientas 09:15 Friction points / Puntos de fricción 10:45 twd.js overview / Presentación de twd.js 11:45 Interactive Sidebar / Sidebar interactiva 12:30 Setup: Vite & SW / Instalación: Vite y SW 13:45 Frameworks support / Compatibilidad de frameworks 15:00 Test structure / Estructura de un test 16:15 Commands & assertions / Comandos y aserciones 17:30 Running & debugging / Ejecución y debugging 19:00 Frontend isolation / Aislamiento del frontend 20:30 Demo: states & errors / Demo: estados y errores 23:30 Test coverage & CI / Cobertura y CI 25:30 API contracts & UI / Contratos API y UI 28:30 Development without blocks / Desarrollo sin bloqueos 30:00 Test lifecycle / Ciclo de vida de tests 32:30 Feature implementation / Implementación de feature 34:00 Accessibility improvements / Mejora de accesibilidad 36:30 API & business logic / Validación API y lógica 38:30 Interactive vs manual / Flujo interactivo vs manual 40:00 Daily workflow comparison / Día a día vs TWD 41:45 Next.js, Astro, Remix / Soporte frameworks & limitaciones 43:30 Coverage reports & closing / Reportes y cierre