Angular 测试角度2父路由

我有一个访问父路由值的组件，如下所示：

  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:无法读取null的属性“parent”

这是有道理的

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

/*tslint:disable:没有未使用的变量*/
从“@angular/core/testing”导入{async，ComponentFixture，TestBed}；
从“@angular/router/testing”导入{RouterTestingModule}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement}；
从“../../../testing/mock place.service”导入{MockPlaceService}；
从“./diner review list.component”导入{dinerViewListComponent}；
从“../place.service”导入{PlaceService}；
让mockPlaceService=new mockPlaceService（）；
描述（'DinerViewListComponent'，（）=>{
let组件：DinerViewListComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[
DinerViewListComponent
],
导入：[RouterTestingModule]
})
.overrideComponent（DinerViewListComponent{
设置：{
供应商：[
{提供：PlaceService，useValue:mockPlaceService}
]
}
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（dinerViewListComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

---

如何让我的测试忽略缺失的路由值或提供一个假的路由值？

我最终用后一种方法解决了它：提供一个假的路由。这就是我所做的

请注意提到

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

/*tslint:disable:没有未使用的变量*/
从“@angular/core/testing”导入{async，ComponentFixture，TestBed}；
从“@angular/router/testing”导入{RouterTestingModule}；
从'@angular/router'导入{ActivatedRoute}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/of”；
从“../../../testing/mock place.service”导入{MockPlaceService}；
从“./diner review list.component”导入{dinerViewListComponent}；
从“../place.service”导入{PlaceService}；
让mockPlaceService=new mockPlaceService（）；
类MockActivatedRoute{
家长：任何；
参数：任何；
构造函数（选项）{
this.parent=options.parent；
this.params=options.params；
}
}
让mockActivatedRoute=新建mockActivatedRoute({
父级：新的MockActivatedRoute({
父级：新的MockActivatedRoute({
params:Observable.of（{id:'1'}）
})
})
});
描述（'DinerViewListComponent'，（）=>{
let组件：DinerViewListComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[
DinerViewListComponent
],
导入：[RouterTestingModule]
})
.overrideComponent（DinerViewListComponent{
设置：{
供应商：[
{提供：PlaceService，useValue:mockPlaceService}，
{提供：ActivatedRoute，使用值：mockActivatedRoute}
]
}
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（dinerViewListComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

较短的备选方案：

{provide:ActivatedRoute，useValue:{parent:{parent:{params；{subscribe:function（）{return；}}}

-谢谢@Jason！