chore(docs): Updated migration guide for testing effects (#78)

Author: brandonroberts

MIGRATION.md

@@ -82,6 +82,8 @@ export class AppModule {}
 
 ## @ngrx/effects
 
+### Registering Effects
+
 BEFORE:
 
 `app.module.ts`
@@ -125,6 +127,85 @@ export class AppModule { }
 export class FeatureModule { }
 ```
 
+### Testing Effects
+
+BEFORE:
+```ts
+import { EffectsTestingModule, EffectsRunner } from '@ngrx/effects/testing';
+import { MyEffects } from './my-effects';
+
+describe('My Effects', () => {
+  let effects: MyEffects;
+  let runner: EffectsRunner;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        EffectsTestingModule
+      ],
+      providers: [
+        MyEffects,
+        // other providers
+      ],
+    });
+
+    effects = TestBed.get(MyEffects);
+    runner = TestBed.get(EffectsRunner);
+  });
+
+  it('should work', () => {
+    runner.queue(SomeAction);
+
+    effects.someSource$.subscribe(result => {
+      expect(result).toBe(AnotherAction);
+    });
+  });
+});
+```
+
+AFTER:
+```ts
+import { TestBed } from '@angular/core/testing';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { hot, cold } from 'jasmine-marbles';
+import { MyEffects } from './my-effects';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+
+describe('My Effects', () => {
+  let effects: MyEffects;
+  let actions: Observable<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        MyEffects,
+        provideMockActions(() => actions),
+        // other providers
+      ],
+    });
+
+    effects = TestBed.get(MyEffects);
+  });
+
+  it('should work', () => {
+    actions = hot('--a-', { a: SomeAction, ... });
+    
+    const expected = cold('--b', { b: AnotherAction });
+
+    expect(effects.someSource$).toBeObservable(expected);
+  });
+
+  it('should work also', () => {
+    actions = new ReplaySubject(1);
+
+    actions.next(SomeAction);
+
+    effects.someSource$.subscribe(result => {
+      expect(result).toBe(AnotherAction);
+    });
+  });
+});
+```
+
 ## @ngrx/router-store
 
 BEFORE:

docs/effects/README.md

@@ -104,3 +104,4 @@ export class AdminModule {}
 - [Filtering Actions](./api.md#oftype)
 - [Non-dispatching effects](./api.md#non-dispatching-effects)
 - [Utilities](./api.md#utilities)
+- [Testing](./testing.md)

docs/effects/testing.md

@@ -0,0 +1,52 @@
+# Testing
+
+## @ngrx/effects/testing
+
+### provideMockActions
+Provides a mock test provider of the `Actions` Observable for testing effects. This works well with writing
+marble tests and tests using the `subscribe` method on an Observable. The mock Actions will deliver a new Observable
+to subscribe to for each test.
+
+Usage:
+```ts
+import { TestBed } from '@angular/core/testing';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { hot, cold } from 'jasmine-marbles';
+import { MyEffects } from './my-effects';
+
+describe('My Effects', () => {
+  let effects: MyEffects;
+  let actions: Observable<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        MyEffects,
+        provideMockActions(() => actions),
+        // other providers
+      ],
+    });
+
+    effects = TestBed.get(MyEffects);
+  });
+
+  it('should work', () => {
+    actions = hot('--a-', { a: SomeAction });
+
+    const expected = cold('--b', { b: AnotherAction });
+
+    expect(effects.someSource$).toBeObservable(expected);
+  });
+
+  it('should work also', () => {
+    actions = new ReplaySubject(1);
+
+    actions.next(SomeAction);
+
+    effects.someSource$.subscribe(result => {
+      expect(result).toEqual(AnotherAction);
+    });
+  });  
+});
+```

docs/store/api.md

@@ -2,7 +2,7 @@
 
 ## Initial State
 
-Configure initial state when providing Store. `config.initialState` can be either the actual state, or a function that returns the initial state:
+Configure initial state when providing Store. `initialState` can be either the actual state, or a function that returns the initial state:
 
 ```ts
 import { StoreModule } from '@ngrx/store';

example-app/app/app.module.ts

@@ -16,7 +16,7 @@ import { CoreModule } from './core/core.module';
 import { AuthModule } from './auth/auth.module';
 
 import { routes } from './routes';
-import { reducers, developmentReducerFactory } from './reducers';
+import { reducers } from './reducers';
 import { schema } from './db';
 
 import { AppComponent } from './core/containers/app';
@@ -37,11 +37,7 @@ import { environment } from '../environments/environment';
      * meta-reducer. This returns all providers for an @ngrx/store
      * based application.
      */
-    StoreModule.forRoot(reducers, {
-      reducerFactory: !environment.production
-        ? developmentReducerFactory
-        : undefined,
-    }),
+    StoreModule.forRoot(reducers),
 
     /**
      * @ngrx/router-store keeps router state up-to-date in the store.

example-app/app/books/books.module.ts

@@ -41,10 +41,10 @@ import { reducers } from './reducers';
     StoreModule.forFeature('books', reducers),
 
     /**
-     * Effects.forFeature is used to regiser effects
+     * Effects.forFeature is used to register effects
      * from feature modules. Effects can be loaded
      * eagerly or lazily and will be started immediately.
-     * 
+     *
      * All Effects will only be instantiated once regardless of
      * whether they are registered once or multiple times.
      */

example-app/app/reducers/index.ts

@@ -37,43 +37,6 @@ export const reducers: ActionReducerMap<State> = {
   layout: fromLayout.reducer,
 };
 
-// console.log all actions
-export function logger(reducer: ActionReducer<State>) {
-  return function(state: State, action: any) {
-    console.log('state', state);
-    console.log('action', action);
-
-    return reducer(state, action);
-  };
-}
-
-/**
- * The compose function is one of our most handy tools. In basic terms, you give
- * it any number of functions and it returns a function. This new function
- * takes a value and chains it through every composed function, returning
- * the output.
- *
- * More: https://drboolean.gitbooks.io/mostly-adequate-guide/content/ch5.html
- */
-
-/**
- * combineReducers is another useful metareducer that takes a map of reducer
- * functions and creates a new reducer that gathers the values
- * of each reducer and stores them using the reducer's key. Think of it
- * almost like a database, where every reducer is a table in the db.
- *
- * More: https://egghead.io/lessons/javascript-redux-implementing-combinereducers-from-scratch
- */
-
-/**
- * By default, @ngrx/store uses combineReducers with the reducer map to compose the root meta-reducer.
- * To add more meta-reducers, provide a custom reducer factory.
- */
-export const developmentReducerFactory: ActionReducerFactory<
-  State,
-  Action
-> = compose(logger, combineReducers);
-
 /**
  * Layout Reducers
  */