Angular 2模拟调用另一个服务的异步服务

Question

I'm learning Angular 2 testing (Karma, Jasmine). I already have a working test for an HTTP service, largely pulled from this Semaphore tutorial on services and testing . I have the test working right through the usual async(inject([MyService], ...

My actual program has a service wrapped in a service, as below.

@Injectable()
export class GlobalsService {
  private options: Option[] = [];
  error: any;

  constructor(private optionService: OptionService) { }

  public getGlobals(): void {
    let that = this;
    this.optionService
      .getOptions()
      .then(options => that.fillOptions(options))
      .catch(error => that.error = error);
  }
  [SNIP]

The optionService.getOptions() returns a Promise which is waited for, then fills the globalService.options list. The globalsService.getGlobals() is called either synchronously or in a place where the asynchronous (delayed) fill of its contents are hidden.

export class AppComponent implements OnInit {
  constructor(private globalsService: GlobalsService) { }

  ngOnInit() {
    this.globalsService.getGlobals();
  }
  [SNIP]

What I'm stuck at is how to call globalsService.getGlobals() in a testing context. I think I'm supposed to call it through async().

So far my mock OptionService is:

@Injectable()
export class MockOptionService {
  constructor() { }

  getOptions(): Promise<Option[]> {
    let options: Option[] = [
      { id: 'NY' } // truncated property list
    ];
    return Promise.resolve(options);
  }

}

I then am planning to call it through:

  it('should get Option objects async',
    async(inject([GlobalsService, MockOptionService], (globalsService: GlobalsService, optionService: OptionService) => {

      globalsService.getGlobals()
        .then(() => {
          expect(globalsService.getOptions().length).toBe(1);
        });      

However, my "smart" programmers editor (SublimeText) says that "Property 'then' does not exist on type 'void'.", leaving me unsure if I should have async(inject or just use a tick().

Comments, anyone?

Thanks, Jerome.

Answer 1

Try this !

it('should get Option objects async',
async(inject([GlobalsService, MockOptionService], (globalsService: GlobalsService, optionService: OptionService) => {

  globalsService.getGlobals()
    .do(value => {
      expect(value.length).toBe(1);
    }).toPromise(); 
})));

Answer 2

After fiddling around and more research I figured two things: * My test is wrong. globalsService.getGlobals() returns void. The .then, or .do, are correct in saying "property does not exist".

What I changed to make the test work is adding a setup clause, changing async(inject( to fakeAsync(inject( and to fixup the injections and declarations. Here is what works:

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

  beforeEach(() => {

    TestBed.configureTestingModule({
      providers: [
        { provide: OptionService, useClass: MockOptionService },
        { provide: GlobalsService, useClass: GlobalsService }
      ]
    });
  });

  fakeAsync(inject([GlobalsService, OptionService], (globalsService: GlobalsService,  optionService: OptionService) => {
      globalsService.getGlobals();
      tick();
      expect(globalsService.getOptions().length).toBe(1);
    })));

});

Thanks all for looking, and to Nidhin for replying. Now I work on my error() handling -- that is reporting a null error variable in handleError(). But that is for a different support call.

Jerome.