角测试路由器参数破坏了测试平台 [英] 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源代码的相关部分看起来像这样:
The relevant part of the Angular source code looks like this:
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
设置为undefined来解决该问题.
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屋!