Question

我正在尝试为Angular 2服务设置Karma Jasmine Unit测试。该服务称为 CreditService 。该服务具有可观察的属性 _credit $ ，并实现ng2-redux选择器 @select（s =＆gt; s.credit）以从Redux商店获取信用对象。

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 => {}
    );
  }


}

此时单元测试非常基础。我检查是否定义了CreditService。我的单元测试如下：

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);
  });
});

我在执行测试时遇到异常（见下文）。我相信这个例外是因为我正在尝试预先选择＆＃39; select＆＃39;未定义的Redux存储对象上的方法。

如何修复基本的＆＃39; toBeDefined ＆＃39;测试？
如何为测试目的注入Rxjs模拟商店？
有没有办法模仿 _credit $ Observable 的回报？

我在执行测试时遇到异常（见下文）。我相信例外情况是选择＆＃39;一个未定义的Redux商店。

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

您可以提供一个空的模拟类来覆盖select：

export class MockSelect {
}

然后将其添加到提供商列表中：

{provide: select, useClass: MockSelect}

您可以用同样的方式模拟可观察量：

export class MockObservable<T> {
}

然后根据您在单元测试中所需的内容自行设置值。

Angular 2 Unit测试使用Observable和Redux Rxjs选择器

1 个答案: