title: How to mock route.snapshot.params?
body: <p>In my Angular 4 component I have something like:</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(private route: ActivatedRoute) {
  }
  
  ngOnInit() {
    this.myId = this.route.snapshot.params['myId'];
  }
  </code></pre>
  
  <p>And I'm trying to create a mock that suppose to look like follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>class MockActivatedRoute extends ActivatedRoute {
    public params = Observable.of({ myId: 123 });
  }    
  </code></pre>
  
  <p>My test fails with:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'params' of undefined.</p>
  </blockquote>
  
  <p>How do I suppose to mock it? Have I misunderstood the proper usage of <code>ActivatedRoute</code> and should better use <code>router.subscribe</code> in my component? I saw some complicated examples where people mocked snapshot itself, however for me it looks overcomplicated.</p>
  
  <hr>
  
  <p>The test itself is quite simple:</p>
  
  <pre><code>describe('ngOnInit', () =&gt; {
  it('should set up initial state properly',
    () =&gt; {
    const component = TestBed.createComponent(MyComponent).componentInstance;
      component.ngOnInit();
      expect(component.myId).toEqual('123');
    });
  });
  </code></pre>
  
  <p>If I simply change a method under the test to something like follows - the test works:</p>
  
  <pre><code>ngOnInit() {
      //this.myId = this.route.snapshot.params['myId'];
      this.route.params.subscribe(params =&gt; {
      this.myId = params['myId'];
      });
  }
  </code></pre>
  
  <p>Obviously I need to mock Activated snapshot, but is there a better approach?</p>