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
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
Curso Testing en el Front
By mariogl
