Góc thử nghiệm Router params phá vỡ kiểm tra giường

Question

Khi tôi cung cấp params để TestComponent tôi chiếc giường thử nghiệm thổi lên nếu html chứa một [routerLink]

thiết lập nền tảng thử nghiệm

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

Lỗi đăng nhập

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) 

dòng mẫu 72

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

Trong một thế giới lý tưởng, tôi muốn tiếp tục cung cấp các thông số, bất kỳ ý tưởng nào tại sao nó bị thổi phồng?

Answer 1

Tôi đã tìm ra vấn đề/giải pháp.

Chúng tôi đang xem Cannot read property '_lastPathIndex' of undefined vì tại một thời điểm, bộ định tuyến Angular mong đợi thuộc tính _lastPathIndex trên đối tượng snapshot.

Phần liên quan của Angular source code trông như thế này:

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

Nếu snapshot là undefined, nó sẽ tất nhiên tăng lỗi chúng ta đang thấy.

Sự cố có thể được giải quyết bằng cách làm cho snapshot không được xác định.

Đây là cách tôi đã làm. Mã của tôi hơi khác một chút so với OP.

Tôi có một lớp được gọi là MockActivatedRoute trông giống như thế này.

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

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

Đây là cách tôi sử dụng nó trong thử nghiệm của mình.

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

Để làm cho lỗi biến mất, tôi chỉ cần thêm snapshot thuộc tính vào MockActivatedRoute.

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

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

Answer 2

này hoạt động không có lỗi và không có Hack

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 { 

}