测试 Angular 组件中名为 subscribe 的方法

Question

如果我在组件中有以下删除方法

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent {
  this.heroes = [];

  constructor(private heroService: HeroService) { }

  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }
}

我如何在 Jasmine 中测试删除英雄方法在测试中调用了订阅。

这是一个测试，确保使用特定参数调用 deleteHero，但我不确定如何检查订阅。

// Interaction Test
it('should call deleteHero with the specificed argument', () => {
  // arrange
  mockHeroService.deleteHero.and.returnValue(of(true));
  component.heroes = HEROES;

  // act
  component.delete(HEROES[2]);

  // assert
  expect(mockHeroService.deleteHero).toHaveBeenCalledWith(HEROES[2]);
});

Answer 1

你将需要两名间谍：

it('should call deleteHero with the specificed argument', () => {
  const resMock = of(true);
  spyOn(resMock, 'subscribe'); // No need to .and since you do nothing after it
  mockHeroService.deleteHero.and.returnValue(resMock);
  component.heroes = HEROES;

  component.delete(HEROES[2]);

  expect(mockHeroService.deleteHero).toHaveBeenCalledWith(HEROES[2]);
  expect(resMock.subscribe).toHaveBeenCalledWith(); // check if no callback is given
});