docs: add section to Store testing guide on using mock selectors

projects/example-app/src/app/books/effects/collection.effects.ts

@@ -1,14 +1,24 @@
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType, createEffect } from '@ngrx/effects';
 import { defer, of } from 'rxjs';
-import { catchError, map, mergeMap, switchMap } from 'rxjs/operators';
+import {
+  catchError,
+  map,
+  mergeMap,
+  switchMap,
+  withLatestFrom,
+  tap,
+} from 'rxjs/operators';
 import { Book } from '@example-app/books/models/book';
 import {
   CollectionApiActions,
   CollectionPageActions,
   SelectedBookPageActions,
 } from '@example-app/books/actions';
 import { BookStorageService } from '@example-app/core/services';
+import * as fromBooks from '@example-app/books/reducers';
+import { select, Store } from '@ngrx/store';
+
 @Injectable()
 export class CollectionEffects {
   /**
@@ -66,8 +76,25 @@ export class CollectionEffects {
     )
   );
 
+  addBookToCollectionSuccess$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(CollectionApiActions.addBookSuccess),
+        withLatestFrom(this.store.pipe(select(fromBooks.getCollectionBookIds))),
+        tap(([, bookCollection]) => {
+          if (bookCollection.length === 1) {
+            window.alert('Congrats on adding your first book!');
+          } else {
+            window.alert('You have added book number ' + bookCollection.length);
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
-    private storageService: BookStorageService
+    private storageService: BookStorageService,
+    private store: Store<fromBooks.State>
   ) {}
 }

projects/ngrx.io/content/examples/testing-store/src/app/actions/auth.actions.ts

@@ -0,0 +1,4 @@
+import { createAction } from '@ngrx/store';
+
+export const login = createAction('[Auth] Login');
+export const logout = createAction('[Auth] Logout');

projects/ngrx.io/content/examples/testing-store/src/app/actions/index.ts

@@ -0,0 +1,3 @@
+import * as AuthActions from './auth.actions';
+
+export { AuthActions };

projects/ngrx.io/content/examples/testing-store/src/app/auth-guard.service.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { Store, MemoizedSelector } from '@ngrx/store';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { cold } from 'jasmine-marbles';
+import { AuthGuard } from './auth-guard.service';
+import * as fromAuth from './reducers';
+
+describe('Auth Guard', () => {
+  let guard: AuthGuard;
+  let store: MockStore<fromAuth.State>;
+  let loggedIn: MemoizedSelector<fromAuth.State, boolean>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuard, provideMockStore()],
+    });
+
+    store = TestBed.get(Store);
+    guard = TestBed.get(AuthGuard);
+
+    loggedIn = store.overrideSelector(fromAuth.getLoggedIn, false);
+  });
+
+  it('should return false if the user state is not logged in', () => {
+    const expected = cold('(a|)', { a: false });
+
+    expect(guard.canActivate()).toBeObservable(expected);
+  });
+
+  it('should return true if the user state is logged in', () => {
+    const expected = cold('(a|)', { a: true });
+
+    loggedIn.setResult(true);
+
+    expect(guard.canActivate()).toBeObservable(expected);
+  });
+});

projects/ngrx.io/content/examples/testing-store/src/app/auth-guard.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { take } from 'rxjs/operators';
+import * as fromAuth from './reducers';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate {
+  constructor(private store: Store<fromAuth.State>) {}
+
+  canActivate() {
+    return this.store.pipe(
+      select(fromAuth.getLoggedIn),
+      take(1)
+    );
+  }
+}

projects/ngrx.io/content/examples/testing-store/src/app/reducers/auth.reducer.ts

@@ -0,0 +1,20 @@
+import { createReducer, on } from '@ngrx/store';
+import { AuthActions } from '../actions';
+
+export interface State {
+  loggedIn: boolean;
+}
+
+export const initialState: State = {
+  loggedIn: false,
+};
+
+export const reducer = createReducer<State>(
+  [
+    on(AuthActions.login, (): State => ({ loggedIn: true })),
+    on(AuthActions.logout, (): State => ({ loggedIn: false }))
+  ],
+  initialState
+);
+
+export const getLoggedIn = (state: State) => state.loggedIn;

projects/ngrx.io/content/examples/testing-store/src/app/reducers/index.ts

@@ -0,0 +1,27 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  Action,
+  combineReducers,
+} from '@ngrx/store';
+import * as fromAuth from './auth.reducer';
+
+export interface AuthState {
+  status: fromAuth.State;
+}
+
+export interface State {
+  auth: AuthState;
+}
+
+export const selectAuthState = createFeatureSelector<AuthState>('auth');
+
+export const selectAuthStatusState = createSelector(
+  selectAuthState,
+  (state: AuthState) => state.status
+);
+
+export const getLoggedIn = createSelector(
+  selectAuthStatusState,
+  fromAuth.getLoggedIn
+);

projects/ngrx.io/content/examples/testing-store/src/index.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>Angular App</title>
+  </head>
+  <body>
+  <!-- Intentionally empty -->
+  </body>
+</html>

projects/ngrx.io/content/examples/testing-store/src/main.ts

@@ -0,0 +1,45 @@
+import './testing/global-jasmine';
+import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
+import 'jasmine-core/lib/jasmine-core/boot.js';
+
+declare var jasmine;
+
+import './polyfills';
+
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Spec files to include in the Stackblitz tests
+import './test-files.ts';
+
+//
+
+bootstrap();
+
+//
+
+function bootstrap () {
+  if (window['jasmineRef']) {
+    location.reload();
+    return;
+  } else {
+    window.onload(undefined);
+    window['jasmineRef'] = jasmine.getEnv();
+  }
+
+  // First, initialize the Angular testing environment.
+  getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+  );
+}

projects/ngrx.io/content/examples/testing-store/src/test-files.ts

@@ -0,0 +1,2 @@
+// Import spec files individually for Stackblitz
+import './app/auth-guard.service.spec';

projects/ngrx.io/content/examples/testing-store/src/testing/global-jasmine.ts

@@ -0,0 +1,3 @@
+import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
+
+window['jasmineRequire'] = jasmineRequire;

projects/ngrx.io/content/examples/testing-store/stackblitz.json

@@ -0,0 +1,4 @@
+{
+  "description": "Store Testing Tutorial",
+  "files": ["!**/*.d.ts", "!**/*.js", "**/*.spec.ts"]
+}

