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：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular Component UI单元测试的隔离策略相关推荐

SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWra ...
深入解析Angular Component的源码示例
本篇文章主要介绍了剖析Angular Component的源码示例,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Web Component 定 ...
使用 Rxjs 解决 Angular Component 之间的通信问题
本文讨论如果两个 Angular Component 彼此不知道对方的存在,并且也没有共享的父子 Component 时,如何进行通信. 在包括 Angular 在内的许多前端框架中,当我们将应用程序 ...
SAP Spartacus B2B user列表对应的Angular Component
如下图所示,这个页面点击之后: 显示的Angular UI,在SAP Spartacus里并没有单独的Angular Component来实现: 在userCmsConfig里能发现,SAP Comm ...
Angular Component代码和编译后生成的JavaScript代码
从 TypeScript 转换为 JavaScript 在这里称为编译. 在这种情况下,compiling 并不意味着创建二进制代码. 对于这种翻译,使用术语 transpilation 而不是 co ...
KDD'20 Workshop 来了！学术竞赛，发表Paper，针对疫情设计隔离策略
Datawhale 主办方:KDD.宾夕法尼亚州立大学.上海交通大学等顶级会议KDD,国内外高校联合发起新型冠状病毒(COVID-19)感染的肺炎疫情牵动着全世界的心.大数据.人工智能.云计算等数 ...
关于 Angular Component ngOnDestroy 钩子函数的调用时机
我开发了一个 Angular Component,实现了 ngOnDestroy 钩子方法之后,没有找到其被调用的方法.查看这个StackOverflow链接后,得知无论是我刷新浏览器,还是从当前页面 ...
Angular Component模板里的元素，运行时如何被生成并插入到DOM tree中
我有一个selector为app-root的Angular Component: 其模板文件里只有一行html代码: 在运行时,这个h1标签是如何插入到整个DOM tree里的呢? 在Angular ...
SAP Spartacus 如何取得某个table字段对应的Angular Component
以下图为例,负责渲染table column name的Angular Component是什么? 没有名为headerComponent的字段: 于是从config的tableOptions里的he ...

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

Angular Component UI单元测试的隔离策略相关推荐

最新文章

热门文章