2

我正在使用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：我将业力添加为标签，因为它可能具有相同的解决方案，但如果我错了，请纠正我。

4

1 回答 1

1

我的印象spectator.router是给我一个模拟，而我不得不用spectator.get<Router>(Router)它来获得它。我遇到的另一个问题是hideBreadcrumbhtml 模板中的方法是在组件创建时加载的，而我还没有机会模拟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 模板和ngOnInit进度spectator.detectChanges()。

于 2019-12-15T09:09:06.120 回答