Angular2 Karma测试说"TypeError:this._subscribe不是函数"

Question

我有一个Angular 2应用程序,到目前为止工作正常.My GlobalsService.getGlobals()通过我的OptionService.getOptions()获取"USA States".我的代码落在哪里是在Karma/Jasmine测试中.

当我在当前的测试设置中调用getGlobals()时,我得到"this._subscribe不是函数"错误.我发现很难调试这个,因为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);
  }

}

这是通过以下注入:

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,发出传递给它的值.