How to mock an activatedRoute parent Route in angular2 for testing purposes?
Using TestBed
beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [YourComponent], imports: [], providers: [ { provide: ActivatedRoute, useValue: { params: Observable.of({ id: 'test' }) } } ] }) .compileComponents(); }));
AcitvatedRoute is an interface according to angular2 docs, so what I did is implements a MockActivatedRoute
import {Observable} from 'rxjs';import {Type} from '@angular/core';import {ActivatedRoute,Route,ActivatedRouteSnapshot,UrlSegment,Params,Data } from '@angular/router';export class MockActivatedRoute implements ActivatedRoute{ snapshot : ActivatedRouteSnapshot; url : Observable<UrlSegment[]>; params : Observable<Params>; queryParams : Observable<Params>; fragment : Observable<string>; data : Observable<Data>; outlet : string; component : Type<any>|string; routeConfig : Route; root : ActivatedRoute; parent : ActivatedRoute; firstChild : ActivatedRoute; children : ActivatedRoute[]; pathFromRoot : ActivatedRoute[]; toString() : string{ return ""; };}and just replace the ActivatedRoute in my tests for MockActivatedRoute like this
beforeEach(()=>{ route = new MockActivatedRoute(); route.parent = new MockActivatedRoute(); route.parent.params = Observable.of({id:"testId"}); questionnaireService = jasmine.createSpyObj('QuestionnaireService', ['getQuestionsForQuestionnaire']); questionnaireService.getQuestionsForQuestionnaire.and.callFake(() => Observable.of(undefined)); component = new QuestionnaireQuestionsComponent(route, questionnaireService);});
For anyone new to this question the angular docs cover this scenario.
As per documentation above:
Create ActivatedRouteStub class to be used as test double for ActivatedRoute
import { ReplaySubject } from 'rxjs/ReplaySubject';import { convertToParamMap, ParamMap, Params } from '@angular/router';/** * An ActivateRoute test double with a `paramMap` observable. * Use the `setParamMap()` method to add the next `paramMap` value. */export class ActivatedRouteStub { // Use a ReplaySubject to share previous values with subscribers // and pump new values into the `paramMap` observable private subject = new ReplaySubject<ParamMap>(); constructor(initialParams?: Params) { this.setParamMap(initialParams); } /** The mock paramMap observable */ readonly paramMap = this.subject.asObservable(); /** Set the paramMap observables's next value */ setParamMap(params?: Params) { this.subject.next(convertToParamMap(params)); };}And then use the stub in the test class as follows:
activatedRoute.setParamMap({ id: '1234' });