SAP 电商云 Spartacus UI DeliveryComponent 的依赖设计
该 Component 具有5个依赖:
为了修复 bug,我需要引入 checkout service 和 cart service.
如果直接在该构造函数里注入,这实际上算是修改了 constructor signature,按照 Spartacus 编程规范,这算是引入了 breaking change - 重大更改。
但我们观察到,该 Component 类的依赖之一,checkoutDeliveryService 内部,具有 checkout service 和 cart service.
如此一来,我们可以把代码移到 checkoutDeliveryService 里编写,这样就不会在 Delivery Component 里引入依赖了。
我们分析上图 Checkout Delivery Service 类,其具有5个依赖,两个 store,存储 state 信息,三个 service 类:
- ActiveCartService
- UserIdService
- CheckoutService
以 ActiveCartService 为例:
使用如下代码:
class ActiveCartServiceStub implements Partial<ActiveCartService>
可以构造一个 MockActiveCartService 出来。
使用 Partial 方法,可以只实现 ActiveCartService 的部分方法。
TestBed 用于创建待测试的组件及依赖:
上图的 TestBed.configureTestingModule 只是第一步,还需要调用 TestBed.inject 方法,注入上图 82,83 和 84 行 provide 后面的方法名,返回被注入的类实例:
看下图的单元测试代码:
inject 接受两个参数,第一个参数类型是数组,存放带注入的 token,本例是 checkoutDeliveryService,第二个参数是一个函数,这个函数包含业务逻辑,且输入参数为第一个参数 token 数据待注入的内容。当该函数被调用时,输入参数的 token 包含了被 Angular DI 框架注入好的实例。这个用法很像 SAP UI5 异步加载 library 依赖的实现方式。
而 Ngrx store 的依赖 mock,我们需要在 TestBed.configureTestingModule 的 imports 区域里,维护真实的 StoreModule.forRoot 和 forFeature 返回的数据。
然后调用 TestBed.inject(Store)
接下来就可以调用该方法返回的实例的 dispatch 方法,往 store 里插入测试数据了。
getSupportedDeliveryModes 方法内部会调用 loadSupportedDeliveryModes,因此使用 spyOn 方法,就可以监控后者是否被调用过。
一旦调用 service 的 setDeliveryMode 方法,就会触发 store.dispatch 操作,因此 loading 标志位会设置为 true
又比如 reset 方法,底层会调用 store.dispatch 操作,且传入一个 ResetSetDeliveryModeProcess 的 action. 这个调用也可以被监控。
更多Jerry的原创文章,尽在:“汪子熙”:
SAP 电商云 Spartacus UI DeliveryComponent 的依赖设计相关推荐
- SAP 电商云 Spartacus UI 页面布局的设计原理
Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成.每个 slot 可以包含一个或多个 CMS Component. 我曾经写过一篇 文章 详细介绍过 ...
- SAP 电商云 Spartacus UI 的 feature module 设计原理
我们以一个具体的例子来说明该原理. 我们查看某 integration library 目录下的 public_api.ts: 关注 module: 这个 lib 包含的 module 为 EpdVi ...
- SAP 电商云 Spartacus UI 单元测试的依赖隔离设置举例
看一个具体的例子: DeliveryModeComponent,依赖到的一个服务为 CheckoutDeliveryFacade,其实现类为 CheckoutDeliveryService. 因此,在 ...
- SAP 电商云 Spartacus UI delivery mode 页面设计的结构分析
deveop 分支: 总的来说分为两个模板,分别对应非 4.2.2 和 4.2.2 版本. 我们细看 4.2.2 版本,这个版本只有一个 spinner: 解决双 spinner 问题: checko ...
- SAP 电商云 Spartacus UI CheckoutDeliveryService 的单元测试设计
文件路径:feature-libs\checkout\core\facade\checkout-delivery.service.spec.ts 新增添的方法:getSetDeliveryModeIn ...
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
- Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
- SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
- SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
最新文章
- 非常全面的AutoML资源,看这个就够了!
- 关于java使用javacomm20-win32实践总结 (转)
- 脚本自动安装rkhunter检查rootkit
- Atitit.js javascript的rpc框架选型
- 腾达u12如何安装linux驱动,Centos7 安装腾达U12驱动无线网卡
- windows批处理 复制文件和文件夹子文件夹
- 新知实验室--腾讯云TRTC体验
- java 代码压缩javascript_9款最好的JavaScript压缩工具
- 积分-钉钉考勤-告警
- 鸿蒙之下分城如果建设,率土之滨:分城数量不再限制,戍城、金虎台、拜将台让战斗更激烈...
- 3dsmax展UV,制作UV贴图,将物体的贴图放到一张图片上,贴图优化方式,UVW贴图制作全流程
- Science子刊: 类配对分析法揭示孤独症患者肠道菌群解毒功能受损
- 程序的可维护性和可扩展性
- 镜头与相机法兰距匹配
- 爬取财经新闻+新闻评论(一网打尽)
- 宁德时代发布第一代钠离子电池;霍尼韦尔宣布多项全球性高管人事任命 | 美通社头条...
- 1扩展组件 --FEBE
- C#学习笔记——sin函数
- 面向对象数据库完整设计过程
- Unity5新版Shader模板源码解析
热门文章
- Oracle数据库的导入和导出的两种方式
- 革命性新特性 | 单一应用跨多Kubernetes集群的部署与管理
- MySQL学习笔记(二):MyISAM 存储引擎
- deepin/ubuntu安装苹方字体
- 【matlab】设定C++编译器
- !-- --注释和%-- --%注释的区别
- centos6.4下安装配置JDK+TOMCAT+MYSQL笔记
- 黑马程序员-面向对象-06天-5(单例设计模式)
- shell 远程协助协助(转载)
- 我是如何学习写一个操作系统(七):进程的同步与信号量