Testing en el Front

Fundamentos de TypeScript

Testing en el Front

Fundamentos de TypeScript

Testing en el Front

Mario González

Developer desde 2001

Formador desde 2017

https://www.linkedin.com/in/mariogl/

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

¿Qué es testear?

Fundamentos de TypeScript

Introducción a la Programación Web

Testear:

Probar que lo que hemos construido funciona bien

Verificar que el comportamiento de lo que hemos construido es el esperado

Testing en el Front

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

¿Qué es una User Interface?

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

La User Interface es la parte de nuestra aplicación con la que interactúan los usuarios

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

La User Interface es la parte de nuestra aplicación con la que interactúan los usuarios

La User Interface es la parte de nuestra aplicación con la que interactúan TODOS los usuarios

a11y

accessibility

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

¿Para qué testeamos?

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

CONFIANZA

Si algo no hace lo que se espera que haga,

los tests avisarán

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tests que no aportan confianza

- Tests frágiles (brittle tests)

- Tests inestables (flaky tests)

- Tests que comprueban muchas cosas

- Tests redundantes

- Tests que comprueban lo trivial

- Falsos positivos

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tests que no aportan confianza

- Tests frágiles (brittle tests)

Cuando el usuario hace clic en el segundo botón, le lleva al carrito de la compra

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tests que no aportan confianza

- Tests inestables (flaky tests)

Cuando se invoca la función getRandomNumber, el número devuelto es menor a 10

Cuando se accede a la app, el usuario está desconectado

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tests que no aportan confianza

- Tests que comprueban muchas cosas

Al completar el formulario y pulsar "comprar", debería validar todos los campos, mostrar un resumen del pedido, cobrar al usuario, vaciar el carrito, redirigir a la pantalla de gracias

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tests que no aportan confianza

- Tests redundantes

Al pasarle un 3 y un 6 a la función multiplyNumbers, ésta me devuelve un 18

Al pasarle un 2 y un 8 a la función multiplyNumbers, ésta me devuelve un 16

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tests que no aportan confianza

- Falsos positivos

Espero que la clase de este elemento sea "customer-active"

Espero que la función addNumbers me devuelva un número

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Behaviour Driven Development

BDD

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

BDD

  • Testeamos comportamiento
  • No testeamos implementación
  • Los tests sirven como documentación

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

BDD

  • Given
  • When
  • Then

Sintaxis Gherkin

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

BDD

  • Given a user has entered valid email and password
  • When they click the button "Sign in"
  • Then the app should show the dashboard

Sintaxis Gherkin

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

BDD

  • Given a user leaves the "Name" field empty
  • When they try to submit the form
  • Then a message should appear indicating that the field is required

Sintaxis Gherkin

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

BDD

  • Given the number 4
  • When the isEven function is called
  • Then it should return true

Sintaxis Gherkin

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

BDD

  • Given the number 12.5
  • When the formatPrice function is called
  • Then it should return "$12.50"

Sintaxis Gherkin

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Tipos de tests

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Test unitario

Al aplicar presión de gas,

la longitud del pistón aumenta 20cm

1. Mido la longitud del pistón

2. Aplico presión de gas

3. Mido la longitud del pistón

4. Espero que la longitud del pistón sea 20cm mayor que la inicial

spec

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Test de integración

Al accionar la palanca, el asiento sube 18cm

1. Mido la distancia del asiento al suelo

2. Tiro de la palanca

3. Mido la distancia del asiento al suelo

4. Espero que la distancia del asiento al suelo sea 18cm mayor que la inicial

spec

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Test end to end

Un usuario de 80kg se sienta, acciona la palanca y sube 15cm

1. Mido la altura de los ojos

2. El usuario tira de la palanca

3. Mido la altura de los ojos

4. Espero que la altura de los ojos sea 15cm mayor que la inicial

spec

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Test manual

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Kent C. Dodds

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Kent C. Dodds

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Estructura de un test

