角度测试路由器参数断开试验台

时间:2016-12-20 15:25:50

标签: angular angular2-routing

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

,则测试床会爆炸

testbed setup

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>

在一个理想的世界里,我想继续提供参数,任何想法为什么会爆炸?

4 个答案:

答案 0 :(得分:22)

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

我们看到int因为Angular路由器在某一点上需要variant_assign对象上的Cannot read property '_lastPathIndex' of undefined属性。

Angular source code的相关部分如下所示:

_lastPathIndex

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

问题可以通过使if (route.snapshot._lastPathIndex === -1) { return new Position(route.snapshot._urlSegment, true, 0); } 未定义来解决。

我是这样做的。我的代码与OP有点不同。

我有一个名为snapshot的课程,看起来像这样。

snapshot

以下是我在测试中使用它的方法。

MockActivatedRoute

为了消除错误,我刚刚向export class MockActivatedRoute { parent: any; params: any; constructor(options) { this.parent = options.parent; this.params = options.params; } } 添加了let mockActivatedRoute = new MockActivatedRoute({ parent: new MockActivatedRoute({ params: Observable.of({ id: '1' }) }) }); 属性。

snapshot

答案 1 :(得分:1)

您可以在 providers 数组中添加 snapshot 属性。

providers: [{ provide: ActivatedRoute, useValue: { snapshot: {} } }]

答案 2 :(得分:0)

将快照添加到您的 ActivatedRoute,在参数旁边使用值对象。

HWINEVENTHOOK hWinEventHook = SetWinEventHook(
  EVENT_OBJECT_SHOW, EVENT_OBJECT_SHOW,
  NULL, WinEventProc, 0, 0, WINEVENT_OUTOFCONTEXT | WINEVENT_SKIPOWNPROCESS
);

答案 3 :(得分:-1)

这没有错误,没有黑客

import {
    TestBed,
    async
} from '@angular/core/testing';
import {
    HttpModule,
    BaseRequestOptions,
    Http
} from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import {
    RouterModule,
    ActivatedRoute
} from '@angular/router';
import { MockBackend } from '@angular/http/testing';
import { Observable } from 'rxjs';
import { Component } from '@angular/core';
fdescribe( 'AppComponent', () => {
    beforeEach( () => {
        TestBed.configureTestingModule( {
            imports      : [
                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();
    } );
    it( 'should create the app', async( () => {
        let fixture = TestBed.createComponent( TestComponent );
        let app     = fixture.debugElement.componentInstance;
        expect( app ).toBeTruthy();
    } ) );
} );

@Component( {
    selector    : 'app-root',
    template : `
        <a class="button" [routerLink]="['/']">Back</a>
        <router-outlet></router-outlet>

`,
} )
export class TestComponent {

}