In the previous session, we already saw the wrapper object, but only used the HTML method to get the render template. Let's dive a little deeper. On the test details docs is the wrapper section. Besides methods, it provides a nice overview of all its properties.
Regarding properties, the only one that's really important for us to get started with is the VM key. This gives us access to the actual view instance. The same kind of instance you would interact with from the browser console. The methods on the other side provide a full array of awesome functions.
But let's focus on small subset for now. These allow us to tackle a lot of common challenges. For example, we could start with setData. Our list component actually already has a set of data.
Let's try to extend it. With our list component, we basically continue where we left off in the last video. So let's check out this component in detail. as a template and there's a list item that repeat for all Marvel movies that we have in an array.
Here we import the item and here we have the set of data. Let's try to change this. For our test file, the specs are already running here on the right. So let's start to write some awesome specs.
I removed the one from the last video. So let's start with a clean wrapper. As we want to extend the movie list that's already there, we need to get the current set. As mentioned, VM would give us access to the view instance, so we can pick the data right off there.
Next, we'll use setData to update the actual data set. As you see here, we pass in the key of the data set that we want to overrule, and then we have to assign a new value. To not lose the current existing movies, we just spread them into the same array again. And we add the newest film and game to it.
and I actually love the movie a lot. Finally, let's print the result to a snapshot. A new snapshot is written, let's check it out. Great, it worked.
There are a few important points I want to talk about at this point. The first important one is you might be aware of Vue using asynchronous updates. You might even have to use the VueNextInterval method to work around it and see changes represented in the instance. By leveraging the VueTestDetails method, This is done for us under the hood and we can write our spec clean and easy.
The other thing regarding this snapshot, you notice it's pretty good to read. This is not the default. This is possible thanks to a custom serializer package. It was added inside our Jest configuration.
Because of this custom serializer, we can now even remove the HTML method call for our snapshots. As you see, the spec passed again without any issues. And this makes it very nice and easy to work as the view test details. In the previous session, we already saw the wrapper object, but only used the HTML method to get the render template.
Let's dive a little deeper. On the test details docs is the wrapper section. Besides methods, it provides a nice overview of all its properties. Regarding properties, the only one that's really important for us to get started with is the VM key.
This gives us access to the actual view instance. The same kind of instance you would interact with from the browser console. The methods on the other side provide a full array of awesome functions. But let's focus on small subset for now.
These allow us to tackle a lot of common challenges. For example, we could start with setData. Our list component actually already has a set of data. Let's try to extend it.
With our list component, we basically continue where we left off in the last video. So let's check out this component in detail. as a template and there's a list item that repeat for all Marvel movies that we have in an array. Here we import the item and here we have the set of data.
Let's try to change this. For our test file, the specs are already running here on the right. So let's start to write some awesome specs. I removed the one from the last video.
So let's start with a clean wrapper. As we want to extend the movie list that's already there, we need to get the current set. As mentioned, VM would give us access to the view instance, so we can pick the data right off there. Next, we'll use setData to update the actual data set.
As you see here, we pass in the key of the data set that we want to overrule, and then we have to assign a new value. To not lose the current existing movies, we just spread them into the same array again. And we add the newest film and game to it. and I actually love the movie a lot.
Finally, let's print the result to a snapshot. A new snapshot is written, let's check it out. Great, it worked. There are a few important points I want to talk about at this point.
The first important one is you might be aware of Vue using asynchronous updates. You might even have to use the VueNextInterval method to work around it and see changes represented in the instance. By leveraging the VueTestDetails method, This is done for us under the hood and we can write our spec clean and easy. The other thing regarding this snapshot, you notice it's pretty good to read.
This is not the default. This is possible thanks to a custom serializer package. It was added inside our Jest configuration. Because of this custom serializer, we can now even remove the HTML method call for our snapshots.
As you see, the spec passed again without any issues. And this makes it very nice and easy to work as the view test details.