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

发表于:2022-5-12 09:36  作者:JerryWang汪子熙   来源:51CTO博客

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 软件测试技术 单元测试

  这是我需要进行单元测试的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),我们将立即处理

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道