Okay, for episode 3, let's get back into our review of the Vue TestUtils API. So I'm still working with this very basic counter that we have here. And if I run npm test, everything should return green. But you know what, why don't we add a watcher, so that as we work on the code, the test will automatically rerun. So what we could do is visit package.json. So let's duplicate this, we'll call it watch, and right here we're just going to register a watcher. Okay, so now take a look if we switch back. I can say npm run watch, and now it'll trigger my test, but it's also going to keep an eye.

Okay, so now take a look if we switch back. I can say npm run watch, and now it'll trigger my test, but it's also going to keep an eye on things for me. So for example, if we make a test fail, as soon as I save it, you'll immediately see it run. Okay, so let's just bring this down below, bring that back, get us back to green, and take a look at these tests. So it defaults to a count of 0, fine. It increments the count when the button is clicked. Okay, what button?

It increments the count when the button is clicked. Okay, what button? Because we know there's probably going to be an increment and a decrement button. So why don't we change this to increment, and then we're going to look for a button called increment. But you know what, I don't even care that it's a button. I just want something clickable, so that should be fine. But of course it fails because it can't find that anymore. Okay, so we'll go into counter.view, and I'll give this a class, or you could do vl if you want, either is fine, and we'll just stick with a simple class here.

Okay, so we'll go into counter.view, and I'll give this a class, or you could do vl if you want, either is fine, and we'll just stick with a simple class here. So now if I run it, we should be back to green, and we are. Okay, great. So now, what about hitting a decrement button? Let's see what that looks like. It decrements the count when the, decrement, okay. So now, yeah, so what do we have to do here? So we start by saying, well the count should be 0, and then when you hit the increment button maybe two times, it should go up to 1 and 2.

So I'm going to show you this in two different ways, mostly to illustrate the API. So let's bring this back to what we had before, is that right? Yeah. Okay, so let's write a new test, it, meaning our counter. So whenever you write your test names, always begin or preface it in your head with whatever you describe. So in this case I'm describing counter. So now when I say it, I'm referring to the counter. So the counter never goes below 0. Okay, so how could we test that?

triggering that single test, and that can be really useful. Okay so in this case, we can see, nope, it did go to -1, and we don't want that. Okay so let's fix that. Right here, well I don't want to just reduce the count no matter what. I only want to reduce the count if the count is greater than 0. So two ways to do this. We could say, is the count greater than 0? Then reduce it, otherwise just set it to 0, and that should get us to green, yep. Or what I might do here instead is something like count is greater than 0, and count reduce. So we're basically saying, if this is truthy, then continue on to the right side.

Or what I might do here instead is something like count is greater than 0, and count reduce. So we're basically saying, if this is truthy, then continue on to the right side. Anyways, that does get us back to green. But now let's switch back up here. So it decrements the count when the button is clicked. So you'll see that this is kind of setting up the world, right? So we're saying, well, given we started at 0, and then given we do something that increments the count a couple times, yes, this is entirely fine. What you can also do is just make this part of your world setup. So you could say, rather than hitting the necessary button to change the count, you

What you can also do is just make this part of your world setup. So you could say, rather than hitting the necessary button to change the count, you could also say wrapper.setData. So think of this as your way of saying, all right, here's what I want the data on the viewModel to be. So I want it to be 5 for the purposes of this test. Now when I click on the decrement button, it should be brought down to 4. So if we run it, oh, and whoops, we got to update this. That's the only thing with using these modifiers is you'll often forget. So if everything's passing when you expect it to fail, make sure you're actually testing.

So how might we go that route? All right, well, we're going to begin with a count of 0, and if it's at 0, we should only see an increment button, not a decrement button, right? Okay, well, let's do this. Hit wrapper, and we're going to find an element called decrement, and we expect that button to not be visible, right? We should expect it to have a display of none. So I feel like there should be some kind of method called isHidden or something like that, but to the best of my knowledge right now, there isn't. So we could do hasStyle instead, because this is an important thing to understand.

but to the best of my knowledge right now, there isn't. So we could do hasStyle instead, because this is an important thing to understand. When you use something like v-show, that directive, the difference between v-show and v-if is v-if is going to render it on demand. It's kind of like a lazy loading. v-show is going to render it, but then it's just going to set display: none once finished, depending upon the Boolean that you pass to it. So in this case, think of v-show as literally display: none or display: inherit, right? All right, so let's bring this back, and we're going to say expect the wrapper, try to find a button with a class of decrement, and I'm going to expect that to have a display of

All right, so let's bring this back, and we're going to say expect the wrapper, try to find a button with a class of decrement, and I'm going to expect that to have a display of none. Okay, so let's save that, and then we're going to test that method exclusively. Run it, and we're getting green—oh, whoops, we forgot to do an assertion. So we expect the existence of a style of display none to be true. I expect to see that. So if we run it, it's now going to fail, because that didn't exist on the button. Okay, so we're going to come back here, and we're going to change this. We'll say only show this decrement button if the count is greater than zero.

Okay, so we're going to come back here, and we're going to change this. We'll say only show this decrement button if the count is greater than zero. So now if I save it, we're back to green, which means at this point, if you want to, you can even get rid of this check here. Great. Let's just do one final check, though. Yes, by default, we shouldn't see the button, however, when we increment the count, then we should expect this to change to false. Save it, and I bet we still get green, and we do. Alright, does that make sense?

we have a count of three, or one even. Well now, once again, we should see the button. So we save that, and we're still going to get the same thing here. Okay, so in this episode, what did you learn? You learned how to use the hasStyle method, and this, of course, is going to accept any CSS property and value. And just make sure, when you're doing this on your own, don't forget hasStyle, you still need to assert whether that's true or false. It's really easy to forget that. Next you learned about wrapper.setData, to override the default data that exists on the

It's really easy to forget that. Next you learned about wrapper.setData, to override the default data that exists on the VM. Now if you want to review this more, of course you can go to the documentation, and yeah, once again we reviewed hasStyle, but there's also hasProp, hasClass, hasAttribute on the DOM node, and then of course, if we go further down, we reviewed setData. Alright, I'll see you in the next episode.