VueJS unit tests as a learning tool: v-show
This is the first post in a series which will dive into unit tests within the VueJS code base in order to gain a deeper understanding of how elements within the Vue ecosystem work.
Beyond alerting one to regressions in a code base, well-written unit tests read like simple sentences and help those working on a project to understand what individual features do. Unit tests can also serve as great templates for documentation if they are written well as they should describe what a feature does and how it reacts to different inputs.
The VueJS documentation is excellent, but recently I decided to dig even deeper and begin exploring the source code behind Vue! The first piece of the code base I visited was the tests directory. Most of you have surely heard of Test Driven Development (TDD). Well, in this series I would like to introduce you to Test Driven Learning (TDL). The idea is to begin reading through the unit tests of the framework or library you are using early in order to gain a deeper understanding of how individual features work. TDL also has a beneficial side-effect in that it will reinforce the benefits of writing unit tests in your own projects and reveal solid testing patterns.
‘v-show’ unit tests
In this first post in the series we will take a look at the v-show directive. The unit tests in full can be found here, but we will be walking through them piece-by-piece below. Below is the beginning of the v-show test spec. The first thing you’ll notice is just how easy it is to write unit tests with VueJS. Discussion of testing frameworks, test runners, and Vue-specific testing is beyond the scope of this series, but is something I plan on writing about in the future. The next thing you may notice is that these tests are nicely written and do indeed read as simple sentences:
Directive v-show should check show value is truthy.
Directive v-show should check show value is falsy.
Let’s dive into that first test now. A new Vue instance is set up with a simple template which contains v-show=”foo”. This foo variable is set to true within the data property. The expect line reveals what this directive does, it appears that it alters the display property of the CSS style of the element which v-show is an attribute of. When the variable tied to v-show, in this case foo, is truthy, display is set to an empty string. Hmmm this doesn’t seem to actually tell us much. Let’s move on to the next test to see if we can learn a bit more.
The next test is very similar with two key differences: foo is set to false, and we expect display to be “none” in this case. Now we’re getting somewhere! An element with a v-show directive which evaluates to false will be hidden from the UI by having its display set to “none”. Nice! We have learned something important about v-show beyond the fact that it hides an element, it does NOT actually remove said element from the DOM. This functionality belongs to another directive, v-if, which we will analyze in a future post.
Clearly the variable tied to v-show could change throughout the lifecycle of a component. So what happens as v-show evaluates to different values? The next set of tests explain this in detail!
The beginning of this set of tests reveals what we may have expected: as foo is toggled from true to false the display toggles from an empty string to “none”. Below this you’ll learn which values are considered “truthy” and “falsy” by the v-show directive. Namely: an empty object, empty array, string, or number other than 0 are “truthy” while 0, null, and undefined are falsy. Sweet! We are developing a solid understanding of v-show at this point as well as an appreciation for thorough unit testing.
So we’ve seen that display alternates between an empty string or “none” depending on the “truthiness” of the value v-show evaluates to, but what if display is set to something else on the element? The next set of tests reveal the answer!
If display is set on the same element that contains v-show it will be respected if the value tied to v-show is “truthy”. An element with display: block will retain this style as long as foo is “truthy”. On the other hand, display: none will be set for “falsy” values. These tests also reveal that the original display setting is retained even as v-show flips back-and-forth between “truthy” and “falsy” values.
There’s just one more small set of tests to take a look at. This test wraps the span containing v-show in a div containing v-if and toggles v-if back-and-forth. The important point to understand, which we will dig into deeper in the v-if specific post, is that when v-if evaluates to a “falsy” value its containing element and all children are removed from the DOM. These tests simply reveal that v-show behaves as expected even when wrapped within a v-if directive.
We now have a solid understanding of how v-show works and should feel confident that we could utilize it in our own apps, and we have yet to even take a peek at the docs! With that said, let’s turn to the docs now to see what they reveal.
‘v-show’ docs
The v-show API docs section should make complete sense to us now that we have studied the unit tests:
As I mentioned earlier, the VueJS docs are excellent, but I would argue that reading through the unit tests behind v-show taught us all that the docs reveal and more in just a couple minutes of reading! Also, as I mentioned, reading through the tests taught us how unit tests should be written and how thorough they should be. Writing similar tests for features within your own apps should become a priority for you and your team!
Next up
In the next post we take a deep-dive into v-if through its unit tests!
If you enjoyed this post please hit the little 💚 below to let me know you’d like more of this material! Thanks! 🤓
