Problem with unit testing and mocking API call

Help Requests
1

I’m trying to create a unit test case using Karma and Jasmine. I’m using jasmine-ajax to stub out the API request with a fake response. But the problem I have is that the unit test throws an error saying “TypeError: aurelia_pal__WEBPACK_IMPORTED_MODULE_1__.DOM.createCustomEvent is not a function”.

The unit test:

import { SystemInfo } from './../../src/common/models/system-info';
import { InfoPresentation } from "applications/info_presentation/info-presentation";

describe('Info presentation:', () => {
  let _infoPresentationViewModel: InfoPresentation;

  beforeEach(() => {
    jasmine.Ajax.install();
    _infoPresentationViewModel = new InfoPresentation();
  })

  afterEach(() => {
    jasmine.Ajax.uninstall();
  })

  describe('when the info is retrieved', () => {
    let _expectedValue: Collections.Set<SystemInfo>;

    beforeEach(() => {
      jasmine.Ajax.stubRequest('https://someurl/api/info').andReturn({
        status: 200,
        responseText: '[{"id":1, "infoText": "Updated"}]'
      });

      _expectedValue = new Collections.Set<SystemInfo>();
      _expectedValue.add(Object.assign(new SystemInfo(), {
        id: 1,
        infoText: "Updated",
      }));
    })

    it('then should be presented on the page', () => {
       _infoPresentationViewModel.startRetrievingSystemInfos();
 
      expect(_infoPresentationViewModel.SystemInfos).toEqual(_expectedValue);
    })
  })
})

The view model:

import * as Collections from 'typescript-collections';
import { SystemInfo } from 'common/models/system-info';
import { HttpClient } from 'aurelia-http-client';

export class InfoPresentation {
  SystemInfos: Collections.Set<SystemInfo>;
  private _http: HttpClient;

  constructor() {
    this._http = new HttpClient().configure(config => {
      config.withHeader('Content-Type', 'application/json')
    });
  }

  attached() {
    this.startRetrievingSystemInfos();
  }
  
  public startRetrievingSystemInfos() {
    this._http.get('https://someurl/api/info')
    .then(result => {
      console.log(result);
    })
    .catch(error => {
      console.log(error);
    })
  }
}

Any ideas what is the problem?

1 Like
2

Aurelia platform initialization code needs to run first in order to have the references in DOM, PLATFORM object populated.

For your scenario, probably do

import { initialize } from 'aurelia-pal-browser';

initialize();

... your test code
3

Well now it no longer throws an error but the request never seems to be handled by jasmine-ajax because nothing will be logged.
Also I added the following line to my it function:

expect(jasmine.Ajax.requests.mostRecent().url).toBe('https://someurl/api/info');

But this will only result in the following:

TypeError: jasmine.Ajax.requests.mostRecent(…) is undefined

However if I replace the code in startRetrievingSystemInfos with a regular XMLHttpRequest it will work as expected. Is aurelia-http-client not using XMLHttpRequest under the hood? Or am I still missing something?