angular - 垫表未填充测试中的数据

Question

正如标题所示，我正在尝试测试一种方法，该方法从 api 获取数据，然后使用返回的 observable 中的数据填充 mat-table。然而，mat-table 没有被填充；登录控制台，表格 html 显示表格的 html，但“tbody”标签为空，因此未填充。

测试错误如下:“键入‘以包含‘ Vanilla 天空’”

组件.规范

it('should display the film info in table', fakeAsync(() => {
    const searchResults = new Array<ISearchItem>();
    let filmMock = <ISearchItem>{
        imdbID: 'tt0259711',
        Title: 'Vanilla Sky',
        Year: '2001',
        Type: 'movie',
        Poster: 'https://m.media-amazon.com/images/M/MV5BYzFlMTJjYzUtMWFjYy00NjkyLTg1Y2EtYmZkMjdlOGQ1ZGYwL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg'
    };

    searchResults.push(filmMock);

    let searchResponse = <ISearchResponse>{
        Search: searchResults,
        totalResults: '1',
        Response: 'True'
    };

    component.currentPaginationData = {
        length: 1,
        pageIndex: 1,
        pageSize: 10,
        previousPageIndex: 0
    }

    const imdbServiceStub: ImdbService = fixture.debugElement.injector.get(ImdbService);
    let searchResponseObs = of(searchResponse);
    spyOn(imdbServiceStub, 'searchImdbFilmDatabase').and.returnValue(of(searchResponseObs));

    component.searchDatabaseByKeyword('sky', true);

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

    table = fixture.debugElement.query(By.css('#filmList')).nativeElement;

    console.log(table);

    expect(imdbServiceStub.searchImdbFilmDatabase).toHaveBeenCalled();
    expect(table.innerText).toContain(filmMock.Title);
}));

组件:

 searchDatabaseByKeyword(searchTerm: string, init?: boolean) {
        let displayData: boolean = false;
        let searchDbSub = this.imdbService.searchImdbFilmDatabase(searchTerm, this.currentPaginationData)
            .pipe(
                tap((data: ISearchResponse) => {
                    displayData = !(data.Response === 'False');
                    this.numberOfResults = parseInt(data.totalResults);

                    if (init) {
                        this.currentPaginationData = {
                            length: this.numberOfResults,
                            pageIndex: 1,
                            pageSize: 10,
                            previousPageIndex: 0
                        }
                    }
                }),
                map((data: ISearchResponse) => {
                    return data.Search
                })
            )
            .subscribe((value: Array<ISearchItem>) => {
                if (value && displayData) {
                    this.currentKeyword = searchTerm;
                    this.searchResults = value;

                    this.dataSource = new MatTableDataSource(this.searchResults);
                    this.dataSource.sort = this.sort;
                    this.paginator.length = this.numberOfResults;

                    if (init) {
                        this.dataSource.paginator = this.paginator;
                        this.paginator.pageIndex = this.currentPaginationData.pageIndex;
                        this.paginator.pageSize = this.currentPaginationData.pageSize;
                    }
                }
            }, (error: Error) => {
                throw error;
            });

        this.subs.push(searchDbSub);
    }

服务:

searchImdbFilmDatabase(searchTerm: string, paginationData?: IPaginatorData): Rx.Observable<any> {

    let baseUrl = this.searchFilmDatabaseEp + "&s=" + searchTerm;
    baseUrl += (paginationData) ? '&page=' + paginationData.pageIndex : '';
    baseUrl += '&r=json&type=movie';

    return this.http.get(baseUrl).pipe(
        tap((data: ISearchResponse) => {

            let tmp = this.store.select('searchReducer', 'searchData');
            console.log(tmp);

        }, (error: Error) => {
            throw error;
        })

    );
}

Answer 1

每当您有本质上是 async 的 http 调用(您正在订阅一个方法)时，您的表可能不会被填充。尝试使用类似的东西:

component.searchDatabaseByKeyword('sky', true);
fixture.whenStable().then(() => {
  fixture.detectChanges();
  expect(imdbServiceStub.searchImdbFilmDatabase).toHaveBeenCalled();
});