Angular

Chapter 39: Mocking @ngrx/Store
name
value
error
err
super
next value to be observed
description
error to be thrown
description
description
action$
mock Observer that does nothing unless defined to do so in the mock class
actionReducer$ mock Observer that does nothing unless defined to do so in the mock class
obs$
mock Observable
@ngrx/Store is becoming more widely used in Angular 2 projects. As such, the Store is required to be injected into
the constructor of any Component or Service that wishes to use it. Unit testing Store isn't as easy as testing a simple
service though. As with many problems, there are a myriad of ways to implement solutions. However, the basic
recipe is to write a mock class for the Observer interface and to write a mock class for Store. Then you can inject
Store as a provider in your TestBed.
Section 39.1: Unit Test For Component With Mock Store
This is a unit test of a component that has Store as a dependency. Here, we are creating a new class called
MockStore that is injected into our component instead of the usual Store.
import { Injectable } from '@angular/core';
import { TestBed, async} from '@angular/core/testing';
import { AppComponent } from './app.component';
import {DumbComponentComponent} from "./dumb-component/dumb-component.component";
import {SmartComponentComponent} from "./smart-component/smart-component.component";
import {mainReducer} from "./state-management/reducers/main-reducer";
import { StoreModule } from "@ngrx/store";
import { Store } from "@ngrx/store";
import {Observable} from "rxjs";
class MockStore {
public dispatch(obj) {
console.log('dispatching from the mock store!')
}
public select(obj) {
console.log('selecting from the mock store!');
}
}
return Observable.of({})
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
SmartComponentComponent,
DumbComponentComponent,
],
imports: [
StoreModule.provideStore({mainReducer})
],
GoalKicker.com – Angular 2 Notes for Professionals 137