- Overview
- Transcript
8.4 Unit Testing Components
In this lesson you'll learn how we can unit test the methods in one of our component classes.
1.Introduction6 lessons, 42:00
1.1Introduction00:48
1.2Get Started With Angular-CLI11:09
1.3Developing With Angular-CLI13:17
1.4TypeScript vs. JavaScript06:54
1.5Angular Modules From the CLI04:31
1.6CLI Options05:21
2.Get Started With Angular7 lessons, 42:38
2.1Bootstrapping the Application04:30
2.2The Application Module04:15
2.3The Application Component08:06
2.4Component Styling03:06
2.5Global Styling05:11
2.6Creating a Component With the CLI09:34
2.7Creating a Service With the CLI07:56
3.Core Concepts7 lessons, 55:20
3.1Component Trees06:20
3.2Dependency Injection06:52
3.3Content Projection05:38
3.4Component and Directive Lifecycle Methods06:31
3.5Component-Only Lifecycle Methods05:28
3.6Decorators07:36
3.7Models16:55
4.Template Deep Dive11 lessons, 1:10:56
4.1Basic Data Binding With Interpolation05:35
4.2Property Bindings07:07
4.3Attribute Bindings03:29
4.4Event Bindings08:16
4.5Class and Style Bindings05:44
4.6The `NgClass` and `NgStyle` Directives05:04
4.7The `*ngIf` Directive04:41
4.8The `*ngFor` Directive09:29
4.9Inputs05:33
4.10Using Pipes in a Template07:31
4.11Using Pipes in a Class08:27
5.Forms10 lessons, 1:45:41
5.1Handling User Input With Template Reference Variables07:06
5.2Template-Driven Forms11:10
5.3Template-Driven Forms: Validation and Submission14:00
5.4Reactive Forms11:26
5.5Using a `FormBuilder`08:01
5.6Reactive Validation With Built-in Validators14:53
5.7Creating Custom Validators for Template-Driven Forms12:18
5.8Creating Custom Validators for Reactive Forms08:26
5.9Observing Form State Changes12:40
5.10Working With the `@HostListener` Decorator05:41
6.Routing9 lessons, 1:15:10
6.1Defining and Configuring Routes07:53
6.2Rendering Components With Router Outlets10:14
6.3Using Router Links for Navigation05:25
6.4Navigating Routes Using the Router06:24
6.5Determining the Active Route Using an Activated Route07:16
6.6Working With Route Parameters10:42
6.7Using Route Guards07:36
6.8Observing Router Events10:55
6.9Adding Child Routes08:45
7.Using the HTTP Client5 lessons, 56:24
7.1Sending an HTTP Request10:52
7.2Handling an HTTP Response11:22
7.3Setting Request Headers12:33
7.4Intercepting Requests09:04
7.5Finishing the Example Application12:33
8.Testing10 lessons, 1:23:27
8.1Service Unit Test Preparation10:45
8.2Unit Testing Services13:24
8.3Component Unit Test Preparation12:35
8.4Unit Testing Components07:27
8.5Unit Testing Component Templates06:58
8.6Unit Testing Pipes04:41
8.7Unit Testing Directives04:56
8.8Unit Testing Validators04:48
8.9Unit Testing Observables11:37
8.10Unit Testing HTTP Interceptors06:16
9.Building for Production1 lesson, 03:40
9.1Building for Production03:40
10.Conclusion1 lesson, 01:32
10.1Conclusion01:32
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.