title: Angular 2 RC how to unit test an observable
body: <p>I am writing some tests for an angular 2 RC application and I'm having some issues with the testing of observables. I mocked up the method setting it's type as observable but when the unit being tested tries to subscribe to the mocked observable I get an error <code>'Cannot read property 'subscribe' of undefined'</code></p>
  
  <p>I'm testing my <code>DashboardComponent</code>, which injects a <code>model3DService</code> and calls <code>model3DService.get3DModels()</code> which is an observable that does an http request and returns an array of 3D model objects. </p>
  
  <p>Here's some sample code:</p>
  
  <p><strong>Dashboard Component</strong></p>
  
  <pre><code>import { Model3DService } from '../../services/model3D/model3D.service';
  import { ProjectService } from '../../services/project/project.service';
  
  @Component({
    selector: 'cmg-dashboard',
    styles: [require('./css/dashboard.scss')],
    template: require('./dashboard.html')
  })
  export class DashboardComponent implements OnInit {
    constructor(
      private projectService: ProjectService,
      private model3DService: Model3DService
    ) { }
  
    ngOnInit (): void {
      this.model3DService.get3DModels().subscribe((res: any[]) =&gt; {
        this.findProjects(res);
        this.models = res;
        this.projectService.isProjectSelected = true;
        this.createProject(res[0]);
      });
    }
  }
  </code></pre>
  
  <p><strong>Model3DService</strong></p>
  
  <pre><code>@Injectable()
  export class Model3DService {
   private models: any[] = [];
  
   public get3DModels (): Observable&lt;any&gt; {
      return this.http.get('../../../json/3DModel.json')
      .map(( res: Response ) =&gt; {
        this.models = res.json();
        return this.models;
      });
    }
  }
  </code></pre>
  
  <p>Okay now that we have the under test heres the test I'm writing.</p>
  
  <p><strong>Dashboard Component Spec</strong></p>
  
  <pre><code>class MockModel3DService {
    public get3DModels(): Observable&lt;any&gt; {
      return;
    }
  }
  
  describe('Dashboard Component', () =&gt; {
    beforeEachProviders(() =&gt; {
      return [
        DashboardComponent,
        provide(ProjectService, {
          useClass: MockProjectService
        }),
        provide(Model3DService, {
          useClass: MockModel3DService
        })
      ];
    });
  
    describe('ngOnInit', () =&gt; {
      it('should call model3DService.get3DModels on init', (inject([DashboardComponent], (dashboardComponent: DashboardComponent, model3DService: MockModel3DService) =&gt; {
        dashboardComponent.ngOnInit();
        expect(model3DService.get3DModels).toHaveBeenCalled();
      })));
    });
  });
  </code></pre>