Testeando legacy code

De e2e a unitario

React Logo
Taller Frontend

Lidiar con legacy code puede ser un verdadero reto

Y a veces bastante frustrante...

Entonces… ¿Cómo podría reducir mi frustración o mis miedos?

E2E

Creando unos tests de tipo end-to-end utilizando Cypress para crear un arnés mínimo de seguridad.

code

Refactoring

Refactorizando el código usando los refactorings automáticos del editor. Separando de lógica de presentación vs lógica de negocio..

Unit test

Tests que nos permitan validar la lógica de negocio de la aplicación, garantizando su correcto funcionamiento.

TDD

Introduciendo nuevas funcionalidades con la metodología de Desarrollo Guiado por Pruebas (TDD).

Contenido

Más de 2 horas de formación en video

1. El primer contacto...

Una breve introducción al taller.

  • Presentación del taller.
  • Presentación del producto y explicación requisitos de producto

2. ¿Qué legacy tengo?

Teoría sobre legacy code y un free tour al proyecto.

  • ¿Qué es legacy code?
  • Descargando y arrancando el proyecto.
  • Entendiendo el código de checkout.

3. De manual a automático

Cómo actualizar tareas manuales con Cypress a través de extensiones del navegador.

  • ¿Qué es un test e2e? Instalando y configurando Cypress.
  • De pasos manuales a automático. Grabando nuestro tests e2e.
  • ¿Qué es snapshot testing? Instalando y configurando cypress-image-diff
  • Creando nuestros primeros test con snapshots testing
  • Problemas de los snapshot testing

4. Un cambio a mejor

Refactoring automáticos.

  • Lógica de presentación vs lógica de negocio.
  • Separando lógica de negocio de la lógica de presentación

5. Feedback rápidos

¿He roto el código? Obtener feedback rápidos gracias a los tests unitarios.

  • ¿Qué es un test unitario? F.I.R.S.T.
  • Añadir tests a la lógica de negocio.
  • Refactoring en la lógica de negocio.
  • Refactoring en los tests: tests parametrizados.

6. Añadir funcionalidad

Cómo implementar la funcionalidad de descuentos con TDD.

  • ¿Qué es TDD?
  • Implementar descuento en cart page con TDD.
  • Implementar descuento en payment page con TDD.

7. Time to say goodbye

Lo bueno siempre tiene un final.

  • ¿Y si volvemos al pasado para repasar lo que hemos vivido juntos?