テスト角度2親ルート

Question

私はこのような親ルート値にアクセスするコンポーネントがあります。

ngOnInit() { 
    this.route.parent.parent.params.subscribe(params => { 
     this.placeService.getPlace(params['id']).subscribe(place => this.place = place); 
    }); 
    } 

をここではそれが助け場合、完全なファイルです。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { PlaceService } from '../place.service'; 
import { Place } from '../place'; 

@Component({ 
    selector: 'app-diner-review-list', 
    templateUrl: './diner-review-list.component.html', 
    styleUrls: ['./diner-review-list.component.css'], 
    providers: [PlaceService] 
}) 
export class DinerReviewListComponent implements OnInit { 
    place: Place; 

    constructor(private route: ActivatedRoute, private placeService: PlaceService) { } 

    ngOnInit() { 
    this.route.parent.parent.params.subscribe(params => { 
     this.placeService.getPlace(params['id']).subscribe(place => this.place = place); 
    }); 
    } 
} 

私の問題は、私がテストを実行したとき、私はこれが理にかなって

TypeError: Cannot read property 'parent' of null

を得るということです。 this.route.parentは、nullである。しかし、私はそれについて気にしない。私は今、ルートをテストしていません。ここで

は私のテストです：

/* tslint:disable:no-unused-variable */ 
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { MockPlaceService } from '../../../testing/mock-place.service'; 

import { DinerReviewListComponent } from './diner-review-list.component'; 
import { PlaceService } from '../place.service'; 

let mockPlaceService = new MockPlaceService(); 

describe('DinerReviewListComponent',() => { 
    let component: DinerReviewListComponent; 
    let fixture: ComponentFixture<DinerReviewListComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     DinerReviewListComponent 
     ], 
     imports: [RouterTestingModule] 
    }) 
    .overrideComponent(DinerReviewListComponent, { 
     set: { 
     providers: [ 
      { provide: PlaceService, useValue: mockPlaceService } 
     ] 
     } 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(DinerReviewListComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

は、どのように私は私のテストが不在のルート値を無視するか、偽の1を提供するために、どちらか得ることができますか？

Answer 1

私はそれを後者の方法で解決しました。偽のルートを提供しました。ここに私がしたことがあります。

mockActivatedRouteと言われる部分に注意してください。

/* tslint:disable:no-unused-variable */ 
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { ActivatedRoute } from '@angular/router'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 

import { MockPlaceService } from '../../../testing/mock-place.service'; 

import { DinerReviewListComponent } from './diner-review-list.component'; 
import { PlaceService } from '../place.service'; 

let mockPlaceService = new MockPlaceService(); 

class MockActivatedRoute { 
    parent: any; 
    params: any; 

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

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

describe('DinerReviewListComponent',() => { 
    let component: DinerReviewListComponent; 
    let fixture: ComponentFixture<DinerReviewListComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     DinerReviewListComponent 
     ], 
     imports: [RouterTestingModule] 
    }) 
    .overrideComponent(DinerReviewListComponent, { 
     set: { 
     providers: [ 
      { provide: PlaceService, useValue: mockPlaceService }, 
      { provide: ActivatedRoute, useValue: mockActivatedRoute } 
     ] 
     } 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(DinerReviewListComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
});