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資料：