Testing: Add mock store state testing option

[SergiOn]

My idea is to add a mock store state testing option as we have for actions testing

We have a possibility to mock Actions in effect by providing mock (stab) Observable
https://github.com/ngrx/platform/blob/master/modules/effects/testing/src/testing.ts

I want to have similar functionality for Store State
It can be an option to provide custom state in the existing provideMockStore
https://github.com/ngrx/platform/blob/master/modules/store/testing/src/testing.ts

export function provideMockStore<T = any>(
  config: MockStoreConfig<T> = {},
  factoryOrSource: (() => Observable<T>) | Observable<T> | null = null
): (ValueProvider | ExistingProvider | FactoryProvider)[] {
  setNgrxMockEnvironment(true);
  return [
    ...
    {
      provide: MockState,
      useFactory: () => {
        if (factoryOrSource) {
          if (typeof factoryOrSource === 'function') {
            return defer(factoryOrSource);
          }
          return factoryOrSource;
        }
        return new MockState<T>();
      },
      deps: [],
    },
    ...
  ];
}

Or we can create a function with the name provideMockStoreState

export function provideMockStoreState<T = any>(
  factoryOrSource: (() => Observable<T>) | Observable<T>
): FactoryProvider {
  return {
    provide: Store,
    useFactory: (actionsObserver: ActionsSubject, reducerManager: ReducerManager): Observable<any> => {
      if (typeof factoryOrSource === 'function') {
        return new Store(defer(factoryOrSource), actionsObserver, reducerManager);
      }
      return new Store(factoryOrSource, actionsObserver, reducerManager);
    },
    deps: [
        ActionsSubject,
        ReducerManager
    ],
  };
}

[timdeschryver]

You can already provide a mock store with an initial state.
Is this what you're looking for?

  provideMockStore({
            initialState: { books: { entities: [], status: 'success' } },
  }),

You can also update the state with MockStore.setState(newStateHere).

See the testing docs for more info.

[SergiOn]

My idea is to use "marble" testing. In that case, with marble testing, I can manage different test result options and provide a time between stream items. It is impossible to manage time between stream items with setState.
We have similar for Actions and my idea to have it for store state.
Marble testing in Actions: https://ngrx.io/guide/effects/testing

I have written my own but it will be better to have it inside the library.

import { Provider } from '@angular/core';
import { ActionsSubject, ReducerManager, State, Store } from '@ngrx/store';
import { MockReducerManager } from '@ngrx/store/testing';
import { defer, Observable } from 'rxjs';

export function provideMockStoreState<T = any>(
    factoryOrSource: (() => Observable<T>) | Observable<T>
): Provider[] {
    return [
        {
            provide: State,
            useFactory: () => {
                if (typeof factoryOrSource === 'function') {
                    return defer(factoryOrSource);
                }
                return factoryOrSource;
            }
        },
        {
            provide: ActionsSubject,
            useValue: new ActionsSubject()
        },
        {
            provide: ReducerManager,
            useFactory: () => new MockReducerManager(),
            deps: []
        },
        {
            provide: Store,
            useFactory: (state: State<T>, actionsObserver: ActionsSubject, reducerManager: ReducerManager): Observable<T> => {
                return new Store(state, actionsObserver, reducerManager);
            },
            deps: [State, ActionsSubject, ReducerManager]
        },
    ];
}

Testing example:

Component

@Component({
})
export class MyComponent {
    loading$: Observable<boolean> = this.store.select((state) => state.status.loading);
    constructor(private store: Store<any>) {}
}

Spec

describe('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let store: Store<any>;
    let state$: Observable<any>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [],
            declarations: [
                MyComponent,
            ],
            providers: [
                provideMockStoreState(() => state$)
            ],
            schemas: [
                NO_ERRORS_SCHEMA
            ],
        });
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();

        store = TestBed.inject(Store);
    });

    describe('loading$', () => {

        beforeEach(() => {
            state$ = cold('-a-b-', {
                a: {
                    status: {
                        loading: true
                    }
                },
                b: {
                    status: {
                        loading: false
                    }
                }
            });
        });

        it('should have stream result', () => {
            expect(component.loading$).toBeObservable(cold('-a-b-', {
                a: true,
                b: false
            }));
        });
    });
});

[timdeschryver]

Ah I got it now, I misinterpreted the question.
Personally, I think that's complex - but that could be based on the given example.
It seems like you want to test the logic of a selector.

Because selectors are pure function, we can keep the test simple, and the "stream" doesn't really matter then.
In these tests it also isn't required to use the Angular TestBed and to create components, which make them sensible faster.

https://ngrx.io/guide/store/testing#testing-selectors