What is testing? Why is testing so important in Frontend?

#agilewebandappdevelo

According to Uncle Bob, tests are part of the system which many developers think the opposite since they are not deployed. He declares that it is a catastrophic point of view since the test’s role is to support development and keep the system robust and easy to change. (Clean Architecture, Robert C. Martin , 2018)

In Front End it is commonly tested the interactions of the end users with our application. We should guarantee to our users when they log in, open a pop-up, add a comment or do any other interaction with our apps to not encounter any errors and live undesirable experiences.

Testing in Frontend, if it is done correctly, will achieve our users to be contentful and have a good performance experience using our applications. On the other hand, for developers it will save a lot of time to resolve bugs or when adding new features it will not break previous behaviors of the code.

Why can testing be disadvantageous? How to design a testing system?

Testing requires time and also consistency with the changes during development. Also with the evolution of devices and browsers, we need to be up-to-date. In Software Testing there is a concept known as the Fragile Tests Problem. This can be defined as one change in a system that causes hundreds of tests to fail. Uncle Bob emphasizes the importance of a well designed testing system for the desired benefits of stability and regression for our systems (Clean Architecture, Robert C. Martin , 2018).

We will describe some methodologies and strategies that may help for the design of our testing systems:

Martin Fowler, in his article ‘On the Diverse And Fantastical Shapes of Testing‘, tells about his moment when they asked a test expert the definition of the unit test. He says that the answer of this expert was that he covered 24 different definitions of unit test in the first morning of his training course. Since there are many different definitions of the unit test, in this article we will include the one which is called solitary test by Fowler.

In the famous pyramid of testing, in the base we encounter unit tests which have less coverage of tests but they are the fastest ones to execute. In the second level, we see the integration test which has more coverage but they are slower since they may connect with external parts. Finally we have E2E tests or some call acceptance tests which cover a huge part of the application but they are the slowest one to execute.

Unit tests, checks our components in isolation to work properly. They also cover edge cases to test and this leads our code base to be more reliable. Unit tests are followed by the implementation of integration tests. Integration tests check the communication between two software units or modules developed independently when they are connected to each other. They analyze the behavior of systems when they are connected and also check the interaction between the microservices. They also include the api connection that is why they are slower regarding unit tests, because the connection can be delayed or the service could be down. In frontend, integration tests are used to check the data that returns api has the correct object, array or format.

E2E tests simulates user behavior and checks all the interactions of the user with our application. They are specialized versions of integration tests that are executed in real browsers. They generally run before merges or releases, because it may take hours to finish the execution of the test.

In the following, we also mention the testing techniques such as Accessibility and UI:

Accessibility Testing checks that the user interface is easily usable by every user and makes our application usable for people who have disabilities. Jest-axe is a great library for testing in Jest which allows us to check the accessibility of our apps. You can also check this article of my colleague Serhii, for a complete explanation in accessibility testing.

UI tests check if the user interface of our application works correctly. If a user enters an input, clicks to a checkbox, deletes an element, should work properly and update the state of the UI as expected.

Some Frontend testing Libraries review

Jest is a library used mostly for unit and integration testing in Frontend. It is very fast for big projects with many test files for its mechanism implementation of clever parallel testing.

Testing Library is a library that we can write unit and integration tests. It helps with convenient selectors, firing events, configuration, dealing with asynchronous code, and many more.

Cypress is a library which injects its tests into a website that Cypress.io runs itself in the browser. We can write unit, integration and end-to-end tests efficiently.

It provides a faster experience to developers and we can see the errors easily on its browser.

Applitools is used for Visual Regression Testing. With its advanced AI techniques it detects differences between Images and DOM. It is very useful to check if our site’s appearance is the same as the previous one or if an error occurred. Also it checks for different browsers and platforms if the user can see correctly any item, button in website correctly when in mobile or web.

Conclusion

Testing in frontend should be the part of our developments to fix issues in our code before they go to production. We should write unit tests which examine every functionality in our applications, and also develop integration tests to check if all components and modules work correctly together. On the other hand, we should write E2E tests that automates the manual-click-testing and it centers how users would interact with our application.

We should write tests to provide confidence and not only improve metrics. As Robert C. Martin says we should avoid writing tests which are strongly coupled to the system. Because even the most trivial change can generate many tests to break.