But what are the tests for?

Imagine that you are making a chocolate cake and only after it is ready you realize that you forgot to add sugar to the dough, what now?! Think of your application like this cake batter, without testing it may even work well at first, but at some point while it is being tested something may not turn out as expected. And who guarantees that this trouble won't happen?!

Based on this example, tests are proof of the mass of your code, they ensure that everything is in the right place, even when you decide to add new layers or functionality coverage.

In general, automated tests are basically codes built to test other codes, ensuring that the application works with quality.
Since quality is the key word, it is important that within an engineering and product team everyone is aware of the importance and value that tests generate, so that they can be integrated into deliveries in a natural way.

Why should I test?

I bring here some reasons to convince you to start implementing tests in your code right now:

Fail-safe code: Testing helps ensure that your code will work without bugs, even after you add new features or make changes.

Changes without fear: Application maintenance will be much safer as you will be able to refactor or update your code without worrying about breaking something as the tests warn you if something is wrong.

Faster fixes: With automated tests you will be able to correct problems more easily, saving a lot more time

Less surprises during deployment: Can you imagine having just done the deployment and already receiving a call from users with an error in something that could have been predicted?! The tests come to help precisely with this prevention

Helping you and your QA colleague: Do you know when you finish that feature and pass it on to QA for testing and he gives you a report back with 357 things to fix? This problem will also be reduced since you will have anticipated most of the errors that he would probably encounter

What are the types of tests?

There are many types of tests to be developed in the front-end, but today I will focus on three of them: User Interface Tests (UI), Functional Tests (End-to-End) and Validation Tests and for To exemplify each of them, I will create tests for a simple login screen in a React.js application using Testing Library.

User Interface (UI) Tests

User Interface (UI) Tests check whether components are being rendered as expected and, in addition to being based on rendering, they check the existence of important elements, such as form fields, buttons and labels.

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

What is being tested: This test ensures that the LoginForm component renders the essential interface elements: the email and password fields and the login button. screen.getByLabelText searches for elements by their associated labels and screen.getByRole searches for the button by its text and function.

Functional Tests (End-to-End)

Functional Tests or End-to-End (E2E) tests, verify the entire functioning of the application from the user's point of view, simulating real interactions with the interface, such as filling out forms and clicking buttons, and evaluating whether the application responds to interactions as expected.

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

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

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

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

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

});

What is being tested: Here, user interaction with the login form is simulated by filling in the email and password fields, and then clicking the login button. The test also checks that the onLogin function is called with the correct data and that it was called exactly once.

Validation Tests

Validation Tests ensure that the application validates invalid inputs and displays appropriate error messages. These tests are important to verify that the form handles incorrect data effectively and provides adequate feedback to the user.

test('should show error messages for invalid inputs', async () => {
  render();

  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();
});

What is being tested: Here we check if the form is displaying appropriate error messages when the email and password fields are filled with invalid data. We simulate the entry of incorrect values ​​by checking whether the expected error messages are displayed.

Do you understand why you should test?

In a world where user experience and software quality are a priority, front-end testing plays a key role in ensuring that our applications not only function correctly, but also provide a fluid, bug-free experience.

By integrating these tests into your development flow, you are not only preventing problems before they become major headaches, but also building a more reliable and resilient code base. Each type of test has a different layer of verification, and together, they form a large layer of security that helps ensure the quality and functionality of your application.

Remember, just like in a cake recipe where each ingredient has its crucial role, each type of test has its specific function in the development process and developing a balanced combination of tests goes beyond a recommended practice, it is a necessity for any team that strives to deliver high-quality software.

So the next time you're developing a new feature or fixing a bug, think of testing as your indispensable allies. They are the key to a more robust, reliable and, above all, more satisfying application for its users.