永远不会在带有单元测试 angular + jasmine 和 SpyOn 的 switchMap 中调用函数答案

【问题标题】：Function is never called inside a switchMap with unit test angular + jasmine and SpyOn永远不会在带有单元测试 angular + jasmine 和 SpyOn 的 switchMap 中调用函数
【发布时间】：2019-02-24 00:53:06
【问题描述】：

我正在尝试进行测试以了解是否调用了服务的函数，但它总是返回我未调用的函数。我不知道我做错了什么。我想知道的函数是否在switchMap中被调用，这个函数是一个服务。 (this.heroSearchService.search(term))

这是显示Expected spy search to have been called.的消息

这是我的组件。

export class HeroSearchComponent implements OnInit {
  heroes: Observable<Hero[]>;
  private searchTerms = new Subject<string>();

  constructor(
    private heroSearchService: HeroSearchService
  ) {}

  search(term: string): void {
    // Push a search term into the observable stream.
    this.searchTerms.next(term);
  }

  ngOnInit(): void {    
    this.heroes = this.searchTerms.pipe(
      debounceTime(300), // wait for 300ms pause in events
      distinctUntilChanged(), // ignore if next search term is same as previous
      switchMap(term => term ? this.heroSearchService.search(term) : of<Hero[]>([])),
      catchError(error => {
        // TODO: real error handling
        console.log(`Error in component ... ${error}`);
        return of<Hero[]>([]);
      })
    );    
  }
}

这是我的模拟服务。

export const MockHeroSearchService = {
    search: (term: string): Observable<Array<Hero>> => {
        let heroes = defaultHeroes.filter(hero => hero.name.includes(term)) as Array<Hero>;
        return of(heroes);
    }
}

这是我的测试文件。在此文件中，这是我创建间谍 (spyOn(heroSearchService, 'search').and.callThrough();) 的测试，失败的期望是 expect(heroSearchService.search).toHaveBeenCalled();

beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [CommonModule, HttpClientTestingModule, RouterTestingModule, FormsModule], //If our component uses routing, httpclient
            declarations: [HeroSearchComponent], //Here we put all the components that use our component. 
            providers: [
                //Here we can inject the dependencies that our component needs.
                //If our dependecies are services, we can create a simulated service.
                { provide: HeroSearchService, useValue: MockHeroSearchService },
            ]
        }).compileComponents();
    }));

    //Arrange
    beforeEach(() => {
        heroSearchService = TestBed.get(HeroSearchService);
        fixture = TestBed.createComponent(HeroSearchComponent);
        debugElement = fixture.debugElement;
        heroSearchComponent = fixture.componentInstance;
        //fixture.detectChanges();// Comments, so that it does run the of method ngOnInit();
    });

   fit('should with the correct search term, the variable heros have at least a hero', fakeAsync(() => {
        spyOn(heroSearchService, 'search').and.callThrough();
        fixture.detectChanges();

        const input = fixture.debugElement.query(By.css('#search-box'));
        input.nativeElement.value = 'And';
        input.triggerEventHandler('keyup', null);

        tick(600);
        fixture.detectChanges();

        expect(heroSearchService.search).toHaveBeenCalled();                       
    }));

我也运行代码覆盖率，这是结果。在哪里显示该行正在执行。

我希望你能帮助我。请原谅我的英语。

【问题讨论】：

您在测试中在哪里执行search() 方法？它是否链接到模板中的keyup 事件？如果是这样，您确定在您的测试中执行了search 吗？这可能会给你一些启发stackoverflow.com/questions/51463410/…
@Picci，感谢您的回答。是的，keyup 事件执行组件的“搜索”方法，并执行“下一步”，这应该执行服务的“搜索”方法，但这永远不会执行。我会查看链接。谢谢你。
@Picci 检查链接，但这不是我的情况。

标签： angular unit-testing jasmine rxjs spyon

【解决方案1】：

当我遇到相同/类似的问题时，恢复这个相当古老的威胁。您是否已经找到了解决方案？在我的情况下 - 感谢记录中间值 - 我可以验证 ids$ Observable 正在触发。

this.testObs$ = this.ids$.pipe(
      switchMap(ids => {
        const promises = ids.map(id => {
          return this.testApi.getPayer(id).toPromise();
        });
        return Promise.all(promises);
      })
    );

【讨论】：