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.7 Unit Testing Directives

In this lesson you'll learn how to add unit tests for a custom directive that we have created ourselves.

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.7 Unit Testing Directives

Hi folks, in this lesson we're going to see how we can test directives, using the directive that we used earlier in the course which is used to check the Be Human player of the game hasn't try to use the name Dealer. As we created the directive using the CLI we should already have the spec for our ready. So let's open up the directive that we're testing and the spec file and get them arranged on screen side by side. And let's F describe the existing test. And let's just check that the test runs without us needing to fix anything up. Good, okay. So the directive test is already running, we don't need to do anything special to make the tests work. So we can jump straight into testing the directive. In the example test you can see that the directive that we want to test is new-ed up. So we get a new instance of the directive inside the test. We're gonna want that for all of our tests so let's just do that at the top of the describe Just like we did with the pipe in the last lesson. Okay, so let's update the tests now, so that we can test what the directive actually does. What does the validate method of the directive do? It returns null if the value of the control is not dealer. That's the easiest thing to test. Let's start with that. So we'll invoke the validate method of the directive, because this directive is also a validater and it exposes a validate method. But the methods requires that we pass in an instance of an abstract control. So we can't just pass any old thing into the method when we invoke it. We'll need to create a form control for the tests. And for that we'll need to import the form control class from Angular. So now in the test, we can create a control, set its value and pass it to the validate method of the directive So we create a new control using the phone control constructor. And we can then set the value of that control using the set value method. We can then pass the control to the validate method of the directive and store the return in the result variable and we can then check that the result variable contains the value no. So let's go to the browser, and see if it works. And we can see that it does. So now we need to test that an object is returned with an appropriate error message if the name is dealer. And it shouldn't matter if the string is lowercase. So we just need to update the assertion part of the test now. To be fair, the test isn't that much more complex than the first. It's just that we check a little more in the assertion. But that's basically it. We tested the directive to the Macs, and there is nothing much more we can do here. Let's just check the test is passing. And we can see that both tests are passing, so both the success and fail conditions of the validate method are both thoroughly tested. So in this lesson, we saw how easy it is to unit test a directive. We simply create a new instance of the directive, and in this case we then invoke its validate method parsing in the required arguments to test that the return value is expected under different conditions. Of course, not all directives are validators. In this case we would still create an instance of the directive, we just invoke different methods on it, depending on what the directive actually did. Thanks for watching.

Back to the top