title: Unit test 'success' and 'error' observable response in component for Angular 2
body: <p>I'm writing a unit test for a component that makes a call to a service OnInit. If the response is a 'success' one action taken and another for an 'error'.</p>
  
  <p>What is the best way to test both cases? I've created a simplified version of the component and unit test. Something that I could easily test against in both cases.</p>
  
  <p>I've attempted to implement the solution <a href="https://stackoverflow.com/questions/40969759/how-can-i-mock-an-observable-throw-in-an-angular2-test">here</a> but I must be off on the implementation. I've also attempted to throw an error as you will see in the spec and comments.</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>@Component({
    selector: 'app-observer-throw-unit-test',
    template: '&lt;p&gt;{{ data }}&lt;/p&gt;'
  })
  export class ObserverThrowUnitTestComponent implements OnInit {
      public data: string;
  
      constructor(private _observerThrowService: ObserverThrowService) { }
  
      ngOnInit() {
          this._observerThrowService.getData().subscribe(
              (data) =&gt; {
                  this.data = data;
              },
              (error) =&gt; {
                  this.redirect()
              }
          )
      }
  
      redirect() {
          this.data = "Redirecting...";
      }
  
  }
  </code></pre>
  
  <p><strong>Spec</strong></p>
  
  <pre><code>const data: string = "Lorem ipsum dolor sit amet.";
  
  const ObserverThrowServiceStub = {
    error: false,
    getData() {
      return Observable.create((observer) =&gt; {
        if(this.error) {
          observer.error(new Error());
        } else {
          observer.next(data);
        }
        observer.complete();
      })
    }
  }
  
  describe('ObserverThrowUnitTestComponent', () =&gt; {
    let component: ObserverThrowUnitTestComponent;
    let fixture: ComponentFixture&lt;ObserverThrowUnitTestComponent&gt;;
    let _observerThrowService: ObserverThrowService;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ ObserverThrowUnitTestComponent ],
        providers: [
          { provide: ObserverThrowService, useValue: ObserverThrowServiceStub },
        ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ObserverThrowUnitTestComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      _observerThrowService = TestBed.get(ObserverThrowService);
    });
  
    it('should set "data" to "Lorem ipsum dolor sit amet." on success', () =&gt; {
        expect(component.data).toEqual("Lorem ipsum dolor sit amet.");
    });
  
    it('should set "data" on "Redirecting..." on error',() =&gt; {
      ObserverThrowServiceStub.error = true;
      // spyOn(_observerThrowService, "getData").and.returnValue(Observable.throw("error")); // This did not work and returned : TypeError: undefined is not a constructor (evaluating 'Observable_1.Observable.throw("error")') in src/test.ts
      spyOn(_observerThrowService, "getData")
      expect(component.data).toEqual("Redirecting...");
    });
  
    it('should set "data" on "Redirecting..." on error',() =&gt; {
      // This works after setting error to true in the previous test
      spyOn(_observerThrowService, "getData")
      expect(component.data).toEqual("Redirecting...");
    });
  
  });
  </code></pre>