Para este post vamos a hacer un par de pruebas para asegurar que los campos se envíen en el formato adecuado. A que me refiero con esto, veamos el ejemplo del formato de correo electrónico.

La gran mayoría de la información que el usuario ingresa lleva un formato en especifico como es el caso del correo electrónico que todos conocemos. Este tipo de casos son importantes atacarlos tanto en frontend como backend. 

src/CreateTwitchAccount.test.js

…
   53:   it('si el formato del correo electrónico es incorrecto, mostrar mensaje de error ', async () => {
   54:     const props = {
   55:       createAccount: jest.fn(),
   56:       users: jest.fn().mockResolvedValue(),
   57:     }
   58: 
   59:     render(
   60:       <CreateTwitchAccount {...props} />
   61:     )
   62: 
   63:     await act(() => {
   64:       fireEvent.change(screen.getByTestId('username'), { target: { value: 'Gabriel' } })
   65:     })
   66:     fireEvent.change(screen.getByTestId('password'), { target: { value: 'Hola1234' } })
   67:     fireEvent.change(screen.getByTestId('birthdate'), { target: { value: '10-01-1990' } })
   68:     fireEvent.change(screen.getByTestId('email'), { target: { value: 'hola@correosinformatovalido' } })
   69: 
   70:     fireEvent.submit(screen.getByText("Guardar"))
   71: 
   72:     expect(document.body.textContent).toContain("El correo electrónico tiene un formato incorrecto")
   73:   });

src/CreateTwitchAccount.js

…
   11: 
   12:   function validateValuesPreSubmit() {
   13:     const { email } = values
   14: 
   15:     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
   16:     if(!emailRegex.test(email)) {
   17:       throw new Error("El correo electrónico tiene un formato incorrecto")
   18:     }
   19:   }
   20: 
   21:   function handleSubmit(event) {
   22:     event.preventDefault()
   23: 
   24:     if(errors.length !== 0) {
   25:       return
   26:     }
   27: 
   28:     try {
   29:       validateValuesPreSubmit()
   30:       createAccount({ ...values })
   31:     } catch (e) {
   32:       setErrors([...errors, e.message])
   33:     }
   34:   }
   35: 
…

Ejecutemos nuestra prueba.

No sé nos olvide, cómo buena práctica ejecutar todas las pruebas.

Perfecto, todo va bien. Ahora agreguemos la prueba para validar el formato de una contraseña.

src/CreateTwitchAccount.test.js

…
   75:   it('si el formato de la contraseña es incorrecto, mostrar mensaje de error', async () => {
   76:     const props = {
   77:       createAccount: jest.fn(),
   78:       users: jest.fn().mockResolvedValue(),
   79:     }
   80: 
   81:     render(
   82:       <CreateTwitchAccount {...props} />
   83:     )
   84: 
   85:     await act(() => {
   86:       fireEvent.change(screen.getByTestId('username'), { target: { value: 'Gabriel' } })
   87:     })
   88:     fireEvent.change(screen.getByTestId('password'), { target: { value: 'Hola1234' } })
   89:     fireEvent.change(screen.getByTestId('birthdate'), { target: { value: '10-01-1990' } })
   90:     fireEvent.change(screen.getByTestId('email'), { target: { value: '[email protected]' } })
   91: 
   92:     fireEvent.submit(screen.getByText("Guardar"))
   93: 
   94:     expect(document.body.textContent).toContain("La contraseña tiene un formato incorrecto")
   95:   });

src/CreateTwitchAccount.js

