Angular 2 - test for change in route params
<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>