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

jtcrowson · 2019-04-23T22:11:14Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngrx/platform/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[x] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Partially closes #1761, @damienwebdev to add another example.

What is the new behavior?

Documents mock selectors with example.
Adds example to projects/ngrx.io/content/examples/testing-store to use in guide

Does this PR introduce a breaking change?

[ ] Yes
[x] No

ngrxbot · 2019-04-23T22:19:11Z

Preview docs changes for 24cd217 at https://previews.ngrx.io/pr1797-24cd217/

brandonroberts · 2019-04-24T03:08:56Z

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

+
+Usage:
+
+<code-example header="auth.guard.ts">


Instead of inlining the code, provide a path attribute.

Suggested change

<code-example header="auth.guard.ts">

<code-example header="auth-guard.service.ts" path="testing-store/src/app/auth-guard.service.ts">

brandonroberts · 2019-04-24T03:09:12Z

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

+}
+</code-example>
+
+<code-example header="auth.guard.spec.ts">


Same here with path to example

brandonroberts · 2019-04-24T03:09:33Z

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

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


The files array needs to include a glob for the spec files so they get included in the generated StackBlitz.

brandonroberts · 2019-04-24T03:10:31Z

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

@@ -0,0 +1,16 @@
+import { Action } from '@ngrx/store';
+
+export enum AuthActionTypes {


Use new createAction function for actions

brandonroberts · 2019-04-24T03:11:02Z

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

+  loggedIn: false,
+};
+
+export function reducer(


Use createReducer function here

is createReducer available in a released beta version?

ngrxbot · 2019-04-24T11:26:02Z

Preview docs changes for 4329f17 at https://previews.ngrx.io/pr1797-4329f17/

brandonroberts · 2019-04-24T12:11:03Z

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

+<html>
+  <head>
+    <title>Angular App</title>
+  </head>


Add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.99.0/jasmine.css"> to style the test page

brandonroberts · 2019-04-24T12:11:39Z

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

@@ -66,8 +76,25 @@ export class CollectionEffects {
    )
  );

