Use MockNgRedux for testing

Author: tommysitu

src/app/components/status-dialog/status-dialog.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { DialogboxComponent } from '../dialogbox/dialogbox.component';
-import { select } from '@angular-redux/store';
-import { Observable } from 'rxjs';
 import { API_ERRORS } from '../../shared/http/error-handling';
 import { StatusDialogService } from './status-dialog.service';
 import { NotificationService } from '../notifications/notification.service';

src/app/components/topnavbar/topnavbar.component.spec.ts

@@ -3,7 +3,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TopNavBarComponent } from './topnavbar.component';
 import { TopNavBarModule } from './topnavbar.module';
 import { RouterTestingModule } from '@angular/router/testing';
-import createSpy = jasmine.createSpy;
 import { AuthService } from '../../shared/services/auth.service';
 import { MockAuthService } from '../../shared/testing/mock-helper.spec';
 

src/app/shared/guards/load.guard.spec.ts

@@ -1,6 +1,5 @@
 
 
-import createSpy = jasmine.createSpy;
 import { Injector, ReflectiveInjector } from '@angular/core';
 import { LoadGuard } from './load.guard';
 import { AuthService } from '../services/auth.service';

src/app/shared/services/hoverfly.service.spec.ts

@@ -16,6 +16,7 @@ import { API_ERRORS } from '../http/error-handling';
 import { NotificationService } from '../../components/notifications/notification.service';
 import { MockNotificationService } from '../testing/mock-helper.spec';
 import { mockErrorResponse } from '../testing/http-helper.spec';
+import { MockNgRedux } from '@angular-redux/store/testing';
 
 describe('Service: Hoverfly', () => {
 
@@ -27,7 +28,7 @@ describe('Service: Hoverfly', () => {
   let notifyService: MockNotificationService;
 
   beforeEach(() => {
-    ngRedux = new NgRedux<AppState>(null);
+    ngRedux = MockNgRedux.getInstance();
     spyOn(ngRedux, 'dispatch');
     injector = ReflectiveInjector.resolveAndCreate([
       { provide: NgRedux, useValue: ngRedux },

src/app/shared/testing/redux-helper.spec.ts

@@ -5,12 +5,11 @@ import { async, ComponentFixture, ComponentFixtureAutoDetect, fakeAsync, TestBed
 import { DashboardModule } from './dashboard.module';
 import createSpy = jasmine.createSpy;
 import { HoverflyService } from '../../shared/services/hoverfly.service';
-import { NgRedux } from '@angular-redux/store';
 import { fromJS } from 'immutable';
 import { Subscription } from 'rxjs';
 import { By } from '@angular/platform-browser';
-import { createMockRedux } from '../../shared/testing/redux-helper.spec';
 import { click } from '../../shared/testing/click-helper.spec';
+import { MockNgRedux, NgReduxTestingModule } from '@angular-redux/store/testing';
 
 
 const mockState: Map<any, any> = fromJS(
@@ -33,26 +32,30 @@ describe('Component: Dashboard', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
 
-  const configureTestModule = function (state: Map<any, any>) {
+  const configureTestModule = function () {
     return TestBed.configureTestingModule({
       imports: [
-        DashboardModule
+        DashboardModule,
+        NgReduxTestingModule
       ],
       providers: [
-        { provide: NgRedux, useValue: createMockRedux(state) },
         { provide: HoverflyService, useClass: MockHoverflyService },
         { provide: ComponentFixtureAutoDetect, useValue: true }
       ]
     })
       .compileComponents();
   };
 
-  beforeEach(async(() => configureTestModule(mockState)));
+  beforeEach(async(() => configureTestModule()));
 
   beforeEach(() => {
+    const hoverflyStub = MockNgRedux.getSelectorStub([ 'hoverfly', 'hoverfly' ]);
+    hoverflyStub.next(mockState);
+    hoverflyStub.complete();
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;
     hoverflyService = TestBed.get(HoverflyService);
+    MockNgRedux.reset();
   });
 
   it('should create the dashboard', () => {
@@ -86,7 +89,10 @@ describe('Component: Dashboard', () => {
         }
     });
 
-    configureTestModule(stateWithMiddleware).then(() => {
+    configureTestModule().then(() => {
+      const hoverflyStub = MockNgRedux.getSelectorStub([ 'hoverfly', 'hoverfly' ]);
+      hoverflyStub.next(stateWithMiddleware);
+      hoverflyStub.complete();
       fixture = TestBed.createComponent(DashboardComponent);
 
       const binaryField = fixture.debugElement.query(By.css('#hoverfly-middleware-details-binary code'));
@@ -134,7 +140,10 @@ describe('Component: Dashboard', () => {
         }
     });
 
-    configureTestModule(stateWithMiddleware).then(() => {
+    configureTestModule().then(() => {
+      const hoverflyStub = MockNgRedux.getSelectorStub([ 'hoverfly', 'hoverfly' ]);
+      hoverflyStub.next(stateWithMiddleware);
+      hoverflyStub.complete();
       fixture = TestBed.createComponent(DashboardComponent);
 
       const counters = fixture.debugElement.query(By.css('#hoverfly-counters'));