When talking about test driven development there are a lot of hurdles and it's a stready process. It takes weeks, months and maybe years to get used to it.
Depending on how bad the code base that you are working on currently is.
TDD for frontend? Are you crazy?
It's hard to convince people to do tdd in the backend, where there is mainly business logic. How could I possible convince you to write frontend tests? I hope with this post I will.
Test driven development frontend is not about testing the click on buttons, neither are you checking if the background color is equal to `#ccc`.
Frontend application nowadays contain a lot of business logic, for example speaking of Angular and React / React Native, Vue etc.
This logic can and SHOULD be tested.
That will make your application more robust and give the benefit of a better design. Because when making your tests drive the development you need to think of instantiating the class inside a test suite. => Loosely coupled design.
After rushing through the benefits and some general TDD talk let me get concrete.
What will you test?
Data filtering, when general concept is applied - Unit test
Screen Logic (Create Comment Widget and Comment List interaction) - Integration test
Atomic Component tests (Filepicker, Comment Widget) Unit Test
Authentication
etc
There are a lot of things that can be tested and even the things that you feel can't be tested.
That's mostly the case with views. You might have a component with logic inside it.
Let it be Angular or React, Vue, etc. It applies to all of them.
The view should not contain logic
It should only display the data that it has been passed via dependency injection. (Inversion of control). By that we can write tests for the data provider part and test the ui with our eyes.
Separation of concerns is the keyword.
So let me summarize:
Views should not contain logic. Build them without concrete dependencies.
Put the logic inside a plain class or function, that can be instantiated much easier than a React or Angular component.
Write this logic test driven.
Make a wrapper component, so that the view use the data from the just built data provider.
Test the components visually by displaying them inside a Storybook, or a playground.
Subscribe to the newsletter
Or my face will come out of your toilet very soon.