Angular 7 - 在单元测试中捕获 HttpErrorResponse

Question

我目前正在学习 Angular 7(没有使用过任何以前的版本)并且在为服务编写单元测试时遇到了我无法修复的问题。

我有一项服务可以从 REST 获取 JSON 并将其解析为一个类。引用 Angular 文档，我使用 HttpClientSpy 编写了一个测试来模拟 404 错误。

发生了什么:测试失败并显示错误消息:“expected data.forEach is not a function to contain '404'”

因此，服务获取 HttpErrorResponse 作为输入，但尝试将其解析为映射函数中的常规响应。失败，调用 catchError 并且抛出 data.forEach 不是函数错误。

预期行为:我希望 map() 不会执行，它应该直接跳转到 catchError 函数。

我是如何修复它的(目前):将以下代码行添加到服务的 map 函数中可以使测试正常进行。

if (data instanceof HttpErrorResponse)
      throw new HttpErrorResponse(data);

测试:

it('should throw an error when 404', () => {

const errorResponse = new HttpErrorResponse({
  error: '404 error',
  status: 404, statusText: 'Not Found'
});

httpClientSpy.get.and.returnValue(of(errorResponse));

service.getComments().subscribe(
  fail,
  error => expect(error.message).toContain('404')
);
});

服务:

getComments(): Observable<CommentList> {
return this.http
.get('https://jsonplaceholder.typicode.com/comments')
.pipe(
  map((data: Array<any>) => {
    let t: Array<Comment> = [];

    data.forEach(comment => {

      if(!('id' in comment) || !('body' in comment) || !('email' in comment) || !('name' in comment))
        throw new Error("Could not cast Object returned from REST into comment");

      t.push(<Comment>{
        id: comment.id,
        body: comment.body,
        author: comment.email,
        title: comment.name,
      });

    });
    return new CommentList(t);
  }),
  catchError((err: HttpErrorResponse) => {
    return throwError(err);
  })
);
}

我是不是弄错了什么？我认为预期的行为是我应该体验的，至少那是我解释 Angular 文档的方式。

Answer 1

迟到的答案，方式略有不同，但这也有效。

  it('should show modal if failed', inject([Router], (mockRouter: Router) => {
  const errorResponse = new HttpErrorResponse({
     error: { code: `some code`, message: `some message.` },
     status: 400,
     statusText: 'Bad Request',
  });

  spyOn(someService, 'methodFromService').and.returnValue(throwError(errorResponse));
  expect...
  expect...
  expect...
}));