unit-testing - 使用 Observable (Angular 2) 模拟服务时测试出错

Question

我有一个组件使用返回 Observable 的服务。我没有在 Jasmine 测试中连接此服务，而是选择监视模拟。

这是使用 Http 从 Web 服务器获取 JSON 响应的 NumProbesService [numprobes.service.ts]:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map'
import {ProbeCount} from "./probecount.model";

@Injectable()
export class NumProbesService {

  private numProbesUrl = 'http://localhost:9090/getnumberofprobes';
  private probeCount: ProbeCount;

  constructor (private http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('X-Auth-Key', 'mjones');
    headers.append('X-Auth-Secret', '111111-2222222-22222-3233-4444444');
  }


  public getProbeCount() : Observable<ProbeCount> {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);

    return this.http.get(this.numProbesUrl, {headers: headers})
      .map((response:Response) =>  this.probeCount = <ProbeCount>response.json())
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

}

我正在使用 NumProbesMockService [numprobes.service.mock.ts] 模拟此服务:

import { Observable } from 'rxjs/Observable';
import { ProbeInfo } from './probeinfo.model';

export class NumProbesMockService {

  probeInfo : ProbeInfo = new ProbeInfo(3);

  public getProbeCount(): Observable<ProbeInfo> {
    return Observable.of(this.probeInfo);
  }

}

ProbeInfo [probeinfo.model.ts] 类在这里:

export class ProbeInfo {

  private online : boolean;
  private accepted: boolean;
  private probeCount: number;

  constructor(probeCount: number) {

  }

}

我正在测试的组件在这里:

import {Component, Input} from '@angular/core';
import {NumProbesService} from './numprobes.service';
import {ProbeCount} from "./probecount.model";

@Component({
  selector: 'numprobes-box',
  templateUrl: './numprobes.component.html'
})
export class NumProbesComponent {

  name: string;
  numprobes: number;
  probeCount: ProbeCount;

  constructor(private numProbesService: NumProbesService) {

  }

  ngOnInit() {
    this.name = "Number of Probes";

    this.numProbesService.getProbeCount().subscribe(
      (probeCount) => {
        console.log("probeCount: " + JSON.stringify(probeCount));
        console.log(probeCount.total_probe_count);
        this.numprobes = probeCount.total_probe_count;
      }
    );
  }
}

最后，这里是组件的实际测试。

import {By} from '@angular/platform-browser';
import {DebugElement} from '@angular/core';

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {NumProbesService} from './numprobes.service';
import {NumProbesMockService} from './numprobes.service.mock';
import {NumProbesComponent} from './numprobes.component';
import {ProbeInfo} from './probeinfo.model';


describe('NumProbesComponent', () => {

  let comp: NumProbesComponent;
  let fixture: ComponentFixture<NumProbesComponent>;
  let spy: jasmine.Spy;
  let de: DebugElement;
  let el: HTMLElement;
  let numProbesService: NumProbesService; // the actually injected service

  const numProbes = 5;
  let probeInfo : ProbeInfo = new ProbeInfo(numProbes);


  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [NumProbesComponent],
      providers: [
        { provide: NumProbesService, useClass: NumProbesMockService }
      ]
    });


    fixture = TestBed.createComponent(NumProbesComponent);
    comp = fixture.componentInstance;

    numProbesService = fixture.debugElement.injector.get(NumProbesService);

    spy = spyOn(numProbesService, 'getProbeCount')
      .and.returnValue(probeInfo);
  });

  it('Should show the label within component', () => {

    de = fixture.debugElement.query(By.css(".info-box-text"));
    el = de.nativeElement;

    fixture.detectChanges();
    expect(el.textContent).toBe('Number of Probes', 'Label displayed');

  });


  it('should show the name of the info box, "Number of Probes"', () => {

    de = fixture.debugElement.query(By.css(".info-box-number"));
    el = de.nativeElement;

    console.log("el.textContent: " + el.textContent);

    expect(el).toBeDefined();
    expect(el.textContent).toBe('', 'nothing displayed');

    let probeInfoCalled = numProbesService.getProbeCount();

    expect(spy.calls.any()).toBe(true, 'getProbeCount not yet called');

  });
}

这让我想到了问题。我的一项测试失败了。在 fixture.detectChange() 之后，组件似乎已初始化，并且 getProbeCount() 在模拟服务 NumProbesMockService 上执行。

它说 this.numProbesService.getProbeCount(...).subscribe 不是函数。怎么可能呢？ this.numProbesService.getProbeCount() 返回一个具有订阅方法的 Observable，对吧？

这是完整的错误。任何帮助将不胜感激。

Chrome 56.0.2924 (Mac OS X 10.10.5) NumProbesComponent Should show the label within component FAILED
    Error: Error in :0:0 caused by: this.numProbesService.getProbeCount(...).subscribe is not a function
        at ViewWrappedError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:811:0 <- src/test.ts:106351:33)
        at ViewWrappedError.BaseError [as constructor] (webpack:///~/@angular/core/src/facade/errors.js:26:0 <- src/test.ts:6476:16)
        at ViewWrappedError.WrappedError [as constructor] (webpack:///~/@angular/core/src/facade/errors.js:88:0 <- src/test.ts:6538:16)
        at new ViewWrappedError (webpack:///~/@angular/core/src/linker/errors.js:73:0 <- src/test.ts:60069:16)
        at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (webpack:///~/@angular/core/src/linker/view.js:650:0 <- src/test.ts:84195:23)
        at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (webpack:///~/@angular/core/src/linker/view.js:623:0 <- src/test.ts:84168:18)
        at ViewRef_.detectChanges (webpack:///~/@angular/core/src/linker/view_ref.js:179:0 <- src/test.ts:61015:20)
        at ComponentFixture._tick (webpack:///~/@angular/core/bundles/core-testing.umd.js:191:0 <- src/test.ts:12899:36)
        at webpack:///~/@angular/core/bundles/core-testing.umd.js:205:45 <- src/test.ts:12913:53
        at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:242:0 <- src/test.ts:105782:26)
        at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:71475:39)
        at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:241:0 <- src/test.ts:105781:32)
        at Object.onInvoke (webpack:///~/@angular/core/src/zone/ng_zone.js:269:0 <- src/test.ts:31712:37)
        at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:241:0 <- src/test.ts:105781:32)
        at Zone.run (webpack:///~/zone.js/dist/zone.js:113:0 <- src/test.ts:105653:43)

Answer 1

您得到的错误是由于 spy 覆盖了原始方法。

也就是说，执行完这一行之后:

spyOn(numProbesService, 'getProbeCount')

numProbesService.getProbeCount 不再引用返回 Observable 的原始方法，它引用了 spy 。

我设置了一个 Plunker测试我的答案，它按预期工作:如果你注释掉 spy ，你将能够再次订阅:

// app.component.spec.ts

beforeEach( async(() => {
  ps = fixture.debugElement.injector.get(ProbesService);

  // The spy overrides the ps.getProbeCount() method.
  //spyOn(ps, 'getProbeCount');

  // trigger initial data binding
  fixture.detectChanges();
}));

it('should return 5', (done) => {
  // This will NOT work if the spy has been set up.
  ps.getProbeCount().subscribe(val => {
    expect(val).toEqual(5);
    done();
  });
});

it('should have been called', () => {
  // This will work ONLY IF the spy has been set up.
  expect(ps.getProbeCount).toHaveBeenCalled();
});

但正如我在评论中所说，您将同一件事做了两次。使用 spy 或模拟来返回模拟值，但不能同时使用两者。