如何对 Angular 拦截器进行单元测试答案

【问题标题】：How to unit test Angular Interceptor如何对 Angular 拦截器进行单元测试
【发布时间】：2020-05-10 02:05:12
【问题描述】：

我一直在寻找测试 Angular 拦截器代码以进行错误处理的方法，但我似乎无法弄清楚如何。

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService, private router: Router) { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError(err => {

            let errorMessage = '';
            if(err instanceof HttpErrorResponse) { // server side error
                                
                switch (err.status) {
                    case 401:  
                        // auto logout if 401 response returned from api                          
                        errorMessage = "Ongeldige inloggegevens"  
                        break;          
                    case 500:     //server error
                        errorMessage = `Error Status: ${err.status}\nMessage: ${err.message}`;
                        this.router.navigate([`/code500`]);
                        break;
            }

            return throwError(errorMessage);
        }
    }
  ))
}
}

【问题讨论】：

标签： angular unit-testing angular-http-interceptors

【解决方案1】：

试试这样的，希望对你有帮助。

import { HttpErrorResponse} from '@angular/common/http';
import { ErrorInterceptor} from './ErrorInterceptor';
import { of } from 'rxjs';
import { take } from 'rxjs/operators';
import { HttpErrorResponse} from '@angular/common/http';
import { AuthenticationService} from '....';

describe('ErrorInterceptor', () => {
   let interceptor: ErrorInterceptor;
   let mockAuthenticationService: AuthenticationService;
    beforeEach(() => {
            mockAuthenticationService = {
                logout: jasmine.createSpy('logout')
            };
            mockRouter = {
                navigate: jasmine.createSpy('navigate')
            };
       interceptor = new ErrorInterceptor(mockAuthenticationService as any, mockRouter as any);
    });


    describe('intercept', () => {
        beforeEach(() => {
            const payload = {
                    statue: 401
                },
                response = new HttpErrorResponse(payload),
                next: any = {
                    handle: jasmine.createSpy('handle').and.callFake(() => of(response))
                };

            interceptor.intercept(response as any, next).pipe(take(1))
              .subscribe();
        });


    describe('when status is 401', () => {
        it('should logout',() => {                 

       expect(mockAuthenticationService.logout).toHaveBeenCalled();
       expect(mockRouter.navigate).toHaveBeenCalledWith([`\logout`]);
        });

    });
   ...
});

【讨论】：