Por que você deveria começar a testar sua aplicação no Front-End?

Mas para que servem os testes?

Imagine que você está fazendo um bolo de chocolate e só depois dele ter ficado pronto você percebe que esqueceu de colocar açúcar na massa, e agora?! Pense na sua aplicação como essa massa de bolo, sem testes ele pode até funcionar bem de primeira, mas em algum momento enquanto ela estiver sendo experimentada algo pode não sair como esperado. E quem é que garante que esse perrengue não acontecerá?!

Baseado nesse exemplo, os testes são a prova da massa do seu código, eles garantem que tudo fique no ponto certo, mesmo quando você decide adicionar novas camadas ou coberturas de funcionalidades.

Em linhas gerais, testes automatizados são basicamente códigos construídos para testarem outros códigos, garantindo que a aplicação funcione com qualidade.
Já que qualidade é a palavra chave, é importante que dentro de um time de engenharia e produtos todos estejam cientes da importância e do valor que os testes geram, para assim, serem integrados nas entregas de forma natural.

Por que devo testar?

Trago aqui então alguns motivos para te convencer a começar agora mesmo a implementar os testes no seu código:

Código à prova de falhas: Os testes ajudam a garantir que seu código funcionará sem bugs, mesmo depois de incluir novas funcionalidades ou fazer mudanças.

Mudanças sem medo: A manutenção da aplicação será muito mais segura pois você vai poder refatorar ou atualizar seu código sem a preocupação de quebrar algo já que os testes te avisam se algo estiver errado.

Correções mais rápidas: Com os testes automatizados você vai conseguir corrigir os problemas com mais facilidade economizando bem mais o seu tempo

Menos surpresas no deploy: Já imaginou ter acabado de fazer o deploy e já receber algum chamado dos usuários tendo erro em algo que poderia ter sido previsto?! Os testes vem para ajudar justamente nessa prevenção

Ajudando você e o coleguinha do QA: Sabe quando você finaliza aquela feature e passa para o QA testar e ele te devolve um relatório com 357 coisas para corrigir? Esse problema vai ser reduzido também visto que você vai ter previsto grande parte dos erros que provavelmente ele encontraria

Quais são os tipos de testes?

Existem muitos tipos de testes a serem desenvolvidos no front-end, mas hoje vou focar em três deles que são: Testes de Interface de Usuário (UI), Testes Funcionais (End-to-End) e Testes de Validação e para exemplificar cada um deles vou criar os testes para uma simples tela de login em uma aplicação em React.js usando Testing Library.

Testes de Interface de Usuário (UI)

Os Testes de Interface de Usuário (UI) verificam se os componentes estão sendo renderizados conforme o esperado e além de serem baseados na renderização verificam a existência de elementos importantes, como campos de formulário, botões e labels.

it('should render login form', () => {
  render(<LoginForm  />);
  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
});

O que está sendo testado: Este teste garante que o componente LoginForm renderize os elementos essenciais da interface: os campos de e-mail e senha e o botão de login. O screen.getByLabelText busca os elementos pelos labels associados e o screen.getByRole busca o botão pelo seu texto e função.

Testes Funcionais (End-to-End)

Os Testes Funcionais ou testes End-to-End (E2E), verificam todo o funcionamento da aplicação do ponto de vista do usuário simulando interações reais com a interface, como preenchimento de formulários e os cliques em botões, e avaliam se a aplicação responde às interações como esperado.

it('should call onLogin with the username and password when submitted', async () => {
  const handleLogin = jest.fn();
  render(<LoginForm onLogin={handleLogin} />);

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: '[e-mail]' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: '[e-mail]',
      password: '123456'
    })
  })

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledTimes(1)
  })

});

O que está sendo testado: Aqui é feita a simulação da interação do usuário com o formulário de login preenchendo os campos de email e senha, e depois clicando no botão de login. O teste também verifica se a função onLogin é chamada com os dados corretos e se foi chamada exatamente uma vez.

Testes de Validação

Os Testes de Validação garantem que a aplicação faça a validação das entradas inválidas e exiba mensagens de erro apropriadas. Esses testes são importantes para verificar se o formulário lida com dados incorretos de maneira eficaz e se fornece um feedback adequado ao usuário.

test('should show error messages for invalid inputs', async () => {
  render(<LoginForm onLogin={jest.fn()} />);

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'invalid-email' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(await screen.findByText(/Email inválido/i)).toBeInTheDocument();
  expect(await screen.findByText(/A senha deve ter pelo menos 6 caracteres/i)).toBeInTheDocument();
});

O que está sendo testado: Aqui verificamos se o formulário está exibindo mensagens de erro adequadas quando os campos de e-mail e senha forem preenchidos com dados inválidos. Fazemos a simulação da entrada de valores incorretos verificando se as mensagens de erro esperadas são exibidas.

Entendeu por que você deve testar?

Em um mundo onde a experiência do usuário e a qualidade do software são prioridade, os testes no front-end desempenham um papel fundamental em garantir que nossas aplicações não apenas funcionem corretamente, mas também proporcionem uma experiência fluida e sem bugs.

Ao integrar esses testes no seu fluxo de desenvolvimento, você está não apenas prevenindo problemas antes que eles se tornem grandes dores de cabeça, mas também construindo uma base de código mais confiável e resistente. Cada tipo de teste tem uma camada diferente de verificação, e juntos, eles formam uma grande camada de segurança que ajuda a garantir a qualidade e a funcionalidade de sua aplicação.

Lembre-se, assim como em uma receita de bolo onde cada ingrediente tem seu papel crucial, cada tipo de teste tem sua função específica no processo de desenvolvimento e desenvolver uma combinação equilibrada de testes vai além de uma prática recomendada, é uma necessidade para qualquer equipe que se empenha em entregar um software de alta qualidade.

Então, da próxima vez que você estiver desenvolvendo um novo recurso ou corrigindo um bug, pense nos testes como seus aliados indispensáveis. Eles são a chave para uma aplicação mais robusta, confiável e, acima de tudo, mais satisfatória para seus usuários.