[英]How to unit test this Angular typescript Http Error Interceptor that catches errors from a piped observable?
我正在運行一個實驗,我通過測試其他代碼(例如自動化單元和端到端測試)來學習角度和打字稿。 在我接受測試之后,我計划將其重新用於我正在為大學教室工作的寵物項目。
我至少在這里通過單元測試代碼的一半: http : //jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial
我已經嘗試了一段時間在單元測試下獲得以下代碼,但是我從我自己的想法或來自互聯網的想法嘗試的所有內容到目前為止都沒有成功:
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { AuthenticationService } from "src/app/authenticationService/AuthenticationService";
import { Observable, throwError } from "rxjs";
import { catchError } from "rxjs/operators";
import { Injectable } from "@angular/core";
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('before error handle')
return next.handle(request).pipe(catchError(err => {
console.log('in error handle')
if (err.status === 401) {
// auto logout if 401 response returned from api
this.authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
以下測試代碼和幾個變體未能成功地在控制台日志中顯示“錯誤處理”消息:
import { ErrorInterceptor } from "./ErrorInterceptor";
import { of, throwError, defer } from "rxjs";
describe('ErrorInterceptor', () => {
let errorInterceptor;
let authenticationServiceSpy;
beforeEach(() => {
authenticationServiceSpy = jasmine.createSpyObj('AuthenticationService', ['logout']);
errorInterceptor = new ErrorInterceptor(authenticationServiceSpy);
})
it('should create', () => {
expect(errorInterceptor).toBeTruthy();
})
describe('intercept', () => {
let httpRequestSpy;
let httpHandlerSpy;
const error = {status: 401, statusText: 'error'};
it('should auto logout if 401 response returned from api', () => {
//arrange
httpRequestSpy = jasmine.createSpyObj('HttpRequest', ['doesNotMatter']);
httpHandlerSpy = jasmine.createSpyObj('HttpHandler', ['handle']);
httpHandlerSpy.handle.and.returnValue({
pipe: () => {
return fakeAsyncResponseWithError({});
}
});
//act
errorInterceptor.intercept(httpRequestSpy, httpHandlerSpy);
//assert
//TBD
function fakeAsyncResponseWithError<T>(data: T) {
return defer(() => throwError(error));
}
})
})
})
這里有幾個問題。
httpHandlerSpy.handle()
返回值需要是一個Observable,因為它已經有了管道操作符,然后HttpInterceptor代碼可以根據需要將它傳遞給catchError。 我把Stackblitz放在一起來演示我如何處理這個問題。
從Stackblitz,這是規范( it
功能):
it('should auto logout if 401 response returned from api', () => {
//arrange
httpRequestSpy = jasmine.createSpyObj('HttpRequest', ['doesNotMatter']);
httpHandlerSpy = jasmine.createSpyObj('HttpHandler', ['handle']);
httpHandlerSpy.handle.and.returnValue(throwError(
{error:
{message: 'test-error'}
}
));
//act
errorInterceptor.intercept(httpRequestSpy, httpHandlerSpy)
.subscribe(
result => console.log('good', result),
err => {
console.log('error', err);
expect(err).toEqual('test-error');
}
);
//assert
})
我希望這有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.