使用catch和_throw错误逻辑测试Angular 4 HttpTestingController

Question

我使用HttpClient使用POST请求服务，如果服务器响应并且错误我需要捕获它格式化消息并重新抛出它。我试图测试这种情况，但未能模拟测试。 HttpTestingController没有发回我的自定义错误消息，也没有在服务上捕获它并重新抛出它，是什么方法这样做

服务代码：

 login(credentials: LoginPayload): Observable<LoginSuccessPayload> {

      return this.http.post<LoginSuccessPayload>('/api/auth/signin', credentials)
             .map(res => {authUser: res.user})
             .catch((error: HttpErrorResponse) => {
                if (error.message) {
                    return _throw(error);
                }
                return _throw({message: 'Notification.LoginError'});
             });

 }

现在考试了

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        providers: [AuthService]
    });

    authService = TestBed.get(AuthService);
    httpMock = TestBed.get(HttpTestingController);
});

it('should format the error message', (done) => {
    const credentials = {userName: 'bob', password: '123'} as LoginPayload;
    const mockErrorResponse = {message: 'failed to login'} ;

    authService.login(credentials).subscribe(() => {}, err => {
        expect(err.message).toEqual(mockErrorResponse.message);
        done();
    });

    const req = httpMock.expectOne('/api/auth/signin');
    req.error(new ErrorEvent(mockErrorResponse.message));

    httpMock.verify();
});

Answer 1

我知道我已经迟到了，但我认为无论如何我会回答这个问题，因为任何人都会像我一样偶然发现这一点。我发现在这个错误案例周围的angular.io上完整的lack of documentation是疯了。 “我自己想出来”，我想？

无论如何...我采取的方法是完全避免使用.error()，因为它似乎不像使用.flush()那样容易，并且state文档可以用于成功和不成功的响应。

以下是我将如何更新您的代码以使用flush：

it('should format the error message', (done) => {
    const credentials = {userName: 'bob', password: '123'} as LoginPayload;
    const mockErrorResponse = {message: 'failed to login'} ;

    authService.login(credentials).subscribe(() => {}, err => {
        // NOTE: err.error.message
        expect(err.error.message).toEqual(mockErrorResponse.message);
        done();
    });

    const req = httpMock.expectOne('/api/auth/signin');
    req.flush({message: mockErrorResponse.message}, {status: 400, statusText: ''});

    httpMock.verify();
});

关于HttpClient中的@angular/common/http与Http中的@angular/http相关的这个更新的一个令人烦恼的部分是错误信息现在是err.error而不是subscribe()本身的err的属性。

因此，如果你像我一样，并且你从一个升级到另一个，所有对err.message的引用现在必须更新为err.error.message。我希望这有帮助。

Answer 2

我有一些建议可供我使用。

首先我要替换它：

authService = TestBed.get(AuthService);
httpMock = TestBed.get(HttpTestingController);

有了这个：

const testBed = getTestBed();
authService = testBed.get(AuthService);
httpMock = testBed.get(HttpTestingController);

我认为这里的重点是你无法真正访问Testbed。

我还要验证您的请求是一个POST请求，其中包含以下内容：

expect(req.request.method).toBe("POST");

这些是我首先想到的东西。