这是我需要进行单元测试的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的carousel title数据:
生产代码里,carousel template里显示的属性有name和price:
为这两个属性提供的mock数据:
最后生成的mock UI:
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理