Unit test for a component with dependency which has dependencies, what's wrong?
<p>I have annoying error that probably by my mistake I cannot resolve.
I have on simple component which is actually nothing else than a top-bar element in my web application.</p>

<p>This component as you can see has only one dependency, the <code>UserService</code> and it uses it quite simply:</p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { MdButton } from '@angular2-material/button';
import { MdIcon , MdIconRegistry} from '@angular2-material/icon';
import { UserService } from '../services/index';
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS 
  } from '@angular/router-deprecated';


@Component({
  moduleId: module.id,
  selector: 'top-bar',
  templateUrl: 'top-bar.component.html',
  styleUrls: ['top-bar.component.css'],
  providers: [MdIconRegistry, UserService, ROUTER_PROVIDERS],
  directives: [MdButton, MdIcon, ROUTER_DIRECTIVES]
})
export class TopBarComponent implements OnInit {

  constructor(private userService: UserService) {
    this.userService = userService;
  }

  ngOnInit() {
  }

  /**
   * Call UserService and logout() method
   */
  logout() {
    this.userService.logout();
  }

}
</code></pre>

<p>As this service has also some dependencies (router etc) I had to provide them at the <code>beforeEachProviders</code> method as you can see:</p>

<pre><code>import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
} from '@angular/core/testing';
import { TopBarComponent } from './top-bar.component';
import {
  Router, RootRouter, RouteRegistry, ROUTER_PRIMARY_COMPONENT
} from '@angular/router-deprecated';
import { provide } from '@angular/core';
import { SpyLocation } from '@angular/common/testing';
import { UserService } from '../services/index';

describe('Component: TopBar', () =&gt; {

  beforeEachProviders(() =&gt; [
      RouteRegistry,
      provide(Location, { useClass: SpyLocation }),
      provide(ROUTER_PRIMARY_COMPONENT, { useValue: TopBarComponent }),
      provide(Router, { useClass: RootRouter }),
      UserService,
      TopBarComponent
  ]);

  it('should inject the component', inject([TopBarComponent],
      (component: TopBarComponent) =&gt; {
    expect(component).toBeTruthy();
  }));

});
</code></pre>

<p>When I run the test though I get this error message:</p>

<blockquote>
  <p>Chrome 51.0.2704 (Mac OS X 10.11.5) Component: TopBar should inject the component FAILED
      Error: No provider for Location! (TopBarComponent -> UserService -> Router -> Location)
      Error: DI Exception[......]</p>
</blockquote>

<p><strong>First</strong> of all as you can see the Location provider is provided.
And <strong>secondary</strong>, why my test requires to provide (or inject) also the dependencies of the used into the tested component service?</p>

<p>For example if from the above test I remove the Router the even that my component doesn't use Router I'll get an error because the used service does. Then shouldn't I received the same error in the component and not only in the test?</p>

<p><strong>UPDATE - CHANGE OF CODE &amp; ERROR MESSAGE</strong></p>

<p>I have manage to stop getting this error by changing my spec doe to this:</p>

<pre><code>import {
  beforeEach,
  describe,
  expect,
  it,
} from '@angular/core/testing';
import { TopBarComponent } from './top-bar.component';
import { UserService } from '../services/index';
import {
  Router
} from '@angular/router-deprecated';
import { Http } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';

describe('Component: TopBar', () =&gt; {

  let router: any = Router;
  let authHttp: any = AuthHttp;
  let http: any = Http;
  let component: TopBarComponent;
  let service: UserService = new UserService(router, authHttp, http);

  beforeEach(() =&gt; {
      component = new TopBarComponent(service);
  });

  it('logout function should work ', () =&gt; {
    let logout = component.logout;
    logout();
    expect(localStorage.getItem('token')).toBe(null);
  });

});
</code></pre>

<p>But know I'm getting this error from my component:</p>

<blockquote>
  <p>TypeError: Cannot read property 'userService' of undefined</p>
</blockquote>

<p>The mentioned error is on this function:</p>

<pre><code>logout() {
  this.userService.logout();
}
</code></pre>

<p>of my component but this is only on the test. In app it works normally. The function cannot reach constructor's parameter for some reason in my test.</p>

<p>kind of stack here...</p>