If you like this text and are interested in more, follow me on Twitter or Linkedin and stay updated with my new posts.
A question often asked in the interviews is: do you do any testing of your UI applications? And the expected answer is yes. But what kind of testing can you do for the UI applications? In this post, I am giving a top level of the four different types of testing.
Unit testing
The first and most basic type of testing is unit testing. You do this by taking a small piece of functionality and testing it independently from the rest of the system. One function, for example. Most often, you would test services this way. You pass the required parameters to the function and checking if the output is what you expect. There are few more things you might want to test with the unit tests. You could use spies for checking that your code runs some function, how many times, and with which parameters. When talking about unit tests, you can’t skip mocks. As said before, unit tests only test one piece of functionality. But what if that functionality uses some other service. With mocks, you can “fake” the response of that other service. A popular library for this kind of test is Chai.
E2E testing
The following most popular tests with the UI applications are end-to-end tests, or E2E for short. With this type of testing, you are testing your application as a whole. That might be manual clicking on your UI and checking that every button works as it is, that it interacts with API as intended and that the whole flow is correct. You can do it manually, and many companies have dedicated teams that run this manually. But there are excellent solutions that you can use for automatic tests like Selenium and Cypress.
Integration testing
Integration tests are a bit specific. In this case, you are combining multiple elements and testing how they work together. These tests kind of sit between the unit and E2E tests. An example of this test would be checking that the home page is showed after filling in the login details and clicking the button. You could mock login service, so you are not doing full e2e, just functionality between login page, router, and home page.
Snapshot testing
The final, and very UI-specific type of testing, is snapshot testing. During this type of testing, you generate a rendered version of your code—final HTML. Then you compare this version with the previous run version. If there are differences, the test fails. This way, you are getting a report of the effects your change has on the output, and you can detect any unwanted ones. If only wanted changes are present, you save the new snapshot and use it as the new version for the next run.
Top comments (0)