Angular 2 Unit Testing a service that uses a Observable and Redux Rxjs selector

Question

I am trying to setup a Karma Jasmine Unit test for a Angular 2 service. The service is called CreditService. The service has a observable property _credit$ and implements a ng2-redux selector @select(s => s.credit) to get the credit object from a Redux store.

import {Injectable, Inject} from '@angular/core';
import {ICreditData, ICreditSubmissionData, ContractType, ICredit} from '../../store/type-store/credit.types';
import 'rxjs/add/operator/map';
import {AppStateService} from '../app-state-service/app-state-service';
import {select} from 'ng2-redux';
import {Observable} from 'rxjs';
import {PromiseService} from '../promise/promise-service';


export interface ICreditResponse {
  errors?: string[];
  token?: string;
  response?: ICreditData;
  submission?: ICreditSubmissionData;
}

export interface ICreditLead {
  address: string;
  aptSuite: string;
  city: string;
  state: string;
  zipCode: number;
  email: string;
  monthlyIncome: number;
  birthDate: string;
  socialSec: number;
  contactPolicy: boolean;
}

@Injectable()
export class CreditService {

  @select(s => s.credit)
  private _credit$: Observable<ICredit>;
  public isPostGA2: boolean = false;

  constructor(@Inject(AppStateService) private _appStateService: AppStateService,
              @Inject(PromiseService) private _promiseService: PromiseService) {
    this.setupSubscriptionForPostGA2();
  }
  /**
   * Method will setup subscription to determine of credit has been
   * pulled or credit has already been pulled and exists in the Redux store.
   */
  public setupSubscriptionForPostGA2(): void {
    // subscribe to the store check for isPostGA2
    this._credit$.subscribe(
      credit => {
        let creditDataExists = (credit.data !== undefined) || credit.data !== null;
        let creditLeadIDExists = (credit.data.LeadID !== undefined) || credit.data.LeadID !== null;
        let creditHistoryExists = (creditDataExists && creditLeadIDExists);
        this.isPostGA2 = (credit.loadComplete || creditHistoryExists);
      },
      err => {}
    );
  }


}

The unit test is pretty basic at this point. I check to see if the CreditService is defined. My unit test looks as follows:

import { fakeAsync, inject, TestBed } from '@angular/core/testing';
import { DtmAppModule } from '../../modules/app.module';
import { configureTests } from '../../tests.configure';
import { CreditService } from './credit-service';
import {MockAppStateService} from '../../mock/service/app-state-service-mock';
import {MockPromiseService} from '../../mock/service/promise-service-mock';
import { AppStateService } from '../../services/app-state-service/app-state-service';
import { PromiseService } from '../../services/promise/promise-service';
import {NgRedux} from 'ng2-redux';


describe('Service: Credit', () => {
  let creditService: CreditService = null;

  beforeEach(done => {
    const configure = (testBed: TestBed) => {
      testBed.configureTestingModule({
        imports: [DtmAppModule],
        providers: [
          { provide: AppStateService, useClass: MockAppStateService },
          { provide: PromiseService, useClass: MockPromiseService },
          { provide: NgRedux, useClass: NgRedux },
        ]
      });
    };

    configureTests(configure).then(testBed => {
      done();
    });
  });

  // Inject the service
  beforeEach(inject([CreditService], (service: CreditService) => {
    creditService = service;
  }));

  //Do a simple test
  it('should have a defined service', () => {
    expect(creditService).toBeDefined(false);
  });
});

I am getting a exception when executing the test (see below). I believe the exception is because I am trying to preform a 'select' method on a undefined Redux store object.

• How do I fix the basic 'toBeDefined' test?
• How can I inject Rxjs mock store for testing purposes?
• Is there a way to mock the return from the _credit$ Observable ?

I am getting a exception when executing the test (see below). I believe the exception is the 'select' of a undefined Redux store.

TypeError: Cannot read property 'select' of undefined
        at CreditService.getter [as _credit$] (webpack:///~/ng2-redux/lib/decorators/select.js:23:0 <- src/tests.entry.ts:150235:47)
        at CreditService.setupSubscriptionForPostGA2 (webpack:///src/services/credit/credit-service.ts:47:17 <- src/tests.entry.ts:24169:17)
        at new CreditService (webpack:///src/services/credit/credit-service.ts:40:2 <- src/tests.entry.ts:24155:14)
        at DynamicTestModuleInjector.get (DynamicTestModule.ngfactory.js:367:71)
        at DynamicTestModuleInjector.getInternal (DynamicTestModule.ngfactory.js:638:53)
        at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/src/linker/ng_module_factory.js:94:0 <- src/tests.entry.ts:91283:27)
        at TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:1114:0 <- src/tests.entry.ts:9003:51)
        at webpack:///~/@angular/core/bundles/core-testing.umd.js:1120:50 <- src/tests.entry.ts:9009:65
        at Array.map (native)
        at TestBed.execute (webpack:///~/@angular/core/bundles/core-testing.umd.js:1120:0 <- src/tests.entry.ts:9009:33)

Answer 1

You can provide an empty mock class to overwrite select:

export class MockSelect {
}

and then add it to your list of providers:

{provide: select, useClass: MockSelect}

You can mock out observables in the same way:

export class MockObservable<T> {
}

Then just set the values yourself according to what you need in your unit test.