In this video, we'll look at the view lifecycle methods. I'm personally a big fan of them as you can do a lot of awesome stuff there. Also, let me show you the component again in action using code sandbox. I want you to see the component in action running as it might be hard to follow otherwise.
As it makes heavy use of lifecycle methods, I'll hit the reload button in code sandbox and we should see a message appear and disappear after a few seconds. You can find the link to this in the video description. While you can fork the project to play around with the code, we have to switch back to our editor. Sadly, the testing capabilities in Code Sandbox are not where we need them as of the time of this recording.
So let me show you what we'll work with in the editor. As seen, this alert component will show a message and disappear after 5 seconds. The time is set in the timer value. Let's go through the code top to bottom.
As you've seen, there was a timer counting down. This is done by our computer property here. To start the timer and let it disappear, we make use of Vue's lifecycle methods. Let's focus on testing these.
The methods are in chronological order, so we can start with the first one called mounted. We see that an interval gets assigned here. So we can check if the interval is assigned once we mount the component. I would expect that the mounted method gets called as it's a view core functionality, so we'll just focus on the code executed inside actually.
The destroy method gets called after the component $destroy function gets executed. And we can even execute code before the destroy method runs. Let's open up our alert spec test file and I'll kick off the Jest test runner in watch mode. All right, I'll start as always with my describe block to have a nice order to my tests.
Here we go, let's create our first test. We want to check if mounted assigns an interval. As always, we'll mount our component. Next, we just want to make sure that interval is no longer undefined.
Yay, our first spec passed. Now we have confirmed the original code runs and we have an interval assigned. Next, we might want to check that the code inside the interval behaves correctly as well. That could be a little tricky.
Whenever we work with timer functions, I recommend we make use of just use fake timers. So let's create a new test. Now, nothing will happen by default, and we can check the value of counter. As we have fake timers active, Jest allows us to control time.
We can advance time with one simple command. As parameter, it expects milliseconds. Now, we can make sure that counter is actually one. And for our paranoia, Let's do it once more.
Alright, let's look at one final puzzle piece. We want to make sure that the destroy lifecycle methods get invoked correctly. As we call them with our own code, we should at least make sure that our code is working as expected. If you want to use fake timers again, we can either copy it or we just move it outside as we want to use it in all our methods anyway.
One thing that will be handy here are spies. If you recall, A spy lets us watch a function and tells us if it's called or not. This is perfect in this case. So let's spy on the beforeDestroy method.
It's important we set up the spy before we mount the instance as Vue transforms the component into the VM object. Alright, next we want to make sure that destroy gets called correctly. In the previous test we have established that the counter works. Now...
I want to test that the internal logic works with destroy being called once the counter equals the timer. So let's set the counter to 1 second before the end. We could use a fixed number, but I usually prefer to build my tests leveraging the same logic that my components would. So we can actually take the timer minus 1.
This saves us if we change the timer to 10 seconds in the future and our tests would still work. Great! Now let's advance the timer and check if the spy was correctly called. All works.
That's great. Now you have all the tools necessary to test lifecycle method. And I'll leave it up to you to experiment with more fine grain tests on these methods. The only thing I want to point out is the final destroyed method.
Here we interact with the $L element on our wrapper. And to test something like this in context of a parent component, we need to know how to traverse the DOM using the view test utils. We'll learn exactly that in our next video. In this video, we'll look at the view lifecycle methods.
I'm personally a big fan of them as you can do a lot of awesome stuff there. Also, let me show you the component again in action using code sandbox. I want you to see the component in action running as it might be hard to follow otherwise. As it makes heavy use of lifecycle methods, I'll hit the reload button in code sandbox and we should see a message appear and disappear after a few seconds.
You can find the link to this in the video description. While you can fork the project to play around with the code, we have to switch back to our editor. Sadly, the testing capabilities in Code Sandbox are not where we need them as of the time of this recording. So let me show you what we'll work with in the editor.
As seen, this alert component will show a message and disappear after 5 seconds. The time is set in the timer value. Let's go through the code top to bottom. As you've seen, there was a timer counting down.
This is done by our computer property here. To start the timer and let it disappear, we make use of Vue's lifecycle methods. Let's focus on testing these. The methods are in chronological order, so we can start with the first one called mounted.
We see that an interval gets assigned here. So we can check if the interval is assigned once we mount the component. I would expect that the mounted method gets called as it's a view core functionality, so we'll just focus on the code executed inside actually. The destroy method gets called after the component $destroy function gets executed.
And we can even execute code before the destroy method runs. Let's open up our alert spec test file and I'll kick off the Jest test runner in watch mode. All right, I'll start as always with my describe block to have a nice order to my tests. Here we go, let's create our first test.
We want to check if mounted assigns an interval. As always, we'll mount our component. Next, we just want to make sure that interval is no longer undefined. Yay, our first spec passed.
Now we have confirmed the original code runs and we have an interval assigned. Next, we might want to check that the code inside the interval behaves correctly as well. That could be a little tricky. Whenever we work with timer functions, I recommend we make use of just use fake timers.
So let's create a new test. Now, nothing will happen by default, and we can check the value of counter. As we have fake timers active, Jest allows us to control time. We can advance time with one simple command.
As parameter, it expects milliseconds. Now, we can make sure that counter is actually one. And for our paranoia, Let's do it once more. Alright, let's look at one final puzzle piece.
We want to make sure that the destroy lifecycle methods get invoked correctly. As we call them with our own code, we should at least make sure that our code is working as expected. If you want to use fake timers again, we can either copy it or we just move it outside as we want to use it in all our methods anyway. One thing that will be handy here are spies.
If you recall, A spy lets us watch a function and tells us if it's called or not. This is perfect in this case. So let's spy on the beforeDestroy method. It's important we set up the spy before we mount the instance as Vue transforms the component into the VM object.
Alright, next we want to make sure that destroy gets called correctly. In the previous test we have established that the counter works. Now... I want to test that the internal logic works with destroy being called once the counter equals the timer.
So let's set the counter to 1 second before the end. We could use a fixed number, but I usually prefer to build my tests leveraging the same logic that my components would. So we can actually take the timer minus 1. This saves us if we change the timer to 10 seconds in the future and our tests would still work.
Great! Now let's advance the timer and check if the spy was correctly called. All works. That's great.
Now you have all the tools necessary to test lifecycle method. And I'll leave it up to you to experiment with more fine grain tests on these methods. The only thing I want to point out is the final destroyed method. Here we interact with the $L element on our wrapper.
And to test something like this in context of a parent component, we need to know how to traverse the DOM using the view test utils. We'll learn exactly that in our next video.