¿Qué aprenderás en esta sección?0:58
El repositorio y configuración inicial3:33
Tips para la estructura de la app en React JS3:20
Primer ciclo RED - GREEN - REFACTOR para Login page6:19
Commit id: https://github.com/Developero-oficial/react-tdd/commit/272ec218be3b8e00066585045e72ee89ac64ca00
Desarrollo inicial del formulario de Login (UI)5:05
Commit id: https://github.com/Developero-oficial/react-tdd/commit/20613afe6703a2e95e1026a9cff4e99f7f0c9e5e
Fase RED para validación de inputs requeridos para Login4:08
Git commit: https://github.com/Developero-oficial/react-tdd/commit/1eb8cc2b9d73ffb335c9cd535ad537c8d8c40a2e
FASE GREEN para validación de inputs requeridos en formulario de Login9:24
Git commit: https://github.com/Developero-oficial/react-tdd/commit/d314cb541a8fa73106c17f01ebf408399643c7e3
Refactor de login de formulario con react-hook-form8:26
Git commit: https://github.com/Developero-oficial/react-tdd/commit/2b7046c18810a84eb44fe811ddc79ead928c8336
Refactor agregando yup para mejorar el formulario7:03
Git commit: https://github.com/Developero-oficial/react-tdd/commit/8a58f0a2b13e9f0c226244fa115ae3c7c7ac065e
Aplicar validación del email4:20
Configurar Mock Service Worker0:23
Agregar Test de estado de loading al hacer submit al login (RED phase)2:46
Solución Estado de loading al hacer submit al login (GREEN phase) Y CORRECIONES13:22
https://github.com/Developero-oficial/react-tdd/commit/84b6df90130dd906c3cfa2ea01ded1c6f9aa2890
Refactor Tests de Login1:12
Script npm para instalar las últimas dependencias de testing library.

npm install @testing-library/user-event@latest @testing-library/react@latest @testing-library/jest-dom@latest
Refactor implementación de Login20:45
Agregar indicador de Loading para Login9:35
Mostrar mensaje de error inesperado al hacer login7:39
Validar mensaje de credenciales inválidas al hacer login12:37
Crear tests para App.ts y hacer import de Login page5:53
Refactor de la UI de Login6:18
Integrar Login con el BE real8:41
NUEVOS VÍDEOS EN PROGRESO...0:11

Instrucciones del setup del proyecto0:29
User story y criterios de aceptación que implementaremos3:17
Primer test para validar que exista la página del formulario7:35
Validar que existan inputs del formulario9:32
Validar que exista el botón submit en el formulario2:07
Hacer validaciones de inputs requeridos al hacer submit13:36
Validar inputs requeridos en evento blur8:51
Mock service worker3:30
Test para deshabilitar y habilitar el botón de submit mientras se hace fetch9:24
Refactor de validaciones de formulario y tests7:15
Refactor de fetch5:40
Implementar mensaje de submit exitoso y limpiar formulario7:54
Complementar submit exitoso enviando datos del formulario8:33
Validar que el formulario se limpia después de submit exitoso3:52
Manejar error de Unexpected Error (500)5:07
Manejar error de Invalid Request (400)8:13
Manejar error de conexión3:48
Estilizar la UI del formulario8:07
Conclusiones y consejos para aplicar TDD a formularios en tus proyectos1:21

