Angular 2+ Promise 单元测试

Question

Hi I'm trying to write jasmine unit test for following angular service.

However, I'm struggling how to write test for return promise value and wasn't able to find any elaborate resource how to write for these cases.

Most struggle comes from not knowing how to test what has been called within the returned promise.

For example, I want to test calling this.createMap() invokes this._mapResolver with map instance new google.maps.Map(el, mapOptions)

Could an Angular 2+ guru help me understand writing spec for promises? or references to learn from?

declare let google: any;

/**
 * Wrapper class that handles the communication with the Google Maps Javascript
 * API v3
 */
@Injectable()
export class GoogleMapsAPIWrapper {
  private _map: Promise<mapTypes.GoogleMap>;
  private _mapResolver: (value?: mapTypes.GoogleMap) => void;

  constructor(private _loader: MapsAPILoader, private _zone: NgZone) {
    this._map =
      new Promise<mapTypes.GoogleMap>((resolve: () => void) => { this._mapResolver = resolve; });
  }

  createMap(el: HTMLElement, mapOptions: mapTypes.MapOptions): Promise<void> {
    return this._loader.load().then(() => {
      const map = new google.maps.Map(el, mapOptions);
      this._mapResolver(<mapTypes.GoogleMap>map);
      return;
    });
  }

  setMapOptions(options: mapTypes.MapOptions) {
    this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
  }
}

---

Solution suggested by @ArmenVardanyan

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

  const loaderServiceStub = {
    load: () => Promise.resolve()
  };

  let service;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        GoogleMapsAPIWrapper,
        {provide: MapsAPILoader, useValue: loaderServiceStub}
      ]
    });
  }));

  beforeEach(async(inject([GoogleMapsAPIWrapper], (_service: GoogleMapsAPIWrapper) => {
    service = _service;
  })));


  it('should be created',() => {
    expect(service).toBeTruthy();
  });

  it('should be call _mapResolver with specified arguments', async(() => {
    const elem = document.createElement('div');
    const spyOnCreateMap = spyOn(service, '_mapResolver');
    service.createMap(elem, {})
      .then(() => {
        expect(spyOnCreateMap).toHaveBeenCalled();
        expect(spyOnCreateMap).toHaveBeenCalledWith(new google.maps.Map(elem, {}));
      });
  }));

});

Answer 1

I don't remember how to correctly inject NgZone int tests, but as I see it is irrelevant to your question. So You just have to mock the MapsAPILoader service and test the _mapResolver .

 const loaderServiceStub = { load: () => Promise.resolve() }; describe('GoogleMapsAPIWrapper', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ GoogleMapsAPIWrapper, {provide: MapsAPILoader, useValue: loaderServiceStub} ] }); }); it('should be created', inject([GoogleMapsAPIWrapper], (service: GoogleMapsAPIWrapper) => { expect(service).toBeTruthy(); })); it('should be call _mapResolver with specified arguments', inject([GoogleMapsAPIWrapper], (service: GoogleMapsAPIWrapper) => { const spyOnCreateMap = spyOn(service, '_mapResolver'); service.createMap(new HTMLDivElement(), {/*options */}); expect(spyOnCreateMap).toHaveBeenCalled(); })); });

So you basically mock the loader service to just return a resolved Promise when load is called, and then check if _mapResolver has been called. But you cannot check if the arguments provided were correct, because of this lines:

const map = new google.maps.Map(el, mapOptions);
this._mapResolver(<mapTypes.GoogleMap>map);

There is a map being created inside the callback passed to the then method, but you cannot know what that object is going to be. You can try

expect(spyOnCreateMap).toHaveBeenCalledWith(new google.maps.Map(el, mapOptions));

but I'm almost sure it is not going to work. The same issue goes with the second Test you want to write: the _map promise will return an object which has a setOptions method, but you don't really know what that object is going to be. Or else you will have to mock that Promise either and then make sure your mocked setOptions method has been called.