projects/ngrx.io/content/guide/store/testing.md

@@ -58,6 +58,24 @@ describe('Auth Guard', () => {
 });
 </code-example>
 
+#### Using Mock Selectors
+
+`MockStore` also provides the ability to mock individual selectors to return a passed value using the `overrideSelector()` method. When the selector is invoked by the `select` method, the returned value is overridden by the passed value, regardless of any state snapshot provided in `provideMockStore()`. 
+
+`overrideSelector()` returns a `MemoizedSelector`. To update the mock selector to return a different value, use the `MemoizedSelector`'s `setResult()` method.
+
+`overrideSelector()` supports mocking the `select` method (used in RxJS pipe) and the `Store` `select` instance method using a string or selector.
+
+Usage:
+
+<code-example header="auth-guard.service.ts" path="testing-store/src/app/auth-guard.service.ts"></code-example>
+
+<code-example header="auth-guard.service.spec.ts" path="testing-store/src/app/auth-guard.service.spec.ts"></code-example>
+
+In this example, we mock the `getLoggedIn` selector by using `overrideSelector`, passing in the `getLoggedIn` selector with a default mocked return value of `false`.  In the second test, we use `setResult()` to update the mock selector to return `true`.
+
+Try the <live-example name="testing-store"></live-example>.
+
 ### Using Store for Integration Testing
 
 Use the `StoreModule.forRoot` in your `TestBed` configuration when testing components or services that inject `Store`.