Instrucciones del setup del proyecto0:29
User story y criterios de aceptación1:27
Test para validar que exista la página de Github repos7:26
Instalar material ui y exportar componente a App.js3:15
Validar que exista el input para filtrar4:46
Validar que exista search button1:59
Estilizar la estructura de la UI de los filtros5:18
Implementar mensaje de estado inicial de la app4:14
Deshabilitar el botón de search hasta que la búsqueda termine7:23
Validar que exista la tabla5:28
Implementar cabeceras de la tabla10:59
Test inicial sobre contenido de la tabla (Fake it)6:49
Validar imagen del repo como contenido de la tabla3:05
Agregar link en nombre del repositorio y arreglar la ubicación de la imagen6:34
Estilizar la UI de la tabla5:36
Extraer componente para contenido en GithubSearchPage (refactor)7:19
Mostrar total de resultados de la búsqueda (fake it)7:46
Validar que exista select rows per page con opciones10:09
Validar que existan los botones de previous y next page4:18
Sobre la API de Github (cómo ses consume)2:28
Test case para tabla con filtrado de elementos2:19
Intro a Mock server con MSW2:38
Configurar mock service worker en nuestro test6:51
Consumir endpoint de API y hacer test más resiliente al cambio16:56
Test para escenario de búsqueda sin resultados10:14
Refactor de tests con fixtures y mejoras en render de mensajes13:31
Refactor para desacoplar llamada a fetch6:03
Implementar feature de "filtrar por"14:11
Test de funcionalidad rows per page (RED)13:49
Actualizar valor de rows per page (RED - GREEN)5:54
Implementar búsqueda cuando se actualiza rows per page7:41
Finalizar rows per page feature (GREEN)5:15
Refactor rows per page test5:42
Refactor de implementación aplicando composición de componentes15:39
Cómo reparar bugs con TDD - bug en search input change5:18
Actualizar tabla a sticky header3:09
Primera parte de test para next page (RED)8:52
Terminar test de next page (RED a GREEN)8:23
Hacer que todos los tests pasen (total count)5:10
Test para previous page4:21
Unit test de ErrorBoundary con TDD10:45
Integrar ErrorBoundary en la app6:17
Test para mostrar mensaje de error de llamada a api (RED)7:58
Implementar mensaje de error en llamada a api (GREEN)7:42
Agregar test parar error 500 en api y refactor11:06
Reestructurar tests5:28
Test para cubrir integración entre paginación y rows per page combinados8:14
Test para cubrir integración entre paginación y click en search combinados6:46
Conclusiones sobre esta sección y cómo aplicarlo en tu proyecto2:09

Instrucciones del setup del proyecto0:29
Historias de usuario sobre Autenticación y Autorización2:39
Estructura del proyecto y primer test de login8:22
Test para elementos del formulario de login6:47
Test para campos requeridos en el login9:38
Test para no mostrar mensajes de campos requeridos en caso de haber valores6:50
Test para validar valor del email11:45
Test para remover mensaje de validación para email5:37
Test para validar password15:43
Remover mensaje de validación para password3:27
Instalar mock service worker3:08
Configurar mock handler para login6:08
Test para hacer disable al botón de Send mientras hace fetching14:34
Implementar loading indicator8:30
Refactor de handleSubmit del login9:45
Refactor de fetch y validaciones5:42
Test para unexpected error (RED)6:15
Implementar mostrar mensaje de error (GREEN)6:48
Refactor de test unexpected error5:12
Test para invalid credentials (RED)7:50
Implementar mostrar mensaje de credenciales inválidas (GREEN)2:48
Refactor de test para invalid credentials8:04
Actualizar UI del login (Refactor)10:40
Configurar MSW en la app en entorno de desarrollo6:09
Setup inicial de react router dom para trabajar con tests usando navegación4:48
Test para proteger página de admin redirigiendo a login (RED)5:35
Implementar lógica para proteger rutas (GREEN)6:27
Refactor de app router test e implementación8:16
Implementación inicial de acceso a páginas privadas (REED a GREEN)3:45
Refactor app router6:25
Test para pasar de login a admin page (RED)7:49
Agregar redirect de login a admin page (RED aún)8:20
Completar redirect a admin page (GREEN)8:46
Agregar auth context para remover props (Refactor)6:23
Actualizar tests de login page para usar auth context provider7:57
Usar auth context en private route para eliminar el paso de isAuth por props2:42
Desacoplar lógica de autenticación creando componente AuthGuard6:19
Actualizar tests de app router9:18
Refactor de tests de app router y login page2:46
Iniciar test para renderizar username de admin (RED)4:45
Relocalizar variable de estado user a AuthGuard component (RED aún)6:11
Mostrar username de admin en admin page (GREEN)3:41
Test para validar acceso como admin a botón de eliminar (RED)4:33
Refactor de la UI de admin page4:57
Integrar funcionalidad de mostrar nombre de usuario (GREEN)5:01
Agregar acceso a página de empleado (GREEN)3:52
Mostrar botón de eliminar a usuario admin solamente (GREEN)3:44
Refactor de tests de página de empleado3:01
Refactor de UI de página de empleado3:01
Arreglar test admin page con router1:14
Redirigir a usuario empleado a página de empleado después de login (RED- GREEN)4:19
Refactor de valores de email de usuarios y utilidades5:31
Test para tener acceso a página de empleado como admin (RED)3:02
Mostrar nombre de usuario en página de empleado (RED a GREEN)2:46
Refactor de nombre de usuario en página de empleado3:21
Refactor de navbar aplicando composición7:34
Test para prohibir acceso a página de admin siendo empleado (RED)4:43
Permitir acceso a páginas por role (GREEN y refactor)11:31

