How to unit test a Angular 4 component which uses router.paramMap

Question

I m new to angular 4 and trying to test one of the angular 4 feature router.paramMap from unit tests, Reading route params in fallowing way and working as expected in my application.

constructor(private router:Router, private actRoute:ActivatedRoute) {
}

ngOnInit() {
    this.router.paramMap.subscribe(params => {
        params.get(id);
    })
......
}

But while running unit test, i m getting error which says cannot call subscribe method of undefined even though i m passing passing route param as below.

{
  provide: ActivatedRoute,
  useValue: { params: Observable.of({id: 1}) }
}

Please suggest

Answer 1

You need to provide paramMap instead of params. paramMap should be of type ParamMap from @angular/router, so normal object can be converted to ParamMap using the method convertToParamMap() from @angular/routing.

You can provide the mock ActivatedRoute like below:

import { convertToParamMap} from '@angular/router';
....
.....

{
      provide: ActivatedRoute,
      useValue: { paramMap: Observable.of(convertToParamMap({id: 1})) }
}

Answer 2

I am using a slightly different method of getting the params in my component:

this.id = this.route.snapshot.paramMap.get('id');

And this is what worked for me in the jasmine test:

{
      provide: ActivatedRoute,
      useValue: {
        snapshot: {
          paramMap: convertToParamMap({id: 1})
        }
      }
}