How to mock an activatedRoute parent Route in angular2 for testing purposes?

Question

Let's say I have this

export class QuestionnaireQuestionsComponent {      questions: Question[] = [];     private loading:boolean = true;       constructor(         private route: ActivatedRoute,         public questionnaireService:QuestionnaireService) {}      ngOnInit(){         this.route.parent.params.subscribe((params:any)=>{             this.questionnaireService.getQuestionsForQuestionnaire(params.id).subscribe((questions)=>{                 this.questions = questions;                 this.loading = false;             });         });     }   } 

My component is actually working pretty well. Problem is that I want to unit test it but I can't figure out how to mock the this.route.parent object. Here's my test that fails

beforeEach(()=>{     route = new ActivatedRoute();     route.parent.params = Observable.of({id:"testId"});      questionnaireService = jasmine.createSpyObj('QuestionnaireService', ['getQuestionsForQuestionnaire']);     questionnaireService.getQuestionsForQuestionnaire.and.callFake(() => Observable.of(undefined));     component = new QuestionnaireQuestionsComponent(route, questionnaireService); });   describe("on init", ()=>{     it("must call the service get questions for questionnaire",()=>{         component.ngOnInit();         expect(questionnaireService.getQuestionsForQuestionnaire).toHaveBeenCalled();     });   }); 

The test fails with this error

TypeError: undefined is not an object (evaluating 'this._routerState.parent')  

Answer 1

Using TestBed

 beforeEach(async(() => {      TestBed.configureTestingModule({        declarations: [YourComponent],        imports: [],        providers: [          {            provide: ActivatedRoute, useValue: {              params: Observable.of({ id: 'test' })            }          }        ]      })        .compileComponents();    }));

Answer 2

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