7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • 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.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01: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.

Back to the top