HttpHeaders and lazyupdate Angular 4 and Karma

Question

I have a problem with HttpHeaders (angular 4.3.0) and Karma. I write some tests and when I run them with npm test command, the http queries are unauthorized because the token (X-Auth-Token) is not set. when I run the same part in my browser with the console, the X-Auth-Token is set and everything works well.

The only difference I can see is in the HttpHeaders object and precisely in lazyUpdate.

no test mode

With karma

The code :

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 extends it, category service has no specific code)

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;
  }

}

Somebody could explain this ?

Hackamore

can you post the http code? – Almoner

I edited my post – Hackamore

Anyone ? I'm still stuck :( – Hackamore

It's odd the Accept-Language header is undefined (in lazyUpdate) & doesn't show up in headers. I wonder if this has anything to do with localStorage & Karma. What happens if you remove the x-auth-token? – Almoner

Hi @Joe Allen, I know this has been a while ago. Did you find the solution? I am having similar difficulty with other headers. Cheers – Turbofan

I just had the same problem. For me it was the ´Accept-Language´ header being undefined during tests. My translation service in the interceptor was not mocked correctly. When this header has a value the request headers are all there in tests. – Heiskell

Answer 1

I had a similar problem while testing an interceptor which was setting some request headers. What I was doing wrong during the test was not setting one of the headers (leaving it undefined) - I haven't looked that deep into the Angular code but this seems to leave out the 'lazyInit' property set to null which in place will stop triggering the 'init' call (that basically sets the headers):

    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;
            }
        }
    };

There's an issue on github which refers to this. See this comment.

Schoolgirl