change - router events angular 6

Prueba de la ruta angular 2 padres

Question

Tengo un componente que accede a un valor de ruta principal como este:

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

Aquí está el archivo completo en caso de que ayude.

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

Mi problema es que cuando realizo la prueba obtengo

TypeError: no se puede leer la propiedad ''parent'' de null

Esto tiene sentido. this.route.parent es null . Pero no me importa eso; No estoy probando la ruta en este momento.

Aquí está mi prueba:

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

¿Cómo puedo obtener mi prueba para descartar el valor de ruta ausente o proporcionar uno falso?

Answer 1

Terminé resolviéndolo de la siguiente manera: proporcionando una ruta falsa. Esto es lo que hice.

Presta atención a las partes que mencionan 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();
  });
});