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.5 Unit Testing Component Templates

In this lesson you'll learn how we can test the template part of a component as well as the class part. This will let us make sure that the template behaves in the way that it should and renders the data correctly.

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.5 Unit Testing Component Templates

Hi, folks. As we know, an angular component is more than just the class that backs it. It has a template as well, probably with numerous bindings and which changes what is displayed in response to user interaction. Is what is testing the class, we can and should also test that the template behaves in the way that we expect. So we already a spec file for the game component and we added a few tests to it in the last lesson. Let's add some more tests now for the template. So one of the things the template does is render the total score of the cards in the player's hand and let's just scroll down, and we can see that the template for the game component has been rendered. So it should be pretty easy to test the rendering of the game component, seeing as it is being rendered in the test. So let's add a describe for all of our template tests. So we can keep all of the template tests in their own describe just to keep the test file nice and organized. With a bigger template or a more complex class, we could split the class tests and template tests into their own files. But to keep things simple, let's just keep them in the same file here. So now, let's test the score first of all. We know already that the fixture variable contains the test harness and that provides tools to make testing easier. One of the things it does is provide access to the dome elements within the template and we can use these to inspect the elements, and check that they contain the right elements or additional dome structures. So first of all then, let's get the player's score. We already initialized the dealer and the player earlier in the course and we did that in that game component file, so we know that the player is the second item in the player's array. So we can just reach into the player service and get the score of the player. So next, we want to get the element from the component which displays the score. We can bring in another angular utility to help with this. The by class allows us to easily select elements from the page using either a CSS selector or a directive. We can use it to select the rendered element from the page using CSS. So we can get the elements which the score is rendered into and we do that using that using the debug element property of the fixture, and that has a method on it called query. So we can pass in a query and that will return an element from the templates. And in this case, the query is a CSS query which we can get using the by class that we imported and we can just pass that a CSS selector that matches the element that we want to get from the page. And then to actually get the inner DOM element, we can use the native element property. So we should now have access to the element that contains the players score in in the template. The paragraph that we've selected which should be within the school element variable now doesn't just contain the actual school, it also includes some text. So we'll need to clean this up and parse it into a number And now, we can test the score that we've extracted from the component is the same as the score of the player. Let's see what the output of this test is and we can see that the test is passed. Another thing that the component does is display the cards in the player's hand. We can also test for this in a similar way. So we do a similar kind of thing as we did before. We get the element that contains the text that we want to test and then we can test that the text has the value that we expect. So in this case, each rendered card on the screen should have text content which says either the queen of hearts or the nine of spades or something like that. So it will say either the name or the value of the card and then the suit of the card. So we can just get both of the cards that have been rendered on the screen and check their text content. So let's save this now and go back to the browser and we can see that this passes too. So we're quite confident now that the template is being rendered in the way that we expect. So in this lesson, we saw how we can add unit tests for a component's template in order to test that the correct things are being displayed when the user interacts with the page. We saw how we can use the fixture API to query the rended content for different elements and how we can use these to check that the correct data has been rended. Thanks for watching.

Back to the top