la longitud del pistón es 5cm

cuando le meto presión con gas durante dos segundos

espero que la longitud del pistón sea 25

1

2

3

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Estructura de un test

tengo un 3 y un 5

cuando invoco a la función addTwoNumbers pasándole esos dos valores

espero que me devuelva un 8

1

2

3

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Estructura de un test

cuando invoco a la función addTwoNumbers pasándole esos dos valores

espero que me devuelva un 8

1

2

3

Arrange

}

Act

}

Assert

}

A

A

A

tengo un 3 y un 5

Given

When

Then

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Estructura de un test

const number1 = 3;
const number2 = 5;

const sum = addTwoNumbers(number1, number2);

if (sum === 8) {
  console.log('✅ Test passes')
} else {
  console.error('❌ Test fails')
}
// Arrange
const number1 = 3;
const number2 = 5;

// Act
const sum = addTwoNumbers(number1, number2);

// Assert
if (sum === 8) {
  console.log('✅ Test passes')
} else {
  console.error('❌ Test fails')
}

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Estructura de un test

const number1 = 3;
const number2 = 5;

const sum = addTwoNumbers(number1, number2);

expect(sum).toBe(8);
// Arrange
const number1 = 3;
const number2 = 5;

// Act
const sum = addTwoNumbers(number1, number2);

// Assert
expect(sum).toBe(8);

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Frameworks de testing

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Testear la UI

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Testear la UI

Test de componente

Test E2E

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Test de componente

¿Cuál es el comportamiento esperado de un componente?

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Test de componente

Mostrarle datos

al usuario

Recibir órdenes del usuario

comportamiento esperado de un componente:

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Mostrarle datos

al usuario

Cuando el componente Price recibe un 12, debería mostrar el texto "12.00€"

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Mostrarle datos

al usuario

Cuando el componente StatusBadge recibe un status true, debería mostrar el texto "active"

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Mostrarle datos

al usuario

Cuando el componente ServiceCard recibe el servicio de envío gratuito, debería mostrar "Free Shipping" en un encabezado

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Mostrarle datos

al usuario

Cuando el componente ServiceCard recibe el servicio "Free Shipping", debería mostrar el texto "Price: 0.00€"

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Recibir órdenes del usuario

Cuando el componente Switch recibe un status "off" y el usuario hace clic en el switch, se debería mostrar el texto "ON"

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Recibir órdenes del usuario

Cuando el componente CreateCustomer se renderiza y el usuario hace clic en el botón "create", aparece un texto "Customer created successfully"

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Recibir órdenes del usuario

Cuando el componente Counter está mostrando un 0 y el usuario hace clic en el botón "+", debería mostrar un 1

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

a11y

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

interfaces de usuario accesibles

 
para todo el mundo

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

  • Jerarquía de encabezados
  • Descripciones textuales
  • Textos alternativos
  • Elementos interactivos
  • Navegación por teclado

Accesibilidad que podemos testear:

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Jerarquía de encabezados

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Descripciones textuales

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Textos alternativos

Un gato naranja recostado plácidamente en una hamaca junto al mar, con una copa de daiquiri entre las patas, bajo un cielo despejado y frente a una playa de arena blanca.

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Elementos interactivos

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Navegación por teclado

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

tests que no testean el comportamiento

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

tests que no testean el comportamiento

cuando se renderiza el componente ServiceCard, el precio antiguo debería aparecer en rojo

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

tests que no testean el comportamiento

cuando se renderiza el componente ContactForm y el usuario rellena el tercer campo, el botón con clase "submit" debería activarse

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

tests que no testean el comportamiento

cuando se renderiza el componente ContactPage, debería mostrarse "Contáctanos" en negrita

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

tests que no testean el comportamiento

cuando se renderiza el componente Navigation y el usuario está en la home, el link "Home" debería aparecer subrayado

Fundamentos de TypeScript

Introducción a la Programación Web

Testing en el Front

Testing Library