Angular 有观众的模拟角路由器

我用它来写我的8个测试并运行它们。我不熟悉前端单元测试，所以我可能忽略了一些简单的东西；欢迎提出任何意见

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

及

如何为

路由器创建模拟？如何定义
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();
    });
});

//custom-breadcrumb.component.spec.ts
从'@ngneat/couster/jest'导入{cousterRouting，createRoutingFactory}；
描述（'CustomBreadcrumbComponent'，（）=>{
让观众观看：观众路线；
const createComponent=createRoutingFactory({
组件：CustomBreadcrumbComponent，
声明：[
模拟组件（面包屑组件），
模拟管（模拟管）
],
路由：[{path:'}]//我认为这不管用
});
beforeach（（）=>旁观者=createComponent（））；
它（‘隐藏在主页上’，（）=>{
//TODO将url路径设置为“”
expect（conspector.component.hidebreadcrump（））.toBeTruthy（）；
});
它（'hidebreadcrump-显示在主页以外的页面上'，（）=>{
//TODO将url路径设置为“测试”，例如
expect（旁观者.component.hidebreadcrump（））.toBeFalsy（）；
});
});

我知道，
createRoutingFactory
提供了一个现成的
ActivatedRouteStub
，但我还不能用它做任何有意义的事情

PS：我添加了karma作为标签，因为它可能有相同的解决方案，但如果我错了，请纠正我。
我的印象是，
旁观者。路由器
返回给我一个模拟，而我必须使用
旁观者。获取（路由器）
来获取它。我遇到的另一个问题是html模板中的
hidebreadcrump
方法在组件创建时被加载，而我还没有机会模拟
路由器。我就是这样解决的：

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

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

beforeEach(() => {
    spectator = createComponent()
});

我使用
cobservator.get（Router）
从旁观者检索一个mock，并模拟
parseUrl
方法的返回值。现在，我通过设置
cobservator.detectChanges（）
来允许html模板和
ngOnInit
进程

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

// 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();
    });
});

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

beforeEach(() => {
    spectator = createComponent()
});

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();
});