测试HttpInterceptor Angular 10时出错

时间:2020-10-19 22:46:09

标签: angular typescript testing angular-httpclient angular-httpclient-interceptors

我正在使用Angular 10应用程序,该应用程序使用HttpInterceptor向所有响应添加特定的标头。不幸的是,在尝试测试此拦截器时,我不断收到以下错误:

Error: Expected one matching request for criteria "Match by function: ", found none.

或类似的变体:

Error: Expected one matching request for criteria "Match URL: /endpoint", found none.

我的期望是该测试会通过,但现在我不知道为什么它不起作用。

这是我的拦截器:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private kc: KeycloakService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return Observable.fromPromise(this.kc.getToken()).mergeMap(auth => {
            if (auth) {
                req = req.clone({
                    setHeaders: {
                        Token: auth
                    }
                });
            }

            return next.handle(req);
        })
    }
}

这是我的考试:

// imports removed for clarity

describe('Interceptor', () => {
    let http: HttpClient;
    let httpController: HttpTestingController;
    let mockKeycloakService: KeycloakService;
    let interceptor: AuthInterceptor;

    const TEST_TOKEN = 'test-token';

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [
                KeycloakService,
                {
                    provide: HTTP_INTERCEPTORS,
                    useClass: AuthInterceptor,
                    multi: true
                }
            ],
        });

        http = TestBed.inject(HttpClient);
        httpController = TestBed.inject(HttpTestingController);
        mockKeycloakService = TestBed.inject(KeycloakService);

        spyOn(mockKeycloakService, 'getToken').and.returnValue(new Promise<string>(() => TEST_TOKEN));

        interceptor = new AuthInterceptor(mockService);
    });

    // removed for clarity

    it('adds token to all responses', done => {
        let endpoint = '/endpoint';
        http.get<HttpResponse<any>>(endpoint).subscribe(res => {
            expect(res).toBeTruthy();
            expect(res.headers).toBeTruthy();
            expect(res.headers.get('Token')).toBe(TEST_TOKEN);
        });
        let req = httpController.expectOne(endpoint);

        // The first error occurred when I tried this:
        // let req = httpController.expectOne(res => res.headers.has('Token') && res.headers.get('Token') === TEST_TOKEN);

        let body = { test: 'test-value' };
        console.log(`The URL is: ${req.request.url}`);
        expect(req.request.body).toEqual(body);

        req.flush(body);
        httpController.verify();
    });

    // removed for clarity
});

也就是说,可能值得指出的是,我尝试了以下资源的解决方案,但无济于事(大多数似乎都与我已经拥有的资源相似,而且许多似乎是针对较旧版本的Angular): / p>

  • Unit testing HttpInterceptor from Angular 4: 在这里,我发现了一个有用的article,几乎可以满足我的需要,但实际上不适用于我的情况(我遇到了以上错误)。我之所以说几乎,恰恰是因为据我所知,我用来获取令牌的服务实际上并未使用HttpClient
  • This与我的问题不完全相同,但足以尝试。我尝试使用教科书所描述的解决方法,但是显然这还不足以解决我遇到的问题。
  • 我还尝试在测试中使用spyOn函数http.get(...),该函数消除了上述错误,但是在执行此操作时并未调用我的intercept函数。
  • li>

非常感谢您的帮助-谢谢!

0 个答案:

没有答案