In this video, we're going to learn how to find elements in the mounted DOM representation of Vue and how to fire DOM events like change or click. The component in question of this episode is this one here, with a fruit basket. Our goal is to add some fruits into our fruit basket. This time, we'll try to do everything using the DOM and no direct calling of the methods, as we care for the bindings to be set up correctly.
Let's inspect the DOM quickly what we have. First, we have a text input with a vModel of fruit, where we store the value. The critical piece is our button. If we click it, we call the addToBasket method.
And this one should add fruits to our basket. Eventually, we just loop over the whole basket and print out each fruit individually. Let's pop open another of our fancy spec files. So we want to test if we can add fruits to the basket using only the DOM.
Okay. Let's do what we always do. We're going to mount the component. Okay, we care only for the DOM elements this time.
So what are the elements we care for initially? Probably the input and the button. The wrapper supports a find method that lets us use a CSS selector to find one element or the other. Very good.
Next, we need to set the value on that element. Here it's important to note that we receive another wrapper instance. If you're unsure what's part of the wrapper, you can always check out the documentation. Let's switch back to our editor.
element, we can access the actual HTML element. Then we can use the default JavaScript functions a browser provides. We could leverage this. I like bananas.
Now we should be good to expect our value to be this fruit. Oh no, the test failed. Why is that? Well, the answer is, we just set the value directly and view using the model is listening to an input event.
The browser would always send that event by default, but here we don't have that luxury, so we need to send it manually. To send an event using the wrapper, we can use the trigger function. Sweet! Now the test is passing correctly.
Let's move forward to the button click action. Let's leverage again what we just learned. Now fruit should be empty again. and the basket should be filled with a banana.
One thing left to verify. I want to know that the list items get rendered correctly. We can use another wrapper method called findAll. findAll will return an array containing all matches.
length to verify how many items are in this array. Great. If you want to make sure this item is not there before, we can add an expectation above our actions. Using these dumb traversing techniques, we can find all elements we care for inside our view instance.
We have now also tested the interactions of this component on a user level without explicitly calling any methods manually. These kind of tests can bring you a long way in guaranteeing the code actually works for your users. See you next time. In this video, we're going to learn how to find elements in the mounted DOM representation of Vue and how to fire DOM events like change or click.
The component in question of this episode is this one here, with a fruit basket. Our goal is to add some fruits into our fruit basket. This time, we'll try to do everything using the DOM and no direct calling of the methods, as we care for the bindings to be set up correctly. Let's inspect the DOM quickly what we have.
First, we have a text input with a vModel of fruit, where we store the value. The critical piece is our button. If we click it, we call the addToBasket method. And this one should add fruits to our basket.
Eventually, we just loop over the whole basket and print out each fruit individually. Let's pop open another of our fancy spec files. So we want to test if we can add fruits to the basket using only the DOM. Okay.
Let's do what we always do. We're going to mount the component. Okay, we care only for the DOM elements this time. So what are the elements we care for initially?
Probably the input and the button. The wrapper supports a find method that lets us use a CSS selector to find one element or the other. Very good. Next, we need to set the value on that element.
Here it's important to note that we receive another wrapper instance. If you're unsure what's part of the wrapper, you can always check out the documentation. Let's switch back to our editor. element, we can access the actual HTML element.
Then we can use the default JavaScript functions a browser provides. We could leverage this. I like bananas. Now we should be good to expect our value to be this fruit.
Oh no, the test failed. Why is that? Well, the answer is, we just set the value directly and view using the model is listening to an input event. The browser would always send that event by default, but here we don't have that luxury, so we need to send it manually.
To send an event using the wrapper, we can use the trigger function. Sweet! Now the test is passing correctly. Let's move forward to the button click action.
Let's leverage again what we just learned. Now fruit should be empty again. and the basket should be filled with a banana. One thing left to verify.
I want to know that the list items get rendered correctly. We can use another wrapper method called findAll. findAll will return an array containing all matches. length to verify how many items are in this array.
Great. If you want to make sure this item is not there before, we can add an expectation above our actions. Using these dumb traversing techniques, we can find all elements we care for inside our view instance. We have now also tested the interactions of this component on a user level without explicitly calling any methods manually.
These kind of tests can bring you a long way in guaranteeing the code actually works for your users. See you next time.