title: Cannot read property unsubscribe of undefined: Angular2 testing
body: <p>I am trying to test a component which has ngOnDestroy() method which has all the unsubscribe() method calls. But, while testing, when I run my testing file (spec file) it gives me error saying:</p>
  
  <pre><code>cannot read property 'unsubscribe' of undefined
  </code></pre>
  
  <p>I have done the following import in my testing file:</p>
  
  <pre><code>import { Subscription }   from 'rxjs/Subscription';
  </code></pre>
  
  <p>so I think this should be enough to get all the methods in Subscription, but still the error is there. Also, I tried adding 'Subscription' to my 'imports', 'declarations' and 'providers' list of the testing file, still the error is there.</p>
  
  <p>Below is a code snippet:</p>
  
  <pre><code>//component
  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Subscription }   from 'rxjs/Subscription';
  import {
   NinjaService } from '../../../../ninja.service';
  
  
   @Component({
   selector: 'ninja-files',
   templateUrl: './ninja-files.component.html',
   styleUrls: ['./ninja-files.component.css']
  })
   export class ninjaFilesComponent implements OnInit, OnDestroy {
  
   showNinjaFiles: boolean = true;
  
   addFileSubscription: Subscription;
  
   constructor(private ninjaService: NinjaService) {
   ........
  }
  
   ngOnInit() {
    this.addFileSubscription = this.NinjaService.AddedFile$
    .subscribe((fileFormat: FileFormat) =&gt; {
    console.log('File being added: ' + fileFormat.fileName); }
  
    ngOnDestroy() {
    this.addFileSubscription.unsubscribe();
  }
  }
  </code></pre>
  
  <p>Then I have the testing file for this component as follows:</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Subscription }   from 'rxjs/Subscription';
  import {
   NinjaService } from '../../../../ninja.service';
  import { TestBed, async, fakeAsync ,ComponentFixture, } from '@angular/core/testing';
  import { DebugElement }    from '@angular/core';
  import { By }              from '@angular/platform-browser';
  import {} from 'jasmine';
  
  describe('Component: NinjaFiles', () =&gt; {
  
    let fixture: ComponentFixture&lt;ninjaFilesComponent&gt;;
    let component: ninjaFilesComponent;
    let ninjaServiceStub;
  
  beforeEach( async(() =&gt; {
   //stub NinjaService
   let ninjaServiceStub= {};
  
   fixture = TestBed.configureTestingModule({
   declarations: [ ninjaFilesComponent],
  }).createComponent(ninjaFilesComponent);
   component = fixture.componentInstance;
  
  }));
  
  it('Page Title', async(() =&gt; {
   let pageTitle = fixture.debugElement.query(By.css('.page-title'));
   expect(pageTitle).toBeTruthy();
  }));
  
   it('Counting the files', () =&gt; {
    let fileCount= fixture.debugElement.query(By.css('.file-count'));
    expect(fileCount).toBeTruthy();
  });
  </code></pre>
  
  <p>When I run the above testing code, it gives me error saying "cannot read property 'unsubscribe' of undefined" (which means its not being able to define the subscription object 'addFileSubscription' that I've defined in the component class.</p>
  
  <p>Can somebody suggest a workaround?</p>