Angular Observable数据类型的单元测试数据准备

我有一个Component，其items属性是一个嵌套的Observable：

 items$: Observable<Observable<Product>[]> = this.componentData$.pipe(
    map((data) => data.productCodes.trim().split(' ')),
    map((codes) =>
      codes.map((code) => this.productService.get(code, this.PRODUCT_SCOPE))
    )
  );

ComponentData$的类型：

  private componentData$: Observable<model> = this.componentData.data$.pipe(
    filter(Boolean)
  );

Model的定义：

componentData$类型为Observable，调用map的回调里又嵌入了map操作，这是返回类型为嵌套Observable的原因。

因为items$是从componentData$得来的，而componentData$又来自componentData，因此我只用考虑如何构造componentData测试数据就行了：

  private componentData$: Observable<model> = this.componentData.data$.pipe(
    filter(Boolean)
  );

下面看看如何在单元测试用例里创建mock数据：MockCmsProductCarouselComponent：

完整解决方案：

const mockComponentData: CmsProductCarouselComponent = {
  uid: '001',
  typeCode: 'ProductCarouselComponent',
  modifiedTime: new Date('2017-12-21T18:15:15+0000'),
  popup: 'false',
  productCodes: productCodeArray.join(' '),
  scroll: 'ALLVISIBLE',
  title: 'Mock Title',
  name: 'Mock Product Carousel',
  container: 'false',
};

const MockCmsProductCarouselComponent = <CmsComponentData<any>>{
  data$: of(mockComponentData),
};

要获取更多Jerry的原创文章，请关注公众号"汪子熙":