feat(store): add refreshState method to mock store (#2148)

Closes #2121

Author: brandonroberts

modules/store/testing/spec/BUILD

@@ -9,6 +9,7 @@ ts_test_library(
         "//modules/store",
         "//modules/store/spec/fixtures",
         "//modules/store/testing",
+        "@npm//@angular/platform-browser",
         "@npm//rxjs",
     ],
 )

modules/store/testing/spec/mock_store.spec.ts

@@ -1,8 +1,18 @@
-import { TestBed } from '@angular/core/testing';
-import { skip, take } from 'rxjs/operators';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { skip, take, tap } from 'rxjs/operators';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
-import { Store, createSelector, select, StoreModule } from '@ngrx/store';
+import {
+  Store,
+  createSelector,
+  select,
+  StoreModule,
+  MemoizedSelector,
+  createFeatureSelector,
+} from '@ngrx/store';
 import { INCREMENT } from '../../spec/fixtures/counter';
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { By } from '@angular/platform-browser';
 
 interface TestAppSchema {
   counter1: number;
@@ -260,6 +270,81 @@ describe('Mock Store', () => {
   });
 });
 
+describe('Refreshing state', () => {
+  type TodoState = {
+    items: { name: string; done: boolean }[];
+  };
+  const selectTodosState = createFeatureSelector<TodoState>('todos');
+  const todos = createSelector(selectTodosState, todos => todos.items);
+  const getTodoItems = (elSelector: string) =>
+    fixture.debugElement.queryAll(By.css(elSelector));
+  let mockStore: MockStore<TodoState>;
+  let mockSelector: MemoizedSelector<TodoState, any[]>;
+  const initialTodos = [{ name: 'aaa', done: false }];
+  let fixture: ComponentFixture<TodosComponent>;
+
+  @Component({
+    selector: 'app-todos',
+    template: `
+      <ul>
+        <li *ngFor="let todo of todos | async">
+          {{ todo.name }} <input type="checkbox" [checked]="todo.done" />
+        </li>
+
+        <p *ngFor="let todo of todosSelect | async">
+          {{ todo.name }} <input type="checkbox" [checked]="todo.done" />
+        </p>
+      </ul>
+    `,
+  })
+  class TodosComponent implements OnInit {
+    todos: Observable<any[]>;
+    todosSelect: Observable<any[]>;
+
+    constructor(private store: Store<{}>) {}
+
+    ngOnInit() {
+      this.todos = this.store.pipe(select(todos));
+      this.todosSelect = this.store.select(todos);
+    }
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TodosComponent],
+      providers: [provideMockStore()],
+    }).compileComponents();
+
+    mockStore = TestBed.get(Store);
+    mockSelector = mockStore.overrideSelector(todos, initialTodos);
+
+    fixture = TestBed.createComponent(TodosComponent);
+    fixture.detectChanges();
+  });
+
+  it('should work with store and select operator', () => {
+    const newTodos = [{ name: 'bbb', done: true }];
+    mockSelector.setResult(newTodos);
+    mockStore.refreshState();
+
+    fixture.detectChanges();
+
+    expect(getTodoItems('li').length).toBe(1);
+    expect(getTodoItems('li')[0].nativeElement.textContent.trim()).toBe('bbb');
+  });
+
+  it('should work with store.select method', () => {
+    const newTodos = [{ name: 'bbb', done: true }];
+    mockSelector.setResult(newTodos);
+    mockStore.refreshState();
+
+    fixture.detectChanges();
+
+    expect(getTodoItems('p').length).toBe(1);
+    expect(getTodoItems('p')[0].nativeElement.textContent.trim()).toBe('bbb');
+  });
+});
+
 describe('Cleans up after each test', () => {
   const selectData = createSelector(
     (state: any) => state,

modules/store/testing/src/mock_store.ts

@@ -36,6 +36,7 @@ export class MockStore<T> extends Store<T> {
   >();
 
   public scannedActions$: Observable<Action>;
+  private lastState: T;
 
   constructor(
     private state$: MockState<T>,
@@ -46,7 +47,7 @@ export class MockStore<T> extends Store<T> {
   ) {
     super(state$, actionsObserver, reducerManager);
     this.resetSelectors();
-    this.state$.next(this.initialState);
+    this.setState(this.initialState);
     this.scannedActions$ = actionsObserver.asObservable();
     if (mockSelectors) {
       mockSelectors.forEach(mockSelector => {
@@ -62,6 +63,7 @@ export class MockStore<T> extends Store<T> {
 
   setState(nextState: T): void {
     this.state$.next(nextState);
+    this.lastState = nextState;
   }
 
   overrideSelector<T, Result>(
@@ -108,7 +110,7 @@ export class MockStore<T> extends Store<T> {
   }
 
   select(selector: any, prop?: any) {
-    if (MockStore.selectors.has(selector)) {
+    if (typeof selector === 'string' && MockStore.selectors.has(selector)) {
       return new BehaviorSubject<any>(
         MockStore.selectors.get(selector)
       ).asObservable();
@@ -124,4 +126,11 @@ export class MockStore<T> extends Store<T> {
   removeReducer() {
     /* noop */
   }
+
+  /**
+   * Refreshes the existing state.
+   */
+  refreshState() {
+    this.setState({ ...(this.lastState as T) });
+  }
 }

modules/store/testing/src/testing.ts

@@ -23,7 +23,7 @@ export function provideMockStore<T = any>(
   return [
     ActionsSubject,
     MockState,
-    { provide: INITIAL_STATE, useValue: config.initialState },
+    { provide: INITIAL_STATE, useValue: config.initialState || {} },
     { provide: MOCK_SELECTORS, useValue: config.selectors },
     { provide: StateObservable, useClass: MockState },
     { provide: ReducerManager, useClass: MockReducerManager },