Angular tests fail with takeWhile()

Question

I have a component which uses takeWhile() when subscribing to NgRx reducer with select. As such:

    this.store.pipe(select(reducer.getProviders))
            .takeWhile( ... )
            .subscribe(providers => {
                ...
            });

And now I want to write tests for it. At the moment it's pretty basic:

    import { StoreModule, Store, Action, select, combineReducers } from '@ngrx/store';
    import { Subject } from 'rxjs/Subject';

    import * as reducer from './../../reducers';

    describe('ProviderComponent', () => {
        let component: ProviderComponent;
        let fixture: ComponentFixture<ProviderComponent>;
        let store: Store<reducer.State>;

        beforeEach(async(() => {
            const actions = new Subject<Action>();
            const states = new Subject<reducer.State>();
            store = mockStore<reducer.State>({ actions, states });

            TestBed.configureTestingModule({
                imports: [
                    StoreModule.forRoot({
                        provider: combineReducers(reducer.reducers)
                    }),
                    ...
                ],
                declarations: [
                    ProviderComponent
                ],
                providers: [
                    { provide: Store, useValue: store },
                    { provide: HAMMER_LOADER, useValue: () => new Promise(() => { return; }) }
                ]
            })
            fixture = TestBed.createComponent(ProviderComponent);
            component = fixture.componentInstance;
            component.providerCtrl = new FormControl();
            spyOn(store, 'dispatch').and.callThrough();
        }));

        describe('When provider is rendered', () => {
            beforeEach(() => {
                fixture.detectChanges();
            });

            it('should create', () => {
                expect(component).toBeTruthy();
            });

            it('store to be defined', async(() => {
                expect(store).toBeDefined();
            }));
        });
    });

But when I run it, I get this error:

TypeError: this.store.pipe(...).takeWhile is not a function

I don't know how to import it! Can anyone help me with this?

Answer 1

takeWhile is a pipe-able operator and should be included inside the pipe:

this.store.pipe(
   select(reducer.getProviders),
   takeWhile( ... ) 
).subscribe(providers => {
    ...
});