Angular Component UI单元测试的隔离策略

可以看到它依赖了另一个Component,其selector为cx-carousel.

因此我在单元测试实现文件里，给它创建一个mock Component：MockCarouselComponent：

@Component({
  selector: 'cx-carousel',
  template: `
    <ng-container *ngFor="let item$ of items">
      <ng-container
        *ngTemplateOutlet="template; context: { item: item$ | async }"
      ></ng-container>
    </ng-container>
  `,
})
class MockCarouselComponent {
  @Input() title: string;
  @Input() template: TemplateRef<any>;
  @Input() items: any[];
}

可以看到，MockComponent和生产版本的Component，属性类型和名称完全一致： 为这两个属性提供的mock数据：