Requirements

Conocimientos de programación y desarrollo web (HTML5, CSS, Javascript)
Conocimiento de ES6 es elemental
Experiencia creando aplicaciones con React JS y Hooks (NO SE ENSEÑA REACT NI HOOKS DESDE CERO)
Experiencia haciendo unit tests con jest en react

Description

En este curso vamos a aplicar Test Driven Development (TDD) como técnica de desarrollo aplicando fuertemente el flujo normal de:

Crear un test que falle (RED).
Hacer lo mínimo necesario para que pase el test (GREEN).
Aplicar code clean y otras buenas prácticas (REFACTOR).

Los tipos de Tests que hacemos en este curso de manera intensa son:

Unit Tests
Integration Tests

Lo aplicaremos en algunas de las necesidades más típicas de una aplicación:

En un formulario con llamada a una api.
Un listado de datos con filtros y paginación consumiendo una api.
Manejo de autenticación y autorización.
Crear un proyecto de User Management

Nota: este curso requiere que ya tengas experiencia con React y Jest. No tomes este curso si no tienes experiencia en estas tecnologías.

En este curso vamos a aplicar Test Driven Development (TDD) como técnica de desarrollo aplicando fuertemente el flujo normal de:

Crear un test que falle (RED).
Hacer lo mínimo necesario para que pase el test (GREEN).
Aplicar code clean y otras buenas prácticas (REFACTOR).

Los tipos de Tests que hacemos en este curso de manera intensa son:

Unit Tests
Integration Tests

Lo aplicaremos en algunas de las necesidades más típicas de una aplicación:

En un formulario con llamada a una api.
Un listado de datos con filtros y paginación consumiendo una api.
Manejo de autenticación y autorización.
Crear un proyecto de User Management

Nota: este curso requiere que ya tengas experiencia con React y Jest. No tomes este curso si no tienes experiencia en estas tecnologías.

Who this course is for:

Desarrolladores de React principiantes con interés por subir a un nivel intermedio - avanzado.

Test Driven Development (TDD) en React JS (Jest, RTL, MSW).

What you'll learn

Explore related topics

Course content

Introducción a Test Driven Development (TDD)3 lectures • 6min

Introducción a Jest8 lectures • 1hr 7min

Introducción a React Testing Library4 lectures • 30min

TDD en una aplicación de User Management Desde Cero22 lectures • 2hr 22min

TDD en un formulario con llamada a API19 lectures • 1hr 58min

TDD en una app de búsqueda con filtro y paginado49 lectures • 5hr 35min

TDD aplicado a autenticación y autorización58 lectures • 5hr 55min

Despedida del curso2 lectures • 1min

Requirements

Description

Who this course is for: