Question

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

测试错误为： “输入'以包含'Vanilla Sky'”

Component.Spec

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

由于异步调用，每当您进行http调用（您正在预订一种方法）时，表可能就不会填充。尝试使用类似的东西：

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

垫表未填充测试数据

1 个答案: