Angular2 karma 测试说 "TypeError: this._subscribe is not a function"

Question

我有一个目前运行良好的 Angular 2 应用程序。我的 GlobalsService.getGlobals() 通过我的 OptionService.getOptions() 获取“美国各州”。我的代码失败的地方是在 Karma/Jasmine 测试中。

当我在当前测试设置中调用 getGlobals() 时，出现“this._subscribe is not a function”错误。我发现很难对此进行调试，因为 Google Chrome 不合作。

我的 getGlobals() 代码添加了调试。我将代码拆分为 getOptions() 和 .subscribe() 以查看发生了什么。

public getGlobals(): void {
  let asdf = this.optionService.getOptions();

  console.log("asdf is " + (typeof asdf) + ", asdf.subscribe is: " + asdf.subscribe);
  try {
    asdf.subscribe(
      (options: Option[]) => this.fillOptions(options),
      (error: string) => this.error = error
    );
  } catch(error) {
    console.log("caught error involving asdf, it is: " + error);
    throw error;
  }
}

当我运行这段代码时，我得到:

 LOG: 'asdf is object, asdf.subscribe is: function (observerOrNext, error, complete) {
[1]         var operator = this.operator;
[1]         var sink = toSubscriber_1.toSubscriber(observerOrNext, error, complete);
[1]         if (operator) {
[1]             operator.call(sink, this.source);
[1]         }
[1]         else {
[1]             sink.add(this._subscribe(sink));
[1]         }
[1]         if (sink.syncErrorThrowable) {
[1]             sink.syncErrorThrowable = false;
[1]             if (sink.syncErrorThrown) {
[1]                 throw sink.syncErrorValue;
[1]             }
[1]         }
[1]         return sink;
[1]     }'

asdf.subscribe 的代码是你从node_modules/rxjs/Observable.js 看到的。所以 getOptions() 的返回是一个 Observable。在其众多属性中，它具有以下特点:

_subscribe: Array[4] (each item is an Object of my Option data type)
_proto_: Object
  _subscribe: (subscriber) 
  subscribe: (observer or next, error, complete)

但是如果我让代码继续运行，我会得到错误。 asdf 变量“this”所在的地方是 GlobalsService。

我模拟的 OptionService 代码是:

@Injectable()
export class MockOptionService {
  constructor() { }

  getOptions(): Observable<Option[]> {
    let options: Option[] = [
      { id: 'IN', name: 'Indiana', topic: Option.TOPIC_STATE },
      { id: 'NJ', name: 'New Jersey', topic: Option.TOPIC_STATE },
      { id: 'CONCERT', name: "Concert", topic: Option.TOPIC_EVENT_TYPE },
      { id: 'NY', name: 'New York', topic: Option.TOPIC_STATE }
    ];
    return Observable.create(options);
  }

}

这是通过以下方式注入(inject)的:

describe('Globals Service', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      providers: [
        { provide: OptionService, useClass: MockOptionService },
        { provide: GlobalsService, useClass: GlobalsService }
      ]
    });
[SNIP]

});

正如我所说，我在调试时遇到了 Chrome 问题。如果我在调试器中显示 Observable.js 源代码并尝试设置断点，浏览器会为不存在的 Observable.ts 文件显示一个空白页面。断点不显示在任何一个地方。代码停止在不存在的 Observable.ts:92 上。

那么我的问题是:

<强>1。我可以说服 Chrome 在 Typescript 世界中给我一个 Javascript 断点吗？

<强>2。创建对象数组然后将其附加到 Observable 的正确函数是什么？我怀疑 Observable.create() 是错误的。

谢谢，杰罗姆。

Answer 1

使用Observable.of反而。 Observable.create期望订阅功能。 Observable.create 用于创建“自定义逻辑”Observable，而 Observable.of 只是创建一个基本的 Observable 发出您传递给它的值。