title: Testing Angular component with unsubscribe Error during cleanup of component
body: <p>I'm testing a component which subscribe router params. Every test pass and everything works fine. But if I look in the console, I can see an error:</p>
  
  <blockquote>
    <p>Error during cleanup of component ApplicationViewComponent
    localConsole.(anonymous function) @ context.js:232</p>
  </blockquote>
  
  <p>Do you know why this occurs?</p>
  
  <p><strong>I tried removing the <code>unsubscribe()</code> from <code>ngOnDestroy()</code> method and the error disappears.</strong></p>
  
  <p><strong>Is karma/jasmine supporting <code>unsubscribe()</code> automatically?</strong></p>
  
  <p>Here is the component and tests</p>
  
  <h2>Component</h2>
  
  <pre><code>import { Component, OnInit } from '@angular/core';   
  import { ActivatedRoute } from '@angular/router';
  import { Subscription } from 'rxjs/Rx'
  
  import { AppService } from 'app.service';
  
  @Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    private routeSubscription: Subscription;
  
    // Main ID
    public applicationId: string;
  
  
    constructor(
      private route: ActivatedRoute,
      private _service: AppService
    ) { }
  
    ngOnInit() {
      this.routeSubscription = this.route.params.subscribe(params =&gt; {
        this.applicationId = params['id'];
  
        this.getDetails();
        this.getList();
      });
    }
  
    getDetails() {
      this._service.getDetails(this.applicationId).subscribe(
        result =&gt; {     
          console.log(result);
        },
        error =&gt; {  
          console.error(error);        
        },
        () =&gt; {
          console.info('complete');
        }
      );
    }
  
    getList(notifyWhenComplete = false) {
      this._service.getList(this.applicationId).subscribe(
        result =&gt; {     
          console.log(result);
        },
        error =&gt; {  
          console.error(error);        
        },
        () =&gt; {
          console.info('complete');
        }
      );
    }
  
    ngOnDestroy() {
      this.routeSubscription.unsubscribe();
    }
  
  }
  </code></pre>
  
  <h2>Component spec file</h2>
  
  <pre><code>import { NO_ERRORS_SCHEMA } from '@angular/core';
  import {
    async,
    fakeAsync,
    ComponentFixture,
    TestBed,
    tick,
    inject
  } from '@angular/core/testing';
  import {
    RouterTestingModule
  } from '@angular/router/testing';
  import {
    HttpModule
  } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { Router, ActivatedRoute } from '@angular/router';
  
  // Components
  import { AppComponent } from './app.component';
  
  // Service
  import { AppService } from 'app.service';
  import { AppServiceStub } from './app.service.stub';
  
  let comp:    AppComponent;
  let fixture: ComponentFixture&lt;AppComponent&gt;;
  let service: AppService;
  
  let expectedApplicationId = 'abc123';
  
  describe('AppComponent', () =&gt; {
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [AppComponent],
        imports: [RouterTestingModule, HttpModule],
        providers: [
          FormBuilder,
          {
            provide: ActivatedRoute,
            useValue: {
              params:  Observable.of({id: expectedApplicationId})
            }
          },
          {
            provide: AppService,
            useClass: AppServiceStub
          }    
        ],
        schemas: [ NO_ERRORS_SCHEMA ]
      })
      .compileComponents();
    }));
  
    tests();
  });
  
  function tests() {
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AppComponent);
      comp = fixture.componentInstance;
  
      service = TestBed.get(AppService);
    });
  
  
    /*
    *   COMPONENT BEFORE INIT
    */
    it(`should be initialized`, () =&gt; {
      expect(fixture).toBeDefined();
      expect(comp).toBeDefined();
    });
  
  
    /*
    *   COMPONENT INIT
    */
  
    it(`should retrieve param id from ActivatedRoute`, async(() =&gt; {
      fixture.detectChanges();
  
      expect(comp.applicationId).toEqual(expectedApplicationId);
    }));
  
    it(`should get the details after ngOnInit`, async(() =&gt; {
      spyOn(comp, 'getDetails');
      fixture.detectChanges();
  
      expect(comp.getDetails).toHaveBeenCalled();
    }));
  
    it(`should get the list after ngOnInit`, async(() =&gt; {
      spyOn(comp, 'getList');
      fixture.detectChanges();
  
      expect(comp.getList).toHaveBeenCalled();
    }));
  }
  </code></pre>
  
  <h3>service.stub</h3>
  
  <pre><code>import { Observable } from 'rxjs/Observable';
  
  export class AppServiceStub {
    getList(id: string) {
      return Observable.from([              
        {
          id: "7a0c6610-f59b-4cd7-b649-1ea3cf72347f",
          name: "item 1"
        },
        {
          id: "f0354c29-810e-43d8-8083-0712d1c412a3",
          name: "item 2"
        },
        {
          id: "2494f506-009a-4af8-8ca5-f6e6ba1824cb",
          name: "item 3"      
        }
      ]);
    }
    getDetails(id: string) {
      return Observable.from([      
        {        
          id: id,
          name: "detailed item 1"         
        }
      ]);
    }
  }
  </code></pre>