Learn Front-End Development and Automated Testing with Angular/

...

/

Unit Tests for Interceptor

Unit Tests for Interceptor

Let's write unit tests for auth interceptor.

We'll cover the following...

Let’s add our Auth Interceptor’s component-level tests. Here is our updated code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Updated auth interceptor code

Before we test the interceptor, add the interceptor to AppModule. While our interceptor is still a service, it’s different in many ways, and implementing it and adding it to our app before testing it may improve the test’s clarity.

  1. Update the imports by importing both HTTP_INTERCEPTORS and our new AuthInterceptorService.
Press + to interact
// src/app/app.module.ts
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptorService } from './interceptors/auth-interceptor.service';
  1. Update the providers adding our interceptor.
Press + to interact
// src/app/app.module.ts
providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptorService,
    multi: true
  }
]

Remember in the previous lesson, when we removed the providedIn property in the @Injectable decorator of our interceptor? We did that to manually provide the interceptor here instead.

Interceptors in Angular are optional dependencies of HttpClient and, because of that, we must ...