Angular 2 / Karma / 模拟连接错误处理不起作用答案

【问题标题】：Angular 2 / Karma / Mock Connection Error Handling Not WorkingAngular 2 / Karma / 模拟连接错误处理不起作用
【发布时间】：2017-05-21 22:18:46
【问题描述】：

我在 Angular 2 代码上运行 Karma/Jasmine 来测试带有模拟后端的 http 数据服务。我被困在捕获 Observable.throw 上。测试的想法是通过将不可解析的垃圾放入响应主体中来触发解析模拟响应的错误，这会触发我正在测试的数据服务中的错误。以下是测试的相关部分。

  beforeEach(() => {
      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) => this.lastConnection = connection);
  });

...

      it( 'Catches Errors' ,   
      fakeAsync( ()  =>       {
          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 =>  result=mockParsedResponse, error=> this.errorResult = <any>error );

         this.lastConnection.mockRespond(new Response
          (new ResponseOptions({body: '######' ,
           url: '//localhost:8080/04_EE_Project/TestServlet'         
                    })));  
            tick();         

        expect(result).toBeUndefined();
        expect(errorResult).toBeDefined();  //--- FAILING!!!! :(
                            }  )   );

这是我正在测试的数据查询服务。从调试中我知道捕获正在激活：

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<Object> { 
        return this.http.get(url, requestOptionsArgs).map(this.extractData).catch( error => {
        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 || {};

    }

}

我已经花了一些时间进行调试，并且我知道正在触发“catch”，并且在我正在测试的数据服务中定义了“throwError”（这是为了调试而插入的）。然而，另一方面..

error=> this.errorResult = <any>error

... 没有得到错误结果，因此测试失败，因为尽管在正在测试的代码中执行了 catch 块，但错误没有返回到测试中。似乎“订阅”中旨在填充 errorResult 的第二个回调没有按预期运行。

由于我的方法不起作用，如何在此测试中成功捕获错误？

【问题讨论】：

标签： angular error-handling jasmine rxjs karma-runner

【解决方案1】：

进行了一些故障排除并将 console.log 插入到错误处理程序中，结果证明它毕竟正在执行。测试最后部分的“this”关键字的遗漏导致了这个问题。这是完成的测试：

       it( 'Catches Errors' ,   
      fakeAsync( ()  =>       {
          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 =>  result=mockParsedResponse,  

                (err)=> {console.log('Error has been handled in test 4!: '+ err.message) ;  this.errorResult=err    ;    }  );

         this.lastConnection.mockRespond(new Response
          (new ResponseOptions({body: '######' ,
           url: '//localhost:8080/04_EE_Project/TestServlet'         
                    })));  
            tick();         

        expect(result).toBeUndefined();
        expect(this.errorResult).toBeDefined();  //fixed now, test successful
                            }  )   );

原来你是为了这个？！

expect(this.errorResult).toBeDefined();

但不是：

期望(结果).toBeUndefined();

...我是 javascript 的初学者，我还不完全理解“this”关键字。

【讨论】：