模拟角度路由器与观众

Question

我正在使用Spectator编写我的Angular 8测试，并使用Jest来运行它们。我是前端单元测试的新手，所以我可能忽略了一些简单的东西;欢迎任何想法。

我有以下方法(在 Typescript 中(，它根据当前 URL 是否匹配一组路径(不包括 queryParams 和片段(返回布尔值：

// custom-breadcrumb.component.ts
private blacklistedPaths: string[] = [''];
constructor(private router: Router) {
}
hideBreadcrumb(): boolean {
let primaryUrlSegmentGroup: UrlSegmentGroup = this.router.parseUrl(this.router.url).root.children['primary'];
if(primaryUrlSegmentGroup == null){
return true;
}
let urlPath = primaryUrlSegmentGroup.segments.map((segment: UrlSegment) => segment.path).join('/');
return this.blacklistedPaths.some((path: string) => path === urlPath);
}

和

// custom-breadcrumb.component.html
<xng-breadcrumb [hidden]="hideBreadcrumb()">
<ng-container *xngBreadcrumbItem="let breadcrumb">
...
</ng-container>
</xng-breadcrumb>

我现在想使用 Spectator 编写测试，该测试将根据几个可能的 url 验证布尔返回值。在Java中，我会用一个模拟对象来模拟Router，并执行如下操作：

when(mockObject.performMethod()).thenReturn(myReturnValue);

如何为Router创建模拟？ 如何定义this.router.parseUrl(this.router.url).root.children['primary']的返回值？

这是我目前拥有的：

// custom-breadcrumb.component.spec.ts
import {SpectatorRouting, createRoutingFactory} from '@ngneat/spectator/jest';
describe('CustomBreadcrumbComponent', () => {
let spectator: SpectatorRouting<CustomBreadcrumbComponent>;
const createComponent = createRoutingFactory({
component: CustomBreadcrumbComponent,
declarations: [
MockComponent(BreadcrumbComponent),
MockPipe(CapitalizePipe)
],
routes: [{path: ''}]  // I don't think this works
});
beforeEach(() => spectator = createComponent());
it('hideBreadcrumb - hide on homepage', () => {
// TODO set url path to ''
expect(spectator.component.hideBreadcrumb()).toBeTruthy();
});
it('hideBreadcrumb - show on a page other than homepage', () => {
//TODO set url path to 'test' for example
expect(spectator.component.hideBreadcrumb()).toBeFalsy();
});
});

我知道createRoutingFactory提供了开箱即用的ActivatedRouteStub，但我无法用它做任何有意义的事情。

PS：我添加了业力作为标签，因为它可能有相同的解决方案，但是如果我错了，请纠正我。

Answer 1

我的印象是spectator.router正在返回我一个模拟，而我不得不使用spectator.get<Router>(Router)来获得它。我遇到的另一个问题是 html 模板中的hideBreadcrumb方法在创建组件时加载，而我还没有机会模拟Router。这就是我解决它的方式：

将detectChanges设置为 false 以防止在创建旁观者组件时加载 html 模板和 ngOnInit，如下所示：

let spectator: SpectatorRouting<CustomBreadcrumbComponent>;
const createComponent = createRoutingFactory({
detectChanges: false,
component: CustomBreadcrumbComponent,
declarations: [ ... ]
});
beforeEach(() => {
spectator = createComponent()
});

现在它还没有召唤hideBreadcrumb()，这允许成功创建观众。

我的测试是这样的：

it('hideBreadcrumb - hide on homepage', () => {
let routerMock = spectator.get<Router>(Router);
routerMock.parseUrl.andReturn({root: {children: {'primary': {segments: [{path: ''}]}}}});
spectator.detectChanges();
expect(spectator.component.hideBreadcrumb()).toBeTruthy();
});

我用spectator.get<Router>(Router)从观众那里检索模拟，并模拟parseUrl方法的返回值。我现在允许 html 模板并通过设置spectator.detectChanges()来ngOnInit进度。