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')

Try and just use `{ parent: { params: Observable.of({id:"testId"}) }} as ActivatedRoute` instead of a real ActivatedRoute — Paul Samsotha, Nov 24 '16 at 15:15
you havent added `implements OnInit` to your class definition — mast3rd3mon, Mar 14 '17 at 09:00

score 58 · Answer 1 · answered Mar 14 '17 at 08:38

58

Using TestBed

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

answered Mar 14 '17 at 08:38

Kevin Black

886
1
8
7

TestBed is very slow sometimes when you compile, and you don't have to load TestBed when it's not necessary. – S.Galarneau Aug 30 '17 at 18:51
1

What if I want to catch this: this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/someurl'; ? – IntoTheDeep Nov 10 '17 at 09:25
4

how do I change the value of id in my it(...)? – EugenSunic Aug 07 '19 at 23:41

score 30 · Accepted Answer · answered Nov 24 '16 at 15:37

30

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

answered Nov 24 '16 at 15:37

S.Galarneau

2,194
1
24
26

Thank you for this, it is very helpful even for activated routes where you aren't concerned about the parent. Question: Is there a reason you prefer to new-up the component rather than inject the route and service? – glitchbane Feb 05 '17 at 17:11
Just because im not testing the component behavior... so no need to inject it really, the component shouldn't change anything in my test cases – S.Galarneau Feb 06 '17 at 16:03
You can also refer to the docs: https://angular.io/docs/ts/latest/testing#!#create-an-_observable_-test-double – peinearydevelopment Mar 03 '17 at 19:46
They changed docs for test double: [https://angular.io/docs/ts/latest/testing#!#stub-observable](https://angular.io/docs/ts/latest/testing#!#stub-observable) – Markus May 22 '17 at 13:27
1

Both of those testing doc links are broken :( – Splaktar Sep 29 '17 at 22:32
3

I got cannot assign 'parent' because it is constant or read-only property. Also there is missing props and interface: paramMap and queryParamMap. What should put for those, and will this work in Anuglar 4? – IntoTheDeep Nov 10 '17 at 09:23
If you want to go down this route you should use a mocking framework like typemoq. Soemthing like `foo = Mock.ofType()`, `foo.setup(r => r.queryParams).returns(() => { key: "whatever" }` – RJFalconer Dec 05 '18 at 09:46

score 19 · Answer 3 · edited Aug 25 '21 at 18:09

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

Thanks for your review. I've updated the answer with a code sample from the docs. — Garreth Golding, Apr 30 '18 at 17:26

score 6 · Answer 4 · answered Feb 04 '20 at 20:45

To customize a mocked ActivatedRoute's data inside each 'it' block, combine what Kevin Black suggested above

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

and the below code in the it('') block before instantiating a component using fixture.detectChanges()

it('test', fakeAsync(() => {
  let activatedRoute: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
  activatedRoute.queryParams = of({ firstName: 'john', lastName: 'smith' });

  fixture.detectChanges(); // trigger ngOninit()
  tick();
}));

Great example of how to override provider value after complieComponents() call — vvlnv, Jul 03 '21 at 23:14

score 6 · Answer 5 · answered Feb 27 '20 at 04:08

6

For scenarios in which you are reading the query params from the ActivatedRouteSnapshot like:

this.someProperty = this.route.snapshot.data.query['paramKey'];

The below code will be helpful in tests for feeding query params data into the route

{ 
  provide: ActivatedRoute, 
  useValue: {
    snapshot: {
      data: {
        query: {
          paramKey: 'paramValue'
        }
      }
    }
  }
}

answered Feb 27 '20 at 04:08

Muneeb

151
2
5

1

Properly explained. This one deserves correct answer – Jimit Patel Apr 26 '21 at 14:05
How does the actual test look like for this method? How to access the value inside the expect? – Crazybud May 24 '21 at 17:20
most relevant for angular 13+ ; maybe for earlier versions as well – aris Jan 31 '23 at 18:25

score 3 · Answer 6 · answered Jun 16 '17 at 19:52

You can also simple plass {params: {searchTerm: 'this is not me'}} as any) as ActivatedRouteSnapshot

detailds code

  (service.resolve(({params: {id: 'this is id'}} as any) as ActivatedRouteSnapshot,
    {} as RouterStateSnapshot)as Observable<xyzResolveData>)
    .subscribe((data) => {
      expect((data as xyzResolveData).results).toEqual(xyzData.results);
    });

Daniel Quinn · Answer 7 · 2021-03-12T18:47:04.353

Angular 9 version

Create your mock:

 const mockActivatedRoute = { 
   parent: { 
     paramMap: of(convertToParamMap(
         { organization: 'fakeOrganization' }
     ))}
 };

Provide it as the Activated Route

  providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }]

Test it

 describe('ngOnInit', () => {
     it('should get the route parameter', fakeAsync(() => {
       component.ngOnInit();

       expect(component.organization).toBe('fakeOrganization');
     }));
   });'

Code being tested

   ngOnInit(): void {
     this.route.parent.paramMap.subscribe(params => {
       this.organization = params.get('organization');
     });
   }

score 0 · Answer 8 · answered Jan 08 '21 at 17:53

Building off of @S.Galarneau 's accepted answer, here is the updated ActivatedRoute interface (angular 4+), with access modifiers, only using a handful of types, as well as using the providers array and integrating with TestBed:

This works great to create a mock interface and use the providers array to use your version of ActivatedRoute:

export class MockActivatedRoute implements ActivatedRoute{
  public snapshot;
  public url;
  public params;
  public queryParams: Observable<Params>;
  public fragment: Observable<string>;
  public data;
  public outlet;
  public component;
  public paramMap;
  public queryParamMap;
  public routeConfig;
  public root;
  public parent;
  public firstChild;
  public children;
  public pathFromRoot;
  public toString(): string {
    return '';
  };
}

And use with TestBed and Providers array, only dealing with the fragment property, like this:

  beforeEach(async((): void => {
    const route = new MockActivatedRoute();
    route.fragment = of('#myhash?some_params=some_value'); 
    // because fragment is an Observable, we need `of(value)`
    

  TestBed.configureTestingModule({
    // declarations, imports, and providers go next:
    providers:[
        { provide: ActivatedRoute, useValue: route},
    ]
  })

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

8 Answers8

Linked