ng test recorder

Graba interacciones reales en apps Angular y genera tests de Jest deterministas que las reproducen fielmente.

🎬 Usa tu app. Obtén un test de Jest. Sin escribir código. ng test recorder graba lo que haces en tu aplicación Angular —clics, teclado, navegación, llamadas al backend— y lo convierte en un test de Jest que lo reproduce exactamente igual, una y otra vez. Se acabó escribir mocks a mano, perseguir selectores y pelearte con la asincronía: si lo has hecho una vez en el navegador, ya tienes el test. ━━━━━━━━━━━━━━━━━━━━ ⚡ EN 4 PASOS ━━━━━━━━━━━━━━━━━━━━ 1️⃣ Abre tu app (ng serve), pulsa el icono y ponle nombre al test. 2️⃣ Pulsa Grabar y úsala con normalidad. 3️⃣ Detén la grabación y haz clic en lo que quieres comprobar: un texto, un valor, un atributo… o cualquier propiedad de un componente Angular. 4️⃣ Descarga el JSON. Un único lanzador de Jest ejecuta todas tus grabaciones. ━━━━━━━━━━━━━━━━━━━━ ✅ TESTS QUE NO FALLAN AL AZAR ━━━━━━━━━━━━━━━━━━━━ • El backend se sustituye por las respuestas grabadas: el test funciona sin servidor, sin red y sin datos de prueba. • Reloj virtual: temporizadores, fechas y números aleatorios valen exactamente lo mismo que al grabar. Adiós a los tests intermitentes. • En cada paso se compara la pantalla con la grabada, así que cualquier cambio de comportamiento salta al momento y te dice dónde. • Se graba desde la carga de la página: XHR, fetch, WebSocket, EventSource, iframes e inicio de sesión con Keycloak u otro SSO. • Grabaciones compactas: lo que se repite se guarda una sola vez, así que incluso en apps grandes el test ocupa poco y se genera sin bloquear el navegador. ━━━━━━━━━━━━━━━━━━━━ 🧩 MODO COMPONENTE PARA APPS GRANDES ━━━━━━━━━━━━━━━━━━━━ Elige un solo componente (un buscador, un formulario…) y el test lo monta aislado, con sus hijos reales, sin arrancar la app: sus servicios, los cambios en sus @Input y los eventos que le llegan de microfrontends o web components se reproducen tal y como se grabaron. Ideal para apps con librerías propias, configuración de arranque o microfrontends cargados en caliente. Incluye un diagnóstico que te dice si tu app es compatible. Para elegirlo, señálalo en la página: si otro lo tapa, Mayús+rueda o las flechas pasan a la capa de detrás, y puedes limitar la selección por etiqueta. Reconoce los microfrontends de Module Federation (también los componentes que se crean al vuelo) y, si el test necesita su código, te dice exactamente qué configurar. ━━━━━━━━━━━━━━━━━━━━ ▶️ REPRODUCTOR INTEGRADO ━━━━━━━━━━━━━━━━━━━━ Carga cualquier test y míralo reproducirse en el navegador: el cursor se mueve, las teclas aparecen y cada comprobación se marca en verde o en rojo. Ideal para entender un test que falla o para enseñárselo a tu equipo. ━━━━━━━━━━━━━━━━━━━━ 👥 PENSADA PARA ━━━━━━━━━━━━━━━━━━━━ • Equipos Angular que quieren más cobertura sin dedicar horas a escribir tests. • QA que necesita convertir pruebas manuales en tests automáticos. • Reproducir un bug una vez y blindarlo para siempre con un test de regresión. ━━━━━━━━━━━━━━━━━━━━ 🔒 TUS DATOS NO SALEN DE TU EQUIPO ━━━━━━━━━━━━━━━━━━━━ Sin servidores, sin analítica, sin cuentas. Todo ocurre en tu navegador y la grabación solo sale de él cuando tú descargas el JSON. El acceso a las páginas se pide la primera vez que grabas y puedes retirarlo cuando quieras. 📋 Requisitos: Angular 15 o superior servido en modo desarrollo (ng serve) y Jest con jest-preset-angular. 🌍 Disponible en español, inglés, francés, italiano, alemán, chino y japonés. ⌨️ Atajo: Alt+Shift+R abre el panel y detiene la grabación.