How to mock route.snapshot.params?

Question

In my Angular 4 component I have something like:

constructor(private route: ActivatedRoute) { }  ngOnInit() {   this.myId = this.route.snapshot.params['myId']; } 

And I'm trying to create a mock that suppose to look like follows:

class MockActivatedRoute extends ActivatedRoute {   public params = Observable.of({ myId: 123 }); }     

My test fails with:

TypeError: Cannot read property 'params' of undefined.

How do I suppose to mock it? Have I misunderstood the proper usage of ActivatedRoute and should better use router.subscribe in my component? I saw some complicated examples where people mocked snapshot itself, however for me it looks overcomplicated.

---

The test itself is quite simple:

describe('ngOnInit', () => { it('should set up initial state properly',   () => {   const component = TestBed.createComponent(MyComponent).componentInstance;     component.ngOnInit();     expect(component.myId).toEqual('123');   }); }); 

If I simply change a method under the test to something like follows - the test works:

ngOnInit() {     //this.myId = this.route.snapshot.params['myId'];     this.route.params.subscribe(params => {     this.myId = params['myId'];     }); } 

Obviously I need to mock Activated snapshot, but is there a better approach?

Answer 1

Ok, I've found how to mock ActivatedRoute snapshot in the simple way. Something like this works for me:

providers: [MyComponent, {   provide: ActivatedRoute,   useValue: {snapshot: {params: {'myId': '123'}}} } 

Thanks :)

Answer 2

If using route.snapshot.paramMap.get( 'uuid' ) instead:

import { ActivatedRoute, convertToParamMap } from '@angular/router';  {     provide: ActivatedRoute, useValue:         { snapshot: { paramMap: convertToParamMap( { 'uuid': '99-88-77' } ) } } }