[英]How to mock Angular 4.3 httpClient an error response in testing
我有一個下面的interceptor auth-interceptor.service.ts
import {Injectable, Injector} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Cookie} from './cookie.service';
import {Router} from '@angular/router';
import {UserService} from './user.service';
import {ToasterService} from '../toaster/toaster.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private injector: Injector) {}
private handleError(err: HttpErrorResponse): Observable<any> {
let errorMsg;
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
errorMsg = `An error occurred: ${err.error.message}`;
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
errorMsg = `Backend returned code ${err.status}, body was: ${err.error}`;
}
if (err.status === 401 || err.status === 403) {
this.injector.get(UserService).purgeAuth();
this.injector.get(ToasterService).showError(`Unauthorized`, errorMsg);
this.injector.get(Router).navigateByUrl(`/login`);
}
console.error(errorMsg);
return Observable.throw(errorMsg);
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header.
const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
// Pass on the cloned request instead of the original request.
return next.handle(authReq).catch(err => this.handleError(err));
}
}
現在我試圖模擬http.get
來拋出錯誤,以便方法handleError
控制錯誤消息。
下面是我對測試用例auth-interceptor.service.specs.ts
import {async, inject, TestBed} from '@angular/core/testing';
import {AuthInterceptor} from './auth-interceptor.service';
import {ApiService} from './api.service';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {environment} from '../../../environments/environment';
describe(`AuthInterceptor`, () => {
const somePath = `/somePath`;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [AuthInterceptor, ApiService]
});
});
it(`should be created`, inject([AuthInterceptor], (service: AuthInterceptor) => {
expect(service).toBeTruthy();
}));
it(`should log an error to the console on error on get()`, async(inject([ApiService, HttpTestingController],
(apiService: ApiService, httpMock: HttpTestingController) => {
spyOn(console, 'error');
apiService.get(somePath).subscribe((res) => {
console.log(`in success:`, res);
}, (error) => {
console.log(`in error:`, error);
});
const req = httpMock.expectOne(`${environment.apiUri}${somePath}`);
req.flush({
type: 'ERROR',
status: 404,
body: JSON.stringify({color: `blue`})
});
expect(console.error).toHaveBeenCalled();
}))
);
});
在刷新響應時,我不確定如何刷新錯誤響應,以便在我的攔截器中調用方法handleError
,最終調用console.error
。 文檔沒有我的情況的任何例子。 任何幫助或建議表示贊賞。
HttpTestingController
類中的expectOne
方法返回TestRequest
對象。 此TestRequest類具有可用於傳遞的flush
方法
成功和不成功的回應。
我們可以通過返回一個正文以及一些額外的響應頭(如果有的話)來解決請求。 相關信息可在此處找到。
現在,回過頭來說明如何做到這一點。 您可以根據您的使用情況自定義以下代碼段。
http = TestBed.get(HttpTestingController);
let response: any;
let errResponse: any;
const mockErrorResponse = { status: 400, statusText: 'Bad Request' };
const data = 'Invalid request parameters';
apiService.get(somePath).subscribe(res => response = res, err => errResponse = err);
http.expectOne('url/being/monitored').flush(data, mockErrorResponse);
expect(errResponse).toBe(data);
注意 :在撰寫此注釋時, statusText
中需要mockErrorResponse
。 相關信息可以在這里找到。
PS : TestRequest
類的error
方法可用於在我們的測試用例中模擬網絡錯誤,因為它需要一個Error實例。 以下代碼段顯示了這一點。
http.expectOne(someUrl).error(new ErrorEvent('network error'));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.