Working an application in Vue.js with TDD — An extensive guide for people who have time — part 2
Continuing the UserView
This is the second in a series of articles:
- Part 1: Setup and the first test
- Part 2: Continuing the UserView
- Part 3: Testing the store and the rest of the presentation components
- Part 4: Testing the API request service
- Part 5: Adding and testing with third-party dependencies
- Part 6: Overview — 26/11
If you want to read it in pt-BR, check it out here.
Last week I briefly explained about the project, explained some concepts and started doing our first test. Now we can move on to one of the most interesting parts of this series in my opinion, and probably this is the shortest article.
Second test
Now that we have already validated if our component is rendering, let’s test if it renders the right thing. In this case, we want to guarantee it has a component for the VUserSearchForm and the VUserProfile.
In this second test, what we are doing is:
- On line 17 we take our wrapper and from it we
search for our main children elements - On line 18 and 19, through the method find of vue-test-utils we are checking if they exist
Again, the tests will be failing, thus none of the aforementioned components exist.
Let’s solve this out… you only need to create them and refer them on our UserView
Now our test is already passing. We only need to update our snapshots. Press u on the terminal.
Some people think that this test ends up invalidating the first one we made, but here we are only guaranteeing the main components. We don’t need to put on this test ALL our children components, if we have an h1 or a p or any other element that is not “vital” for our component’s operation. The snapshot will be enough, and it will also guarantee any textual alteration, being it a class or property change. Then both tests are useful and important.
Refactor
Using the fact that we are on GREEN, we can refactor a little of our tests. If you noticed, we have some double things. Now I’m going to propose a change on the structure in order to use a form that I apply to all my applications.
- Here we created, on line 7, a function to build our tests structure
- On line 10, I return an object containing our wrapper and all selectors/elements/utilities that can be used among tests
It’s worth highlighting that these selectors are functions, and this is important as we want to control in what moment the element is searched for.
If we don’t use functions, from the moment that build is called, the wrapper.find would immediately be called. By using functions, we limit the find to the time we are going to use it.
- On lines 19 and 26, through the destructuring, we call the function build and get what we are going to use for the test
- Remembering that now our selectors are functions, needing to be invoked on lines 29 and 30.
In this first moment, the build function may not make much sense and some people will say “why don’t you create the whole structures on beforeEach”! But trust me, as the development goes through, this is going to make sense.
Third test
For the third test, we can validate the binds of the component. Let’s see if it’s passing a property for the component VUserProfile containing an object. This object will have all information of the researched user.
I’m going to reinforce here that I’m not discussing if it is an integration or unitary test. For the whole article, let’s face everything as they were unitary tests, as this is a topic which usually generates a lot of discussion in the front world.
To keep the test simple, only on line 9, I passed the property data to our component, containing our Github user.
On line 27, I’m assigning this object value for { name: 'Daniel' }and then I verify if our component VUserProfile received this same user as props.
Now that we have our tests failing, let’s make it pass, not forgetting to update our snapshots.
Only inserting the property is not enough. We need to put this declaration in our VUserProfile.
We are here guaranteeing that our UserView.vue is passing the desired property for the VUserProfile.vue.
Using the fact that we are on green, we can think that in this case it would be perfectly OK to keep the state of our application inside the UserView.vue. But for demonstration issues let’s say that this user researched by the Github is being used in other places in our application.
What we are going to do now is sending this user to our store and testing if we are sending the store user instead of the data property.
Overview
In this first article, we did:
- Our second and third test
- Refactored all tests by using a function responsible for mount our component exposing all child element selectors
Stay tuned to next week we will be finishing our component with store integration.
Thanks for the attention, if you liked, please click on the 💚, and any questions, suggestions or corrections feel free to send me a message, I thank you very much 😄.
My Twitter: @DKuroski
See you next week 😄
