title: Angular 2 - test for change in route params
body: <p>I have a component in angular 2 which responds to changes in the route parameters (the component doesn't reload from scratch because we're not moving out of the main route. Here's the component code:</p>
  
  <pre><code>export class MyComponent{
      ngOnInit() {
          this._routeInfo.params.forEach((params: Params) =&gt; {
              if (params['area']){
                  this._pageToShow =params['area'];
              }
          });
      }
  }
  </code></pre>
  
  <p>This works a treat and <code>_pageToShow</code> is set appropriate on navigation.</p>
  
  <p>I'm trying to test the behaviour on a change to the route (so a second trigger of the observable but it's refusing to work for me.) Here's my attempt: </p>
  
  <pre><code>it('sets PageToShow to new area if params.area is changed', fakeAsync(() =&gt; {
      let routes : Params[] = [{ 'area': "Terry" }];
      TestBed.overrideComponent(MyComponent, {
          set: {
              providers: [{ provide: ActivatedRoute,
                  useValue: { 'params': Observable.from(routes)}}]
          }
      });
  
      let fixture = TestBed.createComponent(MyComponent);
      let comp = fixture.componentInstance;
      let route: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
      comp.ngOnInit();
  
      expect(comp.PageToShow).toBe("Terry");
      routes.splice(2,0,{ 'area': "Billy" });
  
      fixture.detectChanges();
      expect(comp.PageToShow).toBe("Billy");
  }));
  </code></pre>
  
  <p>But this throws a <code>TypeError: Cannot read property 'subscribe' of undefined</code> exception when I run it. If I run it without the <code>fixture.detectChanges();</code> line it fails as the second expectation fails.</p>