8.4 Unit Testing Components

Hi, folks. In this lesson we are going to write some unit tests for the game component. Components are one of the most common angular constructs use to build and application. Even in our smooth demo graph we have ten of them, so we usually spend a lot of time writing component unit sets. Now that the test follow for the game component actually runs the default test successfully, we can remove this test and ask some of our own So, I'd like to follow the same format for components that I do for services. So, I'd like to add a describe for each method that's being tested, and we'll start off by testing the ngOnInit method. So one thing the ngOnInit method does is store local references to the player and dealer, so we can check that these are initialized correctly. So we can make sure that the two properties that we want to test are undefined to start with. We then call the method, and we then check that the properties are now defined. So the other thing that the ngOnInit method does is call the start game method, but only if game started is not true. So for this test, we're going to need to spy on the game started method, so we can add a before each to the top of describe. So the component will call the start game method of the game service, if the game started property is false. So now we should test that the start game method does not get called if the game started property is true. So the test is almost identical, we just set the gameStarted property to true in the first section of the test, and then we check that the start game method has not been called. And we can do that using the not method to negate the two have been called matcher. So, that should be the ngOnInits method completely tested. Let's just go to the browser and make sure our tests are parsing. And all looks good so far. So the ngOnDestroy method only does one thing. It calls the unsubscribe method of the fact subscription if the subscription exists. We'll need to manipulate the fact subscription property, but we've strongly typed the value of this property to a subscription. So we can't just save any old thing in there, we'll need to import the subscription in our test. And now let's add a test for the NgOnDestroy method. So this is a new method, so we'll add a new describe for it. So we're going to want to create a new instance of a subscription, and spy on its unsubscribe method. The subscription constructor takes a function, so we can just parse in an arrow function which returns null. We need to store the fake subscription that gets created, as we'll want to access this outside of the before reach. But we have created it, we can then spy on its unsubscribe method. So now let's add the test. So we set the fact subscription property of the component to our fake subscription, then we invoke the ngOnDestroy life cycle method. And then we check that the unsubscribe method was called. So we have to create a fake subscription for this test, but it's still pretty straightforward. So that's two methods of the component fully tested, and let's just go to the test browser and check that this last test is working. And it certainly appears that that is the case. We're just about out of time for this lesson, if you feel like adding tests for the doStick and doHit methods, by all means be my guest. Don't worry about the get fact method for now we'll see how we can add test for observable later in the course. And don't forget to take the focus off the test we have written today once you're done with this test file. So, in this lesson we have seen how to add basic unit test for a component, focusing on testing the life cycle methods. We saw how is it create our own instance of a subscription for a test. And we went through the process of methodically adding tests for each bit of work carried out by each of the life cycle methods.