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.8 Unit Testing Validators

In this lesson I'll show you how to test a custom validator.

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.8 Unit Testing Validators

Hi Folks. In this lesson we can take a look at unit testing validators. Validators are another generally small self-contained bit of an angular application, usually with a single purpose. This makes them very easy to test. We do have a validator that we added to the application, the not all caps validator, which validates the value of the form control is not entirely uppercase. We created this file ourselves manually, so we'll need to create the spec file ourselves, manually, too. Let's do that first of all. So we have an _validators directory. This contains the validator. So this is where we'll be adding the spec file. So let's deal with the imports. First of all, we'll need to bring in the formControl class from angular, because the validator validates a form control. And we'll also need to import the validator itself so that we can test it. So now let's add an outer describe. And we've fdescribed it, so that only the tests inside this describe method will run. The validator itself is a function, but it doesn't actually return a value. Instead, it returns another function, and it is this function that is invoked to perform the actual validation. We'll need to invoke the function and keep a reference to the return function so that we can invoke it in our tests. We should probably do this in a beforeEach. Okay, so now let's add a test. So, what does the validator actually do? Well, let's test the null return first of all, because again that's the esiest thing to test. So for this test, we're going to need to create a new form control instance and set its value to a lowercase string. So we create a new FormControl instance. We use the setValue method to set it's value to a lowercase string, we then pass this control to the function returned by the validator, and we then assert that the result is null. So let's check whether the test runs and passes, and we can see that it does. So now we need to test the opposite condition. The validator function should return an object containing an error message if the value of the control is entirely uppercase So this time we set the value of the control to an uppercase string, and this time in the assertion we are checking that the result equals an object that has a key called notAllCaps, and that the value of that key is a string that says 'No shouting please'. So let's go back to the browser. And we can see that the second test is passing as well. So in this lesson, we saw how easy it is to unit test validators in angular. Validators are usually small and self-contained, and this makes them very easy to test. Validators do generally follow a very similar pattern, returning a function, which actually performs the validation, when it's passed to form control. We saw that to test a validator we just need to get a reference to the function it returns, invoke the function with a form control, and then check the value that gets returned by the validator function. Thanks for watching.

Back to the top