Image for post
Image for post
“beam design-printed paper on desk” by Sergey Zolkin on Unsplash

Working an application in Vue.js with TDD — An extensive guide for people who have time — part 2

Continuing the UserView

Daniel Kuroski
Oct 18, 2018 · 5 min read

This is the second in a series of articles:

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

RED

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.

Image for post
Image for post
RED — VUserSearchForm andVUserProfile do not exist

Let’s solve this out… you only need to create them and refer them on our UserView

src/components/VUserProfile.vue
src/components/VUserSearchForm.vue
src/views/UserView.vue

Now our test is already passing. We only need to update our snapshots. Press u on the terminal.

Image for post
Image for post
Press “u” to update the snapshots
Image for post
Image for post
GREEN

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

Refactored UserView
  • 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

RED

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.

Image for post
Image for post
RED

Now that we have our tests failing, let’s make it pass, not forgetting to update our snapshots.

src/views/UserView.vue

Only inserting the property is not enough. We need to put this declaration in our VUserProfile.

src/components/VUserProfile.vue
Image for post
Image for post
GREEN

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

Image for post
Image for post
summing up

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 😄

magnetis backstage

giving back to the community with things we learned at…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store