无法使用Karma和Jasmine测试角度HTTP拦截器

时间:2018-06-26 16:07:14

标签: angular unit-testing typescript ionic3 karma-jasmine

我正在尝试测试http拦截器,但找不到任何方法。

我不知道为什么网址不匹配,因为我的令牌已登录到控制台,并且请求网址也相同。我使用此方法在没有拦截器的情况下测试了所有其他http服务,一切都通过了……

这里是拦截器类,代码可以正常工作,并在每个请求中添加我的不记名令牌,它使用在测试中模拟的Ionic Platform本机类:

@Injectable()
export class AddHeaderInterceptor implements HttpInterceptor {

  public constructor(
      private auth: AuthService, private platform: Platform, 
      private config: ConfigurationService
  ) {}

  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.debug('req', req.url);
    return Observable.fromPromise(this.platform.ready())
      .switchMap(() => Observable.fromPromise(this.auth.getToken()))
      .switchMap((tokens: TokenCacheItem[]) => {
        const baseUrl = new RegExp(this.config.getValue('baseUrl'), 'g');
        if (! req.url.match(baseUrl)) {
          return Observable.of(null);
        }
        if (tokens.length > 0) {
          return Observable.of(tokens[0].accessToken);
        }
        return Observable.throw(null);
      })
      .switchMap((token: string) => {
        console.debug('token', token);
        if (!token || token === null) {
          return next.handle(req);
        }
        const headers = req.headers
          .set('Authorization', `Bearer ${token}`)
          .append('Content-Type', 'application/json');
        const clonedRequest = req.clone({ headers });
        return next.handle(clonedRequest);
    });
  }
}

令牌已登录到业力控制台,我还检查了URL并始终拥有正确的URL,但测试失败。

这是我的身份验证服务模拟:

export class AuthServiceMock {
  getToken() {
    return Promise.resolve([
      { accessToken: 'TEST' }
    ]);
  }
}

平台模拟:

export class PlatformMock {
  public ready(): Promise<string> {
    return Promise.resolve('READY');
  }
}

这是测试:

describe('AddHeaderInterceptor Service', () => {

  let http: HttpTestingController;
  let httpClient: HttpClient;
  let auth: AuthService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        ConfigurationService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AddHeaderInterceptor,
          multi: true,
        },
        { provide: Platform, useClass: PlatformMock },
        { provide: LogService, useClass: LogServiceMock },
        { provide: AuthService, useClass: AuthServiceMock }
      ],
    });
    http = TestBed.get(HttpTestingController);
    httpClient = TestBed.get(HttpClient);
    auth = TestBed.get(AuthService);
  });

  it('should add Auth header to request', () => {
    httpClient.get('/test').subscribe(res => expect(res).toBeTruthy());
    const req = http.expectOne({ method: 'GET' });
    expect(req.request.url.includes('test')).toBeTruthy();
    expect(req.request.headers.has('Authorization')).toBeTruthy();
    expect(req.request.headers.get('Authorization')).toEqual('Bearer TEST');
    req.flush({
      hello: 'world'
    });
  });
});

我总是遇到相同的错误:

  

错误:预期对标准“匹配方法:GET,URL :(任意)”的一个匹配请求,找不到任何内容。

看起来请求从未启动,我试图创建一个类实例并直接调用拦截方法,但我已经遇到了相同的错误。 我试图从auth服务中窥探getToken方法,但从未被使用过。 所以我不知道为什么失败。

我尝试用另一个URL调用另一个服务,但仍然出现相同的错误。

我尝试对http.expectOne('http://localhost:8080/test')使用绝对或相对URL,但仍然相同:

  

预期对标准“匹配网址:   http://localhost:8080/test”,找不到任何内容。

有人有主意吗?

2 个答案:

答案 0 :(得分:3)

我找到了使用业力完成功能并直接构造Addheader对象的解决方案:

fdescribe('AddHeaderInterceptor Service', () => {

  let http: HttpTestingController;
  let httpClient: HttpClient;
  let auth: AuthService;
  let logger: LogService;
  let config: ConfigurationService;
  let platform: Platform;
  let interceptor: AddHeaderInterceptor;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        ConfigurationService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AddHeaderInterceptor,
          multi: true,
        },
        { provide: Platform, useClass: PlatformMocked },
        { provide: LogService, useClass: LogServiceMock },
        { provide: AuthService, useClass: AuthServiceMock }
      ],
    });
    config = TestBed.get(ConfigurationService);
    auth = TestBed.get(AuthService);
    logger = TestBed.get(LogService);
    platform = TestBed.get(Platform);
    httpClient = TestBed.get(HttpClient);
    http = TestBed.get(HttpTestingController);
    interceptor = new AddHeaderInterceptor(logger, auth, platform, config);
  });

  fit('should add header to request', (done) => {
    expect((interceptor as any) instanceof AddHeaderInterceptor).toBeTruthy();
    const next: any = {
      handle: (request: HttpRequest<any>) => {
        expect(request.headers.has('Authorization')).toBeTruthy();
        expect(request.headers.get('Authorization')).toEqual('Bearer TESTO');
        return Observable.of({ hello: 'world' });
      }
    };
    const req = new HttpRequest<any>('GET', config.getValue('baseUrl') + 'test');
    interceptor.intercept(req, next).subscribe(obj => done());
  });

});

答案 1 :(得分:1)

当我在拦截器中开始使用相同的fromPromise-> switchMap模式时,我遇到了相同的情况。这似乎导致测试出现问题(尽管代码似乎可以正常工作)。没有承诺的呼吁,它就可以正常工作。

不知道为什么-但是您的测试解决方案对我有用。谢谢!