天天看點

Angular Observable資料類型的單元測試資料準備

Angular 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的定義:

Angular Observable資料類型的單元測試資料準備

因為items是 從 c o m p o n e n t D a t a 是從componentData是從componentData得來的,而componentData$又來自componentData,是以我隻用考慮如何構造componentData測試資料就行了:

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

下面看看如何在單元測試用例裡建立mock資料:MockCmsProductCarouselComponent

Angular Observable資料類型的單元測試資料準備

完整解決方案:

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),
};      

繼續閱讀