…
   12:   function validateValuesPreSubmit() {
   13:     const { email, password } = values
   14: 
   15:     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
   16:     if(!emailRegex.test(email)) {
   17:       throw new Error("El correo electrónico tiene un formato incorrecto")
   18:     }
   19: 
   20:     const passwordRegex = /^(?!.*([A-Za-z0-9!@#$%^&*()_+=-])\1)(?!.*twitch)(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+=-])[A-Za-z\d!@#$%^&*()_+=-]{8,}$/
   21:     if(!passwordRegex.test(password)) {
   22:       throw new Error("La contraseña tiene un formato incorrecto")
   23:     }
  24:   }
…

• Mínimo 8 caracteres 
• Una letra mayúscula
• Un número 
• Un carácter especial 
• No puede incluir secuencias de caracteres repetitivas 
• No puede contener la palabra twitch

Ejecutemos la prueba.

Perfecto, lo hemos logrado. Ahora como buena práctica, ejecutemos todas.

Nooo 🙁 , analicemos que está sucediendo. El error dice que no se ha invocado la función “createAccount” y esta en lo correcto, porque la contraseña “'Hola1234“ tiene un formato incorrecto, lo que hace que entre al catch.

src/CreateTwitchAccount.js

…
   26:   function handleSubmit(event) {
   27:     event.preventDefault()
   28: 
   29:     if(errors.length !== 0) {
   30:       return
   31:     }
   32: 
   33:     try {
   34:       validateValuesPreSubmit() // Arroja error de contraseña con formato invalido
   35:       createAccount({ ...values })
   36:     } catch (e) {
   37:       setErrors([...errors, e.message]) // Aquí estamos
   38:     }
   39:   }
…

    5:   it('crear cuenta correctamente', async () => {
…
   18:     fireEvent.change(screen.getByTestId('password'), { target: { value: 'Hola1234#' } })
…
   23: 
   24:     expect(props.createAccount).toHaveBeenCalledWith({
   25:       username: "Gabriel",
   26:       password: "Hola1234#",
   27:       email: "[email protected]",
   28:       birthdate: "10-01-1990"
   29:     })
   30:   });

De nuevo, ejecutemos todas las pruebas.

🎉🎉 Felicidades, lo hemos logrado.

src/CreateTwitchAccount.test.js

    1: import {render} from "@testing-library/react";
    2: import CreateTwitchAccount from "./CreateTwitchAccount";
    3: import CreateTwitchAccountPageObject from "./CreateTwitchAccountPageObject";
    4: 
    5: describe('CreateTwitchAccount', () => {
    6:   let props
    7:   let wrapper
    8:   beforeEach(() => {
    9:     props = {
   10:       createAccount: jest.fn(),
   11:       users: jest.fn().mockResolvedValue(),
   12:     }
   13: 
   14:     wrapper = () =>
   15:       render(
   16:         <CreateTwitchAccount {...props} />
   17:       )
   18:   })
   19: 
   20:   it('crear cuenta correctamente', async () => {
   21:     wrapper()
   22: 
   23:     await CreateTwitchAccountPageObject.fillUpUsername('Gabriel')
   24:     CreateTwitchAccountPageObject.fillUpPassword('Hola1234#')
   25:     CreateTwitchAccountPageObject.fillUpBirthdate('10-01-1990')
   26:     CreateTwitchAccountPageObject.fillUpEmail('[email protected]')
   27: 
   28:     CreateTwitchAccountPageObject.submit()
   29: 
   30:     expect(props.createAccount).toHaveBeenCalledWith({
   31:       username: "Gabriel",
   32:       password: "Hola1234#",
   33:       email: "[email protected]",
   34:       birthdate: "10-01-1990"
   35:     })
   36:   });
   37: 
   38:   it('si el usuario se repite mostrar mensaje de error', async () => {
   39:     props.users.mockRejectedValue({
   40:       errors: ["El usuario Geovanni ya existe"]
   41:     })
   42: 
   43:     wrapper()
   44: 
   45:     await CreateTwitchAccountPageObject.fillUpUsername('Geovanni')
   46: 
   47:     expect(document.body.textContent).toContain("El usuario Geovanni ya existe")
   48:   });
   49: 
   50:   it('si el formato del correo electrónico es incorrecto, mostrar mensaje de error ', async () => {
   51:     wrapper()
   52: 
   53:     await CreateTwitchAccountPageObject.fillUpForm()
   54:     CreateTwitchAccountPageObject.fillUpEmail('hola@correosinformatovalido')
   55: 
   56:     CreateTwitchAccountPageObject.submit()
   57: 
   58:     expect(document.body.textContent).toContain("El correo electrónico tiene un formato incorrecto")
   59:   });
   60: 
   61:   it('si el formato de la contraseña es incorrecto, mostrar mensaje de error', async () => {
   62:     wrapper()
   63: 
   64:     await CreateTwitchAccountPageObject.fillUpForm()
   65:     CreateTwitchAccountPageObject.fillUpPassword('hola1234')
   66: 
   67:     CreateTwitchAccountPageObject.submit()
   68: 
   69:     expect(document.body.textContent).toContain("La contraseña tiene un formato incorrecto")
   70:   });
   71: });

src/CreateTwitchAccountPageObject.js

    1: import {act, fireEvent, screen} from "@testing-library/react";
    2: 
    3: class CreateTwitchAccountPageObject {
    4:   static submit() {
    5:     fireEvent.submit(screen.getByText("Guardar"))
    6:   }
    7: 
    8:   static async fillUpUsername(value) {
    9:     await act(() => {
   10:       fireEvent.change(screen.getByTestId('username'), { target: { value } })
   11:     })
   12:   }
   13: 
   14:   static fillUpPassword(value) {
   15:     fireEvent.change(screen.getByTestId('password'), { target: { value } })
   16:   }
   17: 
   18:   static fillUpBirthdate(value) {
   19:     fireEvent.change(screen.getByTestId('birthdate'), { target: { value } })
   20:   }
   21: 
   22:   static fillUpEmail(value) {
   23:     fireEvent.change(screen.getByTestId('email'), { target: { value } })
   24:   }
   25: 
   26:   static async fillUpForm() {
   27:     await this.fillUpUsername('Gabriel')
   28:     this.fillUpPassword(‘Hola1234#')
   29:     this.fillUpBirthdate('10-01-1990')
   30:     this.fillUpEmail('[email protected]')
   31:   }
   32: }
   33: 
   34: export default CreateTwitchAccountPageObject

Ya que hemos hecho este refactor, volvamos a ejecutar todas nuestras pruebas como una buena práctica.

Como se pueden dar cuenta, el tener pruebas nos permite hacer refactorización tanto del código de pruebas cómo el código de producción sin miedo a romper algo 😎.