HttpHeaders and lazyupdate Angular 4 and Karma

Question

我在使用HttpHeaders (angular 4.3.0)和Karma时出现问题。我编写了一些测试，当我使用npm test 命令运行它们时，http请求未被授权，因为token（X-Auth-Token）未设置。但是当我在浏览器中使用控制台运行同样的代码时，X-Auth-Token已经设置，一切都正常工作。

我唯一能看到的区别就是HttpHeaders对象，具体地说是lazyUpdate。

非测试模式

Karma模式

代码：

category.service.spec.ts

    describe('Service : Category', () => {

  // setup
  beforeEach(() => TestBed.configureTestingModule({
      imports: [ HttpClientModule, LocalStorageModule.withConfig(localStorageConfig), TranslateModule.forRoot({
        loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
      })],
      providers: [CategoryService, LoaderService, LocalStorageService
      ]
    }));


    it('should list the categories', () => {

        let categoryService = TestBed.get(CategoryService);

        categoryService.apiRoutes = ApiCategoryRoutes;
        categoryService.modelName = "category";

        let actualCategories = [];

        // categoryService expends APIResolverService
        let observable = categoryService.find(); 

        observable.subscribe(data => {

            actualCategories = data;
        });

        console.log("actualCategories");
        console.log(actualCategories);

    });

 });

apiResolver.service.ts（categoryService 扩展自它，category service 没有特定的代码）

export abstract class APIResolverService {

...

  public find() {

      this.showLoader();

      let url = this.getUrl(0, true);

      let headers = this.setHttpHeaders(); 

      console.log("headers");
      console.log(headers);

      let observable = this.http.get(url, {headers : headers})
      .map(res => this.manageResponse(res, true, true)).share();

      observable.subscribe(data => this.hideLoader(), error => this.hideLoader());

      return observable;
  }

  ...

    public setHttpHeaders(){

      let valueToken: string = JSON.stringify(this.localStorage.get('token'));

      let myHeaders = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Accept', 'application/json')
      .set('Accept-Language', "en")
      .set('X-Auth-Token', valueToken.replace(/['"]+/g, ''));

      return myHeaders;
  }

}

有人能解释一下这个吗？

- Joe Allen

---

你能发布一下HTTP代码吗？ - LLai

我编辑了我的帖子。 - Joe Allen

有人吗？我还是卡住了 :( - Joe Allen

Accept-Language 头在 lazyUpdate 中未定义且不显示在标头中，这很奇怪。我想知道这是否与 localStorage 和 Karma 有关。如果删除 x-auth-token 会发生什么？ - LLai

嗨@Joe Allen，我知道这是一段时间以前的事了。你找到解决方案了吗？我在处理其他标题时也遇到了类似的困难。干杯 - Witold Kaczurba

我刚遇到了同样的问题。对我来说，测试期间 'Accept-Language' 头未定义。我的拦截器中的翻译服务没有正确地被模拟。当这个头有一个值时，请求头在测试中都存在。 - Rocco

Answer 1

在测试设置某些请求头的拦截器时，我遇到了类似的问题。在测试过程中，我的错误是没有设置其中一个标头（将其保留为未定义）- 我还没有深入研究 Angular 代码，但这似乎会导致省略设置为null的“lazyInit”属性，从而停止触发“init”调用（这基本上是设置标头的过程）:

    HttpHeaders.prototype.init = function () {
        var _this = this;
        if (!!this.lazyInit) {
            if (this.lazyInit instanceof HttpHeaders) {
                this.copyFrom(this.lazyInit);
            }
            else {
                this.lazyInit();
            }
            this.lazyInit = null;
            if (!!this.lazyUpdate) {
                this.lazyUpdate.forEach(function (update) { return _this.applyUpdate(update); });
                this.lazyUpdate = null;
            }
        }
    };

在 GitHub 上有一个问题与此相关。请参见this评论。

- Andrei Roba