如何提供一个Rxjs observable作为使用Jasmine中的combineLatest的方法的数据

时间:2018-02-28 19:59:48

标签: angular unit-testing jasmine

我目前有一个combineLatest方法,我通过我的课程提供这个方法:

export class ObservableDataSource extends DataSource<any> {
  private value: any[];
  private key: string;
  constructor(value: any[], key) {
    super();
    this.value = value;
    this.key = key;
  }

  connect() {
    //Code related to question starts here
    return combineLatest(this.value, (data) => {
      return data[this.key];
    });
    //Code related to question ends here
  }

  disconnect() {} 
}

在我的单元测试中,我有一个beforeEach,我用来实例化组件并提供一个observable:

const dummyData = [{
  visible: {
    data: 'test123'
  }
}];
const observableDummyData = Observable.of([dummyData]);
beforeEach(() => {
TestBed.configureTestingModule({
  providers: [
    {provide: ObservableDataSource, useValue: new ObservableDataSource(observableDummyData, 'visible')}
  ]
});
});

  it('should be created', inject([ObservableDataSource], (service: ObservableDataSource) => {
    expect(service).toBeTruthy();
  }));

唯一的问题是,在查看控制台以获取karma运行程序时,此this.value显示为可观察对象,从combineLatest中发出的数据显示为空TypeError: Cannot read property 'visible' of undefined。可能的原因:

  1. 我向Observable.of
  2. 提供错误的数据
  3. 我正在以错误的方式创建一个observable(我不应该使用observable.of)。
  4. 我需要调用一个发射器,以便将可观察数据传递给combineLatest。
  5. 我没有发现的原因
  6. 任何建议,都非常感谢。谢谢。

1 个答案:

答案 0 :(得分:2)

我认为您的代码中存在多个问题。

<强> 1 您的服务期望其value参数是一个数组,但您提供的是一个简单的Observable。

<强> 2 combineLatest使用多个可观察参数,而不是参数数组。

return combineLatest(obsA, obsB, obsC, (a, b, c) => { ... });

// or with the spreading operator
return combineLatest(...arrayOfObs).map((...data) => { ... });

代码示例(未测试)

虚拟数据

const dummyData1 = [{
  visible: {
    data: 'test123'
  }
}];

const dummyData2 = [{
  visible: {
    data: 'somethingElse'
  }
}];


const observableDummyData = [
  Observable.of(dummyData1),
  Observable.of(dummyData2),
];

combineLatest

请参阅documentation for spreading operator

connect() {
    return combineLatest(...this.value).pipe(
        map(...data) => {
            return data[this.key]
        }
    );
  }