如何对SAP Spartacus支持路由的Component进行单元测试

完整源代码：

import { Component, NgZone } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { RoutingParamsService } from './routing-params.service';@Component({selector: 'cx-mock',template: '',
})
export class MockComponent {}describe('RoutingParamsService', () => {let service: RoutingParamsService;let router;let zone: NgZone;beforeEach(() => {TestBed.configureTestingModule({imports: [RouterTestingModule.withRoutes([{path: '',component: MockComponent,},{path: 'budgets',component: MockComponent,children: [{path: ':budgetCode',component: MockComponent,children: [{path: 'children/:childCode',component: MockComponent,},],},],},]),],declarations: [MockComponent],providers: [RoutingParamsService],});service = TestBed.inject(RoutingParamsService);router = TestBed.inject(Router);zone = TestBed.inject(NgZone);});it('should be created', () => {expect(service).toBeTruthy();});it('should not have any params for /budgets', async () => {let result;await zone.run(() => router.navigateByUrl('/budgets'));service.getParams().subscribe((params) => (result = params));expect(result).toEqual({});});it('should have param for /budgets/1234', async () => {let result;await zone.run(() => router.navigateByUrl('/budgets/1234'));service.getParams().subscribe((params) => (result = params));expect(result).toEqual({ budgetCode: '1234' });});it('should have params for /budgets/1234/children/5678', async () => {let result;await zone.run(() => router.navigateByUrl('/budgets/1234/children/5678'));service.getParams().subscribe((params) => (result = params));expect(result.budgetCode).toEqual('1234');expect(result.childCode).toEqual('5678');});it('should share child params', async () => {let result1;let result2;await zone.run(() => router.navigateByUrl('/budgets/1234'));service.getParams().subscribe((params) => (result1 = params));expect(result1.budgetCode).toEqual('1234');await zone.run(() => router.navigateByUrl('/budgets/1234/children/5678'));service.getParams().subscribe((params) => (result2 = params));expect(result1.budgetCode).toEqual('1234');expect(result2.childCode).toEqual('5678');});it('should clear all params', async () => {let result;await zone.run(() => router.navigateByUrl('/budgets/1234'));await zone.run(() => router.navigateByUrl('/budgets'));service.getParams().subscribe((params) => (result = params));expect(result).toEqual({});});
});

首先用RouterTestingModule.withRoutes构造一个支持Route的module出来，其返回作为输入，传入TestBed.configureTestingModule的imports数组里：

在单元测试代码里，使用zone.run启动一段代码，调用router.navigateByUrl进行跳转：

await zone.run(() => router.navigateByUrl('/budgets'));

待await返回后，可以调用subscribe获取RouteParamsService提取到的路由参数：

如果路由路径是/budgets/1234，根据之前的路由配置：

提取出的参数为budgetCpde: 1234

路径里包含子路径也是可以提取出来的：

更多Jerry的原创文章，尽在：“汪子熙”:

如何对SAP Spartacus支持路由的Component进行单元测试相关推荐

SAP Spartacus 的路由配置
Configurable Routing 在单页应用程序中,您可以通过显示应用程序的不同视图来控制用户看到的内容. Spartacus 使用 Angular Router 来处理从一个视图到另一个视图 ...
SAP Spartacus支持的语言和货币单位的数据源
打开SAP Spartacus Storefront,看到可以在四中语言和两种货币之间切换: 这些下拉菜单里的语言和货币,是Spartacus向Commerce Cloud发起的Restful API ...
SAP Spartacus B2B页面Banner Component的路由url是在哪里定义的
在Component wrapper里加上一行打印语句: 输出效果: 以CostCentersHomeLink为例:Spartacus里搜索不到,因为这是一个CMS Component: 从spart ...
SAP Spartacus RouteGuard路由守卫之CmsPageGuard
每个cms Component都能配置guards. 从后台加载CMS Component for a page之后,所有该Component的guards会执行. 从CmsPageGuard的实现代 ...
关于 SAP Spartacus 支持不同的环境配置部署到 SAP Commerce Cloud 上的讨论
参考这个讨论:Introduce environment specific configurations for Spartacus deployment on ccv2 对于 angular 开发人 ...
SAP Spartacus 支持 Vue 吗？
Spartacus 是一个 Angular 框架,所以主要应用是 Angular 应用(不是 Vue). 然而,有可能在 Spartacus 中使用 Web 组件作为 CMS 组件(实验性支持),并且 ...
SAP Spartacus B2B 页面 Popover Component 的条件显示逻辑
如下图所示,这个 B2B 页面的 Popover Component: 触发其的按钮位于 cx-org-card 内: 而下面这个 assigned users 明细页面,为什么就没有显示 Popo ...
如何自定义SAP Spartacus的路由路径
地址:https://stackoverflow.com/questions/65830446/customise-spartacus-cart-path 以chart为例: By default i ...
SAP Spartacus单元测试用例中Component构造函数的调用上下文
我有一个Angular Component,构造函数的两个参数通过依赖注入指定. 在单元测试时候,观察这两个参数如何被注入的.在构造函数被调用之前,先执行实例的初始化逻辑: 观察此时的this: 最后 ...

如何对SAP Spartacus支持路由的Component进行单元测试

如何对SAP Spartacus支持路由的Component进行单元测试相关推荐

最新文章

热门文章