Карма жасмин не издевайся над методом обслуживания после смены обещания

Question

У меня есть компонент, который вызывает сервисный метод.Когда сервисный метод возвратил наблюдаемое, он работал отлично, но когда я изменил его на обещание, тест начал проваливаться.

Изменение в тесте было:

Работа:

Тест:

const getPackListSpy = ppackService.listPacks.and.returnValue( of(packListResult) );

it('should show pack list', fakeAsync(() => {
      fixture.detectChanges();
      tick(5000);
      fixture.detectChanges();
      const packsInView = fixture.nativeElement.querySelectorAll('.packName').length;

      expect(packsInView).toBe(2);
    }));

Компонент:

this.protocolPackService.listPacks()
      .subscribe((packs) => {
        this.packs = packs;
      });

Не работает после перехода к обещанию:

Тест:

const getPackListSpy = ppackService.listPacks.and.returnValue( Promise.resolve(packListResult) );

Компонент:

this.packs = await this.protocolPackService.listPacks();

Проблема заключается в том, что в моем списке элементов в шаблоне не отображаются никакие данные (основанные на this.packs) после изменения наPromise.Компонент отлично работает в обоих случаях вне тестовой среды.

Есть идеи, что могло пойти не так?

Код компонента:

ngOnInit() {
    this.getUploadedPacks();
 }

  async getUploadedPacks() {
    const packs = await this.protocolPackService.listPacks();
    this.packs = [{
      name: 'pack'
     }];
    this.packs = this.packs.concat(packs);
   }

Сервис:

listPacks(): Promise<any> {
    return this.http.get('packs').toPromise();
  }

Answer 1

Вы должны использовать некоторые методы для тестирования асинхронного кода, например fakeAsync/tick из угловой библиотеки тестирования:

it('should show items', fakeAsync(() => {
  const { comp, el, fixture } = setup();

  fixture.detectChanges();
  tick(1000);
  fixture.detectChanges();

  expect(comp.packs.length).toBe(2);
}));

Проверьте это живое демо на stackblitz.

p.s. Дело в том, что если вы смоделируете свой сервисный метод с помощью оператора rxjs of, он будет действовать как код синхронизации, например:

console.log(1);
of(2).subscribe(v => console.log(v));
console.log(3);

Этот код будет console.log: 1, 2, 3.

Но когда вы используете Promise, он будет действовать как асинхронный код, например:

console.log(1);
Promise.resolve(2).then(v => console.log(v));
console.log(3);

Этот код будет console.log: 1, 3, 2.

Вот почему в случае использования Promises для насмешки над вашим методом обслуживания вы должны писать модульные тесты, имея в виду, что вы имеете дело с асинхронным кодом.