Ndtyjky

As the title suggests, i am trying to test a method that fetches data from an api and then populates the mat-table with the data from the returned observable. However the mat-table is not populated; logging in the console the table html displays the table's html, but with the "tbody" tag empty, hence unpopulated.

The test error reads:
" Type ' to contain '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);

}));

Component:

 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);

    }

Service:

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;

        })



    );

}

Whenever you have http calls ( You are subscribing to a method) due to async calls your table might not be populated. Try using something like:

component.searchDatabaseByKeyword('sky', true);

fixture.whenStable().then(() => {

 fixture.detectChanges();

 fixture.detectChanges();

 expect(imdbServiceStub.searchImdbFilmDatabase).toHaveBeenCalled();

    });