What to test in the frontend?

What to test?

Testing software is not an easy task. Even senior developers struggle to make it clear what needs to be tested. If you don't know what you are going to test, your tests are probably wrong.

In this article, we are going to give you practical examples of what to test in your frontend code, this applies to any framework. The important part is the concept.

Integration Tests

Tests ensure your code behavior is correct.
It ensures that when given some initial program state, you ended up with a given final state.
Integration tests are the best cost benefit test that you can have.
Integration tests, tests the code like the end user would test it.
When doing Integration tests, you just test public interfaces, you don't test internal functions.

Testing against the DOM

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.

Let's see what exactly you should test in your frontend code, given some scenarios.

What to test in a Component?

• validate the component renders without bugs and throwing errors
• validate the DOM has the elements you do expect
• validate the DOM does not have the elements you do not expect
• validate if the external API requests are being called correct
• validate that Relay/GraphQL requests are correct and being called with the right values

In Conclusion

I hope these practical examples makes your tests making more sense to you.
This is how Woovi tests, and this avoids many regressions and silly bugs.

Always start with the simplest test case, the happy case, and keep adding more and more edge cases to squish bugs.

Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!

Photo by Amélie Mourichon on Unsplash