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.10 Unit Testing HTTP Interceptors

In the last lesson of this section, I'll show you how to unit test a custom HTTP interceptor.

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.10 Unit Testing HTTP Interceptors

Hi folks, in this lesson we're going to see how we can unit test HTTP interceptors. These might seem quite complex and hard to test. But like services, pipes, and a number of other Angular constructs, really they're just classes. When we created the HTTP interceptor that the application uses, we created it manually, so we don't have a spec file yet. First of all, we'll need to create the spec file manually. We can then get it side by side with the actual interceptor. So, first of all, we'll need to import the interceptor so that we can test it. And we will also want to bring the HttpRequest class from Angular. So now we can get started with the test. Let's add the outer describe, first of all. And we'll fdescribe it so that only these tests will run. So, first of all, we'll need to create a new instance of the interceptor. So now we can use the interceptor instance in the interceptor variable to perform our tests. So now let's add an it method. Let's think about what the test is going to do. So the code adds an x requested with header to the request. So we want to check that, that header does get added. So our interceptor is pretty straightforward, it just adds a single header to the request. So we should need to only add this one test for it. So, first, let's create a variable to store the modified request in. A create a fake request and a fake next method to pass to the interceptor. The fakeRequest needs to be an instance of Angular's HttpRequest class because there are some methods that we'll want to make us of with our assertions. We'll come onto these in just a moment. The fakeNext variable that we've created is just an object that has a handle method. This is just like the next that gets passed into the intercept method when Angular invokes our HTTP interceptor. And we use Jasmine's createSpy method once again to create a spy. And this time we want to call a fake function. And that fake function will get called and passed the request. And we want to save that request in the modified request variable that we created right at the start. So now we can invoke the interceptor and make some assertions So all interceptors have an intercept method. And the request and next objects get passed to this. So when we invoke the intercept method, we can pass in our fakeRequest and fakeNext objects that we created. So now let's make some assertions. So, first, we can just check that the handle method of the object that we passed in for the next parameter does get called. So next, we want to check that the modified request object does have a header called X-Requested-With. And we can use the has method of the header's object within the modified request, which Angular will add. That's why the fakeRequest need to be an actual HTTP request and not just some fake object that we create ourselves. And lastly, we just want to check that the value of the X-Requested-With header is the value that we expect. And this time we use the GET method of the header's object to actually get the value of the header. And actually, on that second assertion, we need to check that the has method returns true. Okay, so let's go back to the browser now. And we can see that the last expectation is failing because it's actually Angular woot with an exclamation mark, rather than just Angular woot. And the test now passes. So, in this lesson we saw how easy it is to write unit test for an HTTP interceptor. We saw that as all interceptors have an intercept method, we just need to create an instance of the interceptor. And we can then invoke this intercept method in order to test what it does. We also saw how we can fake the different arguments that the intercept method expects. And how to test the request has been modified in the correct way. Thanks for watching.

Back to the top