Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mock ngrx/store in Angular2 tests

Could you probably help me mocking the Store? I've seen this and this questions by a have a bit different error. I'm using store in one of my services, where I use dispatch, select and get store methods. I've mocked the Store following @noelmace suggestion and used following dispatcher, reducer and state creating the store:

 export class ObservableMock implements Observer<any> {
        closed?: boolean = false; // inherited from Observer
        nextVal: any = ''; // variable I made up

        constructor() {
        }

        next = (value: any): void => {
            this.nextVal = value;
        };
        error = (err: any): void => {
            console.error(err);
        };
        complete = (): void => {
            this.closed = true;
        }
    }

    let _reducer: ObservableMock = new ObservableMock();
    let _dispatcher: ObservableMock = new ObservableMock();
    let state$: Observable<any> = new Observable<any>();

So my Mockstore class looks following:

export class MockStore<T> extends Store<T> {

    //as given above
    constructor() {
        super(_dispatcher, _reducer, state$);
    }
    //as given above
}

However when I try to define my service in test following way it says

TypeError: _store.select is not a function

This failure is caused by following line in TestedService constructor:

constructor(private _store: Store<TabStore>) {
   let tabStore: Observable<TabStore> = _store.select<TabStore>('myReducer');|
}

Here is my test:

beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                // StoreModule.provideStore({myReducer: myReducer}),
            ],
            providers: [
                {provide: Store, useClass: MockStore},
                {
                    provide: TestedService,
                    useFactory: (tabStore: Store<TabStore>): TestedService=> {
                        return new TestedService(myStore);
                    },
                    deps: [Store]
                }
            ]
        });
    });

Commenting imports out doesn't help either. Does anyone has ideas what's wrong with mocking?

like image 243
nitoloz Avatar asked Oct 30 '22 09:10

nitoloz


1 Answers

Finally I've found a solution to mock the store. Not sure if @maxisam answer is right or wrong, but here is solution that I've used.

let _reducer: ObservableMock = new ObservableMock();
let _dispatcher: ObservableMock = new ObservableMock();
let state$: Observable<any> = new Observable<any>();

export class MockStore<T> extends Store<T> {

    private _fakeData: Object = {};
    private fakeDataSubject: BehaviorSubject<Object> = new BehaviorSubject(this._fakeData);

    select = <T, R>(mapFn: any, ...paths: string[]): Observable<any> => {
        if (typeof mapFn !== 'function') {
            mapFn = () => mapFn;
        }
        return this.fakeDataSubject.map(mapFn);
    };

    constructor() {
        super(_dispatcher, _reducer, state$);
    }

    nextMock(mock: Object, ...keys: string[]) {
        let curMockLevel = this._fakeData = {};
        keys.forEach((key, idx) => {
            curMockLevel = curMockLevel[key] = idx === keys.length - 1 ? mock : {};
        });
        this.fakeDataSubject.next(this._fakeData);
    }

    get fakeData() {
        return this._fakeData;
    }

}

This can be later used as follows:

 {provide: Store, useClass: MockStore}
like image 109
nitoloz Avatar answered Nov 15 '22 08:11

nitoloz