feat(store): add option to mock selectors in MockStoreConfig (#1836)

Closes #1827

Author: John Crowson

modules/store/spec/store.spec.ts

@@ -449,11 +449,24 @@ describe('ngRx Store', () => {
 
   describe('Mock Store', () => {
     let mockStore: MockStore<TestAppSchema>;
-    const initialState = { counter1: 0, counter2: 1 };
+    const initialState = { counter1: 0, counter2: 1, counter4: 3 };
+    const stringSelector = 'counter4';
+    const memoizedSelector = createSelector(
+      () => initialState,
+      state => state.counter4
+    );
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        providers: [provideMockStore({ initialState })],
+        providers: [
+          provideMockStore({
+            initialState,
+            selectors: [
+              { selector: stringSelector, value: 87 },
+              { selector: memoizedSelector, value: 98 },
+            ],
+          }),
+        ],
       });
 
       mockStore = TestBed.get(Store);
@@ -483,7 +496,31 @@ describe('ngRx Store', () => {
       mockStore.dispatch(action);
     });
 
-    it('should allow mocking of store.select with string selector', () => {
+    it('should allow mocking of store.select with string selector using provideMockStore', () => {
+      const expectedValue = 87;
+
+      mockStore
+        .select(stringSelector)
+        .subscribe(result => expect(result).toBe(expectedValue));
+    });
+
+    it('should allow mocking of store.select with a memoized selector using provideMockStore', () => {
+      const expectedValue = 98;
+
+      mockStore
+        .select(memoizedSelector)
+        .subscribe(result => expect(result).toBe(expectedValue));
+    });
+
+    it('should allow mocking of store.pipe(select()) with a memoized selector using provideMockStore', () => {
+      const expectedValue = 98;
+
+      mockStore
+        .pipe(select(memoizedSelector))
+        .subscribe(result => expect(result).toBe(expectedValue));
+    });
+
+    it('should allow mocking of store.select with string selector using overrideSelector', () => {
       const mockValue = 5;
 
       mockStore.overrideSelector('counter1', mockValue);
@@ -493,7 +530,7 @@ describe('ngRx Store', () => {
         .subscribe(result => expect(result).toBe(mockValue));
     });
 
-    it('should allow mocking of store.select with a memoized selector', () => {
+    it('should allow mocking of store.select with a memoized selector using overrideSelector', () => {
       const mockValue = 5;
       const selector = createSelector(
         () => initialState,
@@ -507,7 +544,7 @@ describe('ngRx Store', () => {
         .subscribe(result => expect(result).toBe(mockValue));
     });
 
-    it('should allow mocking of store.pipe(select()) with a memoized selector', () => {
+    it('should allow mocking of store.pipe(select()) with a memoized selector using overrideSelector', () => {
       const mockValue = 5;
       const selector = createSelector(
         () => initialState,

modules/store/testing/src/mock_selector.ts

@@ -0,0 +1,9 @@
+import { MemoizedSelector, MemoizedSelectorWithProps } from '@ngrx/store';
+
+export interface MockSelector {
+  selector:
+    | string
+    | MemoizedSelector<any, any>
+    | MemoizedSelectorWithProps<any, any, any>;
+  value: any;
+}

modules/store/testing/src/mock_store.ts

@@ -11,6 +11,8 @@ import {
   MemoizedSelector,
 } from '@ngrx/store';
 import { MockState } from './mock_state';
+import { MockSelector } from './mock_selector';
+import { MOCK_SELECTORS } from './tokens';
 
 @Injectable()
 export class MockStore<T> extends Store<T> {
@@ -27,12 +29,23 @@ export class MockStore<T> extends Store<T> {
     private state$: MockState<T>,
     actionsObserver: ActionsSubject,
     reducerManager: ReducerManager,
-    @Inject(INITIAL_STATE) private initialState: T
+    @Inject(INITIAL_STATE) private initialState: T,
+    @Inject(MOCK_SELECTORS) mockSelectors?: MockSelector[]
   ) {
     super(state$, actionsObserver, reducerManager);
     this.resetSelectors();
     this.state$.next(this.initialState);
     this.scannedActions$ = actionsObserver.asObservable();
+    if (mockSelectors) {
+      mockSelectors.forEach(mockSelector => {
+        const selector = mockSelector.selector;
+        if (typeof selector === 'string') {
+          this.overrideSelector(selector, mockSelector.value);
+        } else {
+          this.overrideSelector(selector, mockSelector.value);
+        }
+      });
+    }
   }
 
   setState(nextState: T): void {

modules/store/testing/src/testing.ts

@@ -9,9 +9,12 @@ import {
 } from '@ngrx/store';
 import { MockStore } from './mock_store';
 import { MockReducerManager } from './mock_reducer_manager';
+import { MockSelector } from './mock_selector';
+import { MOCK_SELECTORS } from './tokens';
 
 export interface MockStoreConfig<T> {
   initialState?: T;
+  selectors?: MockSelector[];
 }
 
 export function provideMockStore<T = any>(
@@ -21,6 +24,7 @@ export function provideMockStore<T = any>(
     ActionsSubject,
     MockState,
     { provide: INITIAL_STATE, useValue: config.initialState },
+    { provide: MOCK_SELECTORS, useValue: config.selectors },
     { provide: StateObservable, useClass: MockState },
     { provide: ReducerManager, useClass: MockReducerManager },
     { provide: Store, useClass: MockStore },
@@ -30,3 +34,4 @@ export function provideMockStore<T = any>(
 export { MockReducerManager } from './mock_reducer_manager';
 export { MockState } from './mock_state';
 export { MockStore } from './mock_store';
+export { MockSelector } from './mock_selector';

modules/store/testing/src/tokens.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const MOCK_SELECTORS = new InjectionToken('@ngrx/store Mock Selectors');

projects/example-app/src/app/auth/containers/login-page.component.spec.ts

@@ -23,13 +23,16 @@ describe('Login Page', () => {
         ReactiveFormsModule,
       ],
       declarations: [LoginPageComponent, LoginFormComponent],
-      providers: [provideMockStore()],
+      providers: [
+        provideMockStore({
+          selectors: [{ selector: fromAuth.getLoginPagePending, value: false }],
+        }),
+      ],
     });
 
     fixture = TestBed.createComponent(LoginPageComponent);
     instance = fixture.componentInstance;
     store = TestBed.get(Store);
-    store.overrideSelector(fromAuth.getLoginPagePending, false);
 
     spyOn(store, 'dispatch');
   });

projects/example-app/src/app/books/containers/collection-page.component.spec.ts

@@ -34,7 +34,11 @@ describe('Collection Page', () => {
         AddCommasPipe,
         EllipsisPipe,
       ],
-      providers: [provideMockStore()],
+      providers: [
+        provideMockStore({
+          selectors: [{ selector: fromBooks.getBookCollection, value: [] }],
+        }),
+      ],
     });
 
     fixture = TestBed.createComponent(CollectionPageComponent);
@@ -45,8 +49,6 @@ describe('Collection Page', () => {
   });
 
   it('should compile', () => {
-    store.overrideSelector(fromBooks.getBookCollection, []);
-
     fixture.detectChanges();
 
     expect(fixture).toMatchSnapshot();

projects/example-app/src/app/books/containers/find-book-page.component.spec.ts

@@ -44,19 +44,23 @@ describe('Find Book Page', () => {
         AddCommasPipe,
         EllipsisPipe,
       ],
-      providers: [provideMockStore()],
+      providers: [
+        provideMockStore({
+          selectors: [
+            { selector: fromBooks.getSearchQuery, value: '' },
+            { selector: fromBooks.getSearchResults, value: [] },
+            { selector: fromBooks.getSearchLoading, value: false },
+            { selector: fromBooks.getSearchError, value: '' },
+          ],
+        }),
+      ],
     });
 
     fixture = TestBed.createComponent(FindBookPageComponent);
     instance = fixture.componentInstance;
     store = TestBed.get(Store);
 
     spyOn(store, 'dispatch');
-
-    store.overrideSelector(fromBooks.getSearchQuery, '');
-    store.overrideSelector(fromBooks.getSearchResults, []);
-    store.overrideSelector(fromBooks.getSearchLoading, false);
-    store.overrideSelector(fromBooks.getSearchError, '');
   });
 
   it('should compile', () => {