Para este post, vamos a implementar las dos ultimas pruebas. Antes de comenzar, recapitulemos las reglas de negocio que definimos al inicio.
El nombre de usuario no se puede repetir
La contraseña debe de cumplir ciertas condiciones para estar ok
El correo electrónico debe tener un formato de correo valido
Es necesario un teléfono o correo electrónico, pero no ambos
El botón de registrar solo se habilita una vez que los campos nombre de usuario, password, fecha de nacimiento y teléfono o correo no son validos se hayan llenado
Iniciemos definiendo el nombre de nuestra prueba.
72: it('si se selecciona teléfono no enviar el correo electrónico', () => {
73:
74: });
El flujo de la prueba es el siguiente
El campo teléfono aparece por defecto
En caso de hacer clic en el texto “Usar un correo electrónico”, ocultar teléfono y mostrar campo de correo y viceversa
Al hacer clic en guardar, solo enviar el campo que este activo
Este error ya lo hemos visto en posts pasados, indica que no ha encontrado el elemento con la propiedad data-testid=“phone” por lo que hay que agregarlo.
Error 🥲, recordemos, los errores pueden ser aprendizajes. En este caso, la función createAccount no se esta llamando por lo que no se puede comprobar que el campo email sea undefined.
Ya que hemos entendido que sucede, veamos la solución.
Línea 6. Creamos un estado para mostrar y ocultar el campo email.
Línea 17. Solo si el campo email esta definido realiza la validación del formato del email
Línea 81..87. Creamos un estado para ocultar y mostrar el campo email, por defecto es false. Cuando ocultamos email, mostramos teléfono y viceversa.
Listo, ejecutemos la prueba.
Felicidades lo hemos logrado 🎉🎉 y como ya sabemos, ejecutemos todas las pruebas como una buena práctica.
Nooo 😭🥲 muchas de nuestras pruebas fallaron, si analizamos lo que acabamos de hacer en la última prueba, fue ocultar el campo email, debido a eso, las pruebas fallan.
Veamos la solución.
src/CreateTwitchAccount.test.js
…
20: it('crear cuenta correctamente', async () => {
…
23: await CreateTwitchAccountPageObject.fillUpUsername('Gabriel')
24: CreateTwitchAccountPageObject.fillUpPassword('Hola1234#')
25: CreateTwitchAccountPageObject.fillUpBirthdate('10-01-1990')
26: CreateTwitchAccountPageObject.showEmailField()
27: CreateTwitchAccountPageObject.fillUpEmail('hola@unsaltodelinea.com')
…
50:
51: it('si el formato del correo electrónico es incorrecto, mostrar mensaje de error ', async () => {
…
53:
54: CreateTwitchAccountPageObject.showEmailField()
55: await CreateTwitchAccountPageObject.fillUpForm()
56: CreateTwitchAccountPageObject.fillUpEmail('hola@correosinformatovalido')
57:
58: CreateTwitchAccountPageObject.submit()
59:
…
62:
63: it('si el formato de la contraseña es incorrecto, mostrar mensaje de error', async () => {
…
65:
66: CreateTwitchAccountPageObject.showEmailField()
67: await CreateTwitchAccountPageObject.fillUpForm()
68: CreateTwitchAccountPageObject.fillUpPassword('hola1234')
69:
70: CreateTwitchAccountPageObject.submit()
…
Analicemos
Línea 26. Muestra el campo email para poder llenarlo en la línea 27
Línea 54. Muestra el campo email para poder llenarlo en la línea 55
Línea 66. Muestra el campo email para poder llenarlo en la línea 67
De nuevo, ejecutemos nuestras pruebas.
Felicidades, lo hemos logrado 🙌🏼
Por último, ataquemos la última prueba.
src/CreateTwitchAccount.test.js
…
93: it('deshabilitar el botón de "Registrar" cuando los campos obligatorios no se hayan llenado', async () => {
94: wrapper()
95:
96: await CreateTwitchAccountPageObject.fillUpUsername('Gabriel')
97: CreateTwitchAccountPageObject.fillUpPassword('Hola1234#')
98: CreateTwitchAccountPageObject.fillPhone("5512039482")
99:
100: CreateTwitchAccountPageObject.submit()
101:
102: expect(screen.getByText("Guardar").disabled).toBeTruthy()
103: });
…
Analicemos
Línea 96..98. Llenamos los campos sin incluir la fecha de nacimiento
Línea 102. Se valida si el botón Guardar esta deshabilitado
Ejecutamos la prueba.
El botón “Guardar” siempre esta habilitado a menos que existan un error de usuario repetido o de formato.
Línea 59..61. Si existe un error de tipo usuario repetido o de formato, deshabilitamos botón
Línea 63..64. Si los campos obligatorios no están, deshabilitamos el botón. Ojo, esta implementación es solo a modo de prueba, ya existen soluciones de terceros
Línea 88. Ejecutamos la función en todo momento para habilitar o deshabilitar el botón
Ejecutemos la prueba.
Perfecto, ahora ejecutemos todas las pruebas.
Que bonito es lo bonito 🤩
Una vez cubiertas las reglas de negocio podemos comenzar a diseñar, refactorizar, mejorar o agregar nuevas funcionalidades. Gracias a las pruebas nuestras aplicaciones son escalables, entendibles y fáciles de probar.