专栏首页Jerry的SAP技术分享Angular Component UI单元测试的隔离策略

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

这是我需要进行单元测试的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:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Angular NgTemplateOutlet的一个例子

    NgTemplateOutlet:Inserts an embedded view from a prepared TemplateRef.

    Jerry Wang
  • 使用pscp从windows电脑拷贝数据到linux遇到的ssh_init错误

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Jerry Wang
  • 使用SAT研究IBASE hierarchy读取性能

    1. transaction code SAT,创建一个新的variant例如ZJERRY, 确保Aggregation为None:

    Jerry Wang
  • 获取数组最大值之最简方法

    用户3055976
  • Android 内存分析工具

    Dalvik 虚拟机支持垃圾收集,但是这不意味着你可以不用关心内存管理。你应该格外注意移动设备的内存使用,手机和平板的内存空间是受到限制的。

    阳光岛主
  • Gephi可视化拓扑图简单实战

    本来定在二月份参加美赛,因为A题是连续型的比较适合我们队,但是今年放的三道题都是数据题,做到第二天其实就觉得,怎么说,感觉之前准备的不是很充分,...

    glm233
  • ActiveMQ入门篇一入门实例1

    上一期,我们讲解了ActiveMQ的原理和概念,以及用它来实现MQ的一些优势,今天我们来写一个入门级的示例。 首先,在写示例之前,我们先了解下ActiveMQ关...

    码神联盟
  • java微服务首篇

    用户1418372
  • Hibernate配置文件详解-2

    在具体业务场景中,Customer和Orders是一对多关系,一个Customer对应多个Orders,实体类中用一个set集合作为属性来表示对应的Orders...

    南风
  • 接口测试3

    上篇讲解到了一次性运行多个测试用例和运行结果的情况,这边继续说下测试报告的内容输出和可视化显示以及邮件抄送等

    用户6367961

扫码关注云+社区

领取腾讯云代金券