角度测试路由器参数破坏了测试平台 [英] Angular testing router params breaks test bed

问题描述

当我向 TestComponent 提供参数时，如果 html 包含 [routerLink]

When I provide params to my TestComponent the test bed blows up if the html contains a [routerLink]

测试平台设置

TestBed.configureTestingModule({
        imports: [SharedModule.forRoot(), ManagementModule, HttpModule, RouterModule.forRoot([{
            path: '', component: TestComponent
        }])],
        declarations: [TestComponent],
        providers: [
            BaseRequestOptions,
            MockBackend,
            {
                provide: Http, useFactory: function (backend: MockBackend, defaultOptions: BaseRequestOptions) {
                    return new Http(backend, defaultOptions);
                },
                deps: [MockBackend, BaseRequestOptions]
            },
            { provide: APP_BASE_HREF, useValue: '/' },
            {
                provide: ActivatedRoute,
                useValue: {
                    params: Observable.of({ versionId: '1' }),
                    parent: {
                        params: Observable.of({ uniqueId: '1234' })
                    }
                }
            }
        ]
    });
    TestBed.compileComponents();
});

错误记录

Failed: Error in ./DetailComponent class DetailComponent - inline template:72:20 caused by: Cannot read property '_lastPathIndex' of undefined
TypeError: Cannot read property '_lastPathIndex' of undefined
    at findStartingPosition (webpack:///home/developer/Projects/project/~/@angular/router/src/create_url_tree.js:184:0 <- src/test.ts:100429:23)
    at createUrlTree (webpack:///home/developer/Projects/project/~/@angular/router/src/create_url_tree.js:27:21 <- src/test.ts:100272:45)
    at Router.createUrlTree (webpack:///home/developer/Projects/project/~/@angular/router/src/router.js:424:0 <- src/test.ts:28688:111)
    at RouterLinkWithHref.get [as urlTree] (webpack:///home/developer/Projects/project/~/@angular/router/src/directives/router_link.js:253:0 <- src/test.ts:50778:32)
    at RouterLinkWithHref.updateTargetUrlAndHref (webpack:///home/developer/Projects/project/~/@angular/router/src/directives/router_link.js:246:0 <- src/test.ts:50771:91)
    at RouterLinkWithHref.ngOnChanges (webpack:///home/developer/Projects/project/~/@angular/router/src/directives/router_link.js:217:67 <- src/test.ts:50742:74)
    at Wrapper_RouterLinkWithHref.ngDoCheck (/RouterModule/RouterLinkWithHref/wrapper.ngfactory.js:101:18)
    at DebugAppView.View_DetailComponent3.detectChangesInternal (/ManagementModule/DetailComponent/component.ngfactory.js:548:33)
    at DebugAppView.AppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:95635:14)
    at DebugAppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:95830:44)
    at ViewContainer.detectChangesInNestedViews (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view_container.js:67:0 <- src/test.ts:95967:37)
    at DebugAppView.View_DetailComponent0.detectChangesInternal (/ManagementModule/DetailComponent/component.ngfactory.js:85:14)
    at DebugAppView.AppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:95635:14)
    at DebugAppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:95830:44)

模板第 72 行

<a class="button" [routerLink]="['/']">Back</a>

在理想的世界中，我想继续提供参数，知道它为什么会爆炸吗?

In an ideal world i'd like to continue providing the params, any idea why its blowing up?

推荐答案

我想出了问题/解决方案.

I figured out the problem/solution.

我们看到 Cannot read property '_lastPathIndex' of undefined 因为在某一时刻，Angular 路由器需要 snapshot 上的 _lastPathIndex 属性对象.

We're seeing Cannot read property '_lastPathIndex' of undefined because at one point the Angular router expects a _lastPathIndex property on a snapshot object.

Angular 源代码的相关部分 看起来像这样:

if (route.snapshot._lastPathIndex === -1) {
  return new Position(route.snapshot._urlSegment, true, 0);
}

如果 snapshot 未定义，它当然会引发我们看到的错误.

If snapshot is undefined, it will of course raise the error we're seeing.

这个问题可以通过使 snapshot 非未定义来解决.

The problem can be solved by making snapshot not-undefined.

这是我如何做到的.我的代码与 OP 的有点不同.

Here's how I did it. My code is a little different from the OP's.

我有一个名为 MockActivatedRoute 的类，看起来像这样.

I have a class called MockActivatedRoute that looks like this.

export class MockActivatedRoute {
  parent: any;
  params: any;

  constructor(options) {
    this.parent = options.parent;
    this.params = options.params;
  }
}

这是我在测试中使用它的方法.

Here's how I use it in my test.

let mockActivatedRoute = new MockActivatedRoute({
  parent: new MockActivatedRoute({
    params: Observable.of({ id: '1' })
  })
});

为了消除错误，我只是在 MockActivatedRoute 中添加了一个 snapshot 属性.

To make the error go away I just added a snapshot property to MockActivatedRoute.

export class MockActivatedRoute {
  parent: any;
  params: any;
  snapshot = {};

  constructor(options) {
    this.parent = options.parent;
    this.params = options.params;
  }
}

这篇关于角度测试路由器参数破坏了测试平台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！