title: Angular 2 / Karma / Mock Connection Error Handling Not Working
body: <p>I am running a Karma/Jasmine on Angular 2 code to test a http data service with a mock back end.  I am stuck on trapping the Observable.throw. The idea with the test is to trigger an error in parsing the mock response by putting non-parsable junk into response body which triggers an error in the data service I am testing. Here are the relevant parts of the test.  </p>
  
  <pre><code>  beforeEach(() =&gt; {
        this.injector = ReflectiveInjector.resolveAndCreate([
          {provide: ConnectionBackend, useClass: MockBackend},
          {provide: RequestOptions, useClass: BaseRequestOptions},
          Http,
          DataQueryService,
        ]);
        this.testDataQueryService = this.injector.get(DataQueryService);
        this.backend = this.injector.get(ConnectionBackend) as MockBackend;
        this.backend.connections.subscribe((connection: any) =&gt; this.lastConnection = connection);
    });
  </code></pre>
  
  <p>...</p>
  
  <pre><code>      it( 'Catches Errors' ,   
        fakeAsync( ()  =&gt;       {
            var result: any;
            var errorResult: any;
            //result = null;
            let testObject= {testField:'blah blah'};
            this.testDataQueryService.getDataFromServer ('//localhost:8080/04_EE_Project/TestServlet',null     )  
                  .subscribe( mockParsedResponse =&gt;  result=mockParsedResponse, error=&gt; this.errorResult = &lt;any&gt;error );
  
           this.lastConnection.mockRespond(new Response
            (new ResponseOptions({body: '######' ,
             url: '//localhost:8080/04_EE_Project/TestServlet'         
                      })));  
              tick();         
  
          expect(result).toBeUndefined();
          expect(errorResult).toBeDefined();  //--- FAILING!!!! :(
                              }  )   );
  </code></pre>
  
  <p>Here is the data query service I am testing.  From debugging I do know the catch is activating:</p>
  
  <pre><code>import { Injectable }              from '@angular/core';
  import { Http, Response, RequestOptionsArgs  }          from '@angular/http';
  
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/observable/throw';
  
  @Injectable()
  export class DataQueryService {
  
  constructor(private http: Http) { }
  
  getDataFromServer(url: string, requestOptionsArgs: RequestOptionsArgs): Observable&lt;Object&gt; { 
          return this.http.get(url, requestOptionsArgs).map(this.extractData).catch( error =&gt; {
          console.log('DataQueryService error thrown: ' + error );
          var thrownError = Observable.throw(error )
          return thrownError; }) ;
  
      }
  private extractData(res: Response) {
  
          var result =  {"status": res["status"],"statusText": res["statusText"],"type": res["type"], "headers": res["headers"] ,
          "Body":  res.json()};
  
          return result || {};
  
      }
  </code></pre>
  
  <p>}</p>
  
  <p>I have spent some time debugging and I do know that the 'catch' is being triggered and "thrownError" is being defined on in the data service I am testing (this was inserted for debugging).  However, on the other side..</p>
  
  <pre><code>error=&gt; this.errorResult = &lt;any&gt;error 
  </code></pre>
  
  <p>... is not getting the error result, so the test fails as the error isn't coming back into the test despite the catch block executing in the code being test.  It appears the second callback in 'subscribe' that is intended to populate errorResult isn't functional as intended.  </p>
  
  <p>How do I capture the error successfully in this test, as my approach isn't working?</p>