+  addBookToCollectionSuccess$ = createEffect(


brandonroberts · 2019-04-24T12:12:10Z

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

@@ -58,6 +58,24 @@ describe('Auth Guard', () => {
 });
 </code-example>

+#### Using Mock Selectors


Suggested change

#### Using Mock Selectors

### Using Mock Selectors

brandonroberts · 2019-04-24T12:38:05Z

@jtcrowson is this ready to be merged now?

ngrxbot · 2019-04-24T12:41:21Z

Preview docs changes for 1061467 at https://previews.ngrx.io/pr1797-1061467/

jtcrowson · 2019-04-24T12:41:22Z

@brandonroberts only issue is the live example doesn't seem to be generating correctly in stackblitz. Check out the live example link in projects/ngrx.io/content/guide/store/testing.md

brandonroberts · 2019-04-24T12:45:40Z

Ahh. That's because our dependencies haven't been updated here https://github.com/ngrx/platform/blob/master/projects/ngrx.io/tools/examples/shared/boilerplate/cli/package.json

jtcrowson · 2019-04-24T12:54:56Z

It seems to be complaining about creatReducer. Is it because it hasn’t been published as a beta version yet?

brandonroberts · 2019-04-24T13:36:27Z

I just published 8.0.0-beta.1 that includes createReducer. The initialState is first in the array now instead of last.

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

timdeschryver · 2019-04-24T17:41:55Z

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

+
+`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.


I think you wanted to say setResult here?
Could we also simplify the wording as the following?

Suggested change

`overrideSelector()` supports mocking the `select` method (used in RxJS pipe) and the `Store` `select` instance method using a string or selector.

`setResult()` supports mocking the `select` method and returns the given input provided in `setResult()`.

I intended to use overrideSelector and summarize the note from #1688:

Covers mocking different types of selectors:

store.select('slice');

const selector = createSelector(state, state => state.slice); store.select(selector);

const selector = createSelector(state, state => state.slice); store.pipe(select(selector));

Co-Authored-By: jtcrowson <John.Crowson@CapitalOne.com>

ngrxbot · 2019-04-25T19:29:31Z

Preview docs changes for 14e20a5 at https://previews.ngrx.io/pr1797-14e20a5/

ngrxbot · 2019-04-25T19:44:28Z

Preview docs changes for 2679b0f at https://previews.ngrx.io/pr1797-2679b0f/

jtcrowson · 2019-04-25T19:51:53Z

@brandonroberts updated projects/ngrx.io/tools/examples/shared/boilerplate/cli/package.json to the latest beta. CICD failing due to an issue that seems intermittent with the @ngrx/data testing of pluralize.

brandonroberts · 2019-04-25T20:56:15Z

I restarted the job. Should be good to go now

brandonroberts · 2019-04-26T12:17:03Z

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

+};
+
+export const reducer = createReducer<State>(
+  [


Suggested change

[

initialState,

[

brandonroberts · 2019-04-26T12:17:44Z

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

+    on(AuthActions.login, (): State => ({ loggedIn: true })),
+    on(AuthActions.logout, (): State => ({ loggedIn: false }))
+  ],
+  initialState


Remove initialState as the last argument

jtcrowson · 2019-04-26T21:42:07Z

@brandonroberts fixed the new createReducer argument label ordering. Still can't seem to get stackblitz to run correctly.

ngrxbot · 2019-04-26T21:48:20Z

Preview docs changes for cf56e40 at https://previews.ngrx.io/pr1797-cf56e40/

timdeschryver · 2019-04-27T16:42:57Z

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

+  loggedIn: false,
+};
+
+export const reducer = createReducer<State>(


The ons don't need to be wrapped in an array:

export const reducer = createReducer<State>( initialState, on(AuthActions.login, (): State => ({ loggedIn: true })), on(AuthActions.logout, (): State => ({ loggedIn: false })) );

~~This should also resolve the stackblitz error that you're encountering~~

To resolve the stackblitz error, add jasmine in https://github.com/ngrx/platform/blob/master/projects/ngrx.io/tools/examples/shared/boilerplate/cli/package.json

While you're in that file we should also add tslib:

(this change is needed for all the examples - this dep was needed for store migrations)

ngrxbot · 2019-04-27T21:29:04Z

Preview docs changes for 9b66485 at https://previews.ngrx.io/pr1797-9b66485/

ngrxbot · 2019-04-27T21:49:14Z

Preview docs changes for f5d6d25 at https://previews.ngrx.io/pr1797-f5d6d25/

ngrxbot · 2019-04-27T22:37:43Z

Preview docs changes for 976090c at https://previews.ngrx.io/pr1797-976090c/

jtcrowson · 2019-04-27T22:41:11Z

Nice! Stackblitz example is up and running! Thanks for your help @timdeschryver and @brandonroberts! Ready to merge unless anything else is requested.

timdeschryver

👍

ijz953 added 2 commits April 23, 2019 15:59

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

65b5331

docs: adding live example

24cd217

brandonroberts requested changes Apr 24, 2019

View reviewed changes

ijz953 added 4 commits April 24, 2019 05:26

docs: use example path for live-examples

6b1f729

docs: migrating test-store example to use action and reducer creators

4801047

docs: add spec files to stackblitz json

15b975a

docs: fix code-example closing tag in store testing guide

4329f17

brandonroberts requested changes Apr 24, 2019

View reviewed changes

ijz953 added 3 commits April 24, 2019 08:31

docs: remove accidental change to example-app collection effects

c408c38

docs: fixed header for mock selectors

5c1f8c9

docs: add style sheet for testing-store index.html

1061467

brandonroberts approved these changes Apr 24, 2019

View reviewed changes

jtcrowson changed the title ~~[WIP] docs: add section to Store testing guide on using mock selectors~~ docs: add section to Store testing guide on using mock selectors Apr 24, 2019

timdeschryver reviewed Apr 24, 2019

View reviewed changes

docs: update last sentence to less confusing wording

14e20a5

Co-Authored-By: jtcrowson <John.Crowson@CapitalOne.com>

docs: update example boilerplate dependencies to latest beta version

2679b0f

brandonroberts requested changes Apr 26, 2019

View reviewed changes

brandonroberts added the Needs Cleanup Review changes needed label Apr 26, 2019

docs: fix effect testing with store example

cf56e40

timdeschryver requested changes Apr 27, 2019

View reviewed changes

John Crowson added 2 commits April 27, 2019 16:20

docs: remove array in createReducer function

9b66485

docs: add tslib and jasmine to shared example package.json

f5d6d25

docs: move tslib from dev-dependencies to dependencies

976090c

timdeschryver approved these changes Apr 28, 2019

View reviewed changes

timdeschryver removed the Needs Cleanup Review changes needed label May 3, 2019

brandonroberts approved these changes May 5, 2019

View reviewed changes

brandonroberts merged commit 8755d07 into ngrx:master May 5, 2019

	<code-example header="auth.guard.ts">
	<code-example header="auth-guard.service.ts" path="testing-store/src/app/auth-guard.service.ts">

		@@ -0,0 +1,16 @@
		import { Action } from '@ngrx/store';

		export enum AuthActionTypes {


		`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.

	`overrideSelector()` supports mocking the `select` method (used in RxJS pipe) and the `Store` `select` instance method using a string or selector.
	`setResult()` supports mocking the `select` method and returns the given input provided in `setResult()`.

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

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

Conversation

jtcrowson commented Apr 23, 2019

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

ngrxbot commented Apr 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngrxbot commented Apr 24, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brandonroberts commented Apr 24, 2019

ngrxbot commented Apr 24, 2019

jtcrowson commented Apr 24, 2019

brandonroberts commented Apr 24, 2019

jtcrowson commented Apr 24, 2019

brandonroberts commented Apr 24, 2019

Choose a reason for hiding this comment

jtcrowson Apr 25, 2019 • edited Loading

Choose a reason for hiding this comment

ngrxbot commented Apr 25, 2019

ngrxbot commented Apr 25, 2019

jtcrowson commented Apr 25, 2019

brandonroberts commented Apr 25, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jtcrowson commented Apr 26, 2019

ngrxbot commented Apr 26, 2019

timdeschryver Apr 27, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngrxbot commented Apr 27, 2019

ngrxbot commented Apr 27, 2019

ngrxbot commented Apr 27, 2019

jtcrowson commented Apr 27, 2019 • edited Loading

timdeschryver left a comment

Choose a reason for hiding this comment

jtcrowson Apr 25, 2019 •

edited

Loading

timdeschryver Apr 27, 2019 •

edited

Loading

jtcrowson commented Apr 27, 2019 •

edited

Loading