testing library concept and basic test

testingConcept.md

You first need to undestand the concept of frontend tests.

You should not test the implementation but the behavior

You test like the end user

For instance, imagine a login screen with email and password inputs and a submit button

The test should input the email and the password, then click in the submit button.

You should assert the API was called with the inputted data.

When using testing library you test against DOM

code:

const emailInput = getByTestId(emailTestId);
fireEvent.onChange(emailInput, { target: { value: 'email@email.com.br' }})

const passwordInput = getByTestId(passwordTestId);
fireEvent.onChange(passwordInput, { target: { value: 'pwd' }})

const submitButton = getByText('Login').closest('button');
fireEvent.click(submitButton);

// assert api was called properly

Use blur to simulate when the element loses focus:

const emailInput = getByTestId(emailTestId);
fireEvent.onChange(emailInput, { target: { value: 'email@email.com.br' }})
fireEvent.blur(emailInput)

const passwordInput = getByTestId(passwordTestId);
fireEvent.onChange(passwordInput, { target: { value: 'pwd' }})
fireEvent.blur(passwordInput)

const submitButton = getByText('Login').closest('button');
fireEvent.click(submitButton);

// assert api was called properly