Publicación: 6 months

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

  1. El campo teléfono aparece por defecto
  2. En caso de hacer clic en el texto “Usar un correo electrónico”, ocultar teléfono y mostrar campo de correo y viceversa
  3. Al hacer clic en guardar, solo enviar el campo que este activo

Veamos la implementación.

src/CreateTwitchAccount.test.js

…
   72:   it('si se selecciona teléfono no enviar el correo electrónico', async () => {
   73:     wrapper()
   74: 
   75:     await CreateTwitchAccountPageObject.fillUpUsername('Gabriel')
   76:     CreateTwitchAccountPageObject.fillUpPassword('Hola1234#')
   77:     CreateTwitchAccountPageObject.fillUpBirthdate('10-01-1990')
   78:     CreateTwitchAccountPageObject.fillPhone("5512039482")
   79: 
   80:     CreateTwitchAccountPageObject.submit()
   81: 
   82:     expect(props.createAccount).toHaveBeenCalledWith(expect.not.objectContaining({
   83:       email: undefined
   84:     }))
   85:     expect(props.createAccount).toHaveBeenCalledWith(expect.objectContaining({
   86:       phone: '5512039482'
   87:     }))
   88:   });

Analicemos.

Línea 75..78. Llenamos el campo nombre de usuario, contraseña, fecha de nacimiento y teléfono
Línea 80. Enviamos el formulario
Línea 82..84. Validamos que el createAccount no contiene el campo email
Línea 85..87. Validamos que el createAccount viene el campo phone

Agregamos una función para llenar campo teléfono en nuestro PageObject.

src/CreateTwitchAccountPageObject.js

…
   33:   static fillPhone(value) {
   34:     fireEvent.change(screen.getByTestId('phone'), { target: { value } })
   35:   }

Ejecutemos la prueba.

No se encuentra el campo phone


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.

src/CreateTwitchAccount.js

…
   66:       <input type="text" name="phone"
   67:              data-testid="phone" placeholder="Télefono" onChange={onChange}/>
…
  69:     </form>

Ejecutemos la prueba.

Error, la función createAccount no se ha invocado


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.

src/CreateTwitchAccount.js

…
    6:   const [showEmail, setShowEmail] = useState(false)
…
   13:   function validateValuesPreSubmit() {
   14:     const { email, password } = values
   15: 
   16:     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
   17:     if(email && !emailRegex.test(email)) {
   18:       throw new Error("El correo electrónico tiene un formato incorrecto")
   19:     }
…
   54:   return(
   55:     <form onSubmit={handleSubmit}>
…
   81:       {
   82:         showEmail ?
   83:           <input type="text" name="email"
   84:                  data-testid="email" placeholder="Correo electrónico" onChange={onChange}/> :
   85:           <input type="text" name="phone"
   86:                  data-testid="phone" placeholder="Télefono" onChange={onChange}/>
   87:       }
…

Analicemos

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.

Prueba exitosa, si se selecciona teléfono no enviar el correo


Felicidades lo hemos logrado 🎉🎉 y como ya sabemos, ejecutemos todas las pruebas como una buena práctica.

Error, no se encuentra el campo email


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.

Pruebas exitosas

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.

Error, el botón guardar no esta deshabilitado


El botón “Guardar” siempre esta habilitado a menos que existan un error de usuario repetido o de formato.

Implementemos la solución.

src/CreateTwitchAccount.js

…
   58:   function handleDisabledSaveButton() {
   59:     if(errors.length !== 0) {
   60:       return true
   61:     }
   62:    
   63:     const requiredFields = ["username", "password", "birthdate", "phone", "email"]
   64:     return requiredFields.filter(field => !values[field]).length !== 1
   65:   }
…
   88:       <button type="submit" disabled={handleDisabledSaveButton()}>Guardar</button>
   89:     </form>
…

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.

Prueba exitosa, deshabilitar el botón de "Registrar"


Perfecto, ahora ejecutemos todas las pruebas.

Todas las pruebas son exitosas


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.