방관자와 우스갯소리로 각도 10의 차단기를 테스트하다

테스트 각도에서 Karma와 Jasmine에서 Jest로 전환할 수 있는 여러 가지 이유가 있습니다.

Jest가 Karma와 Jasmine보다 빠르다

Jest 스냅샷 테스트 지원

Jest 동시 실행 테스트

Jest는 브라우저에서 테스트할 필요가 없음

더...

그러나 부족한 것은 Jest에서 각도 단위 테스트를 작성하는 예이다. 특히 각도 HTTP 차단기를 테스트하는 것이다.

각도, 관중, 농담 설정

본고의 목적에서 우리는 당신이 이미 《방관자》와 《조커》를 사용하여 각도 항목을 설정했다고 가정할 것이다.없으면 라이브러리를 사용하여 Angular를 설정하는 방법에 대한 링크를 제공합니다.

농담

비록 이 글의 중점은 인과응보와 재스민을 어떻게 우스갯소리로 바꾸는가가 아니지만, 다음은 어떻게 스스로 이런 전환을 하는지에 관한 자원 목록이다.또한 myGithub project를 템플릿으로 사용할 수 있습니다.다른 테스트 프레임워크를 사용하는 것에 익숙해지면 Jest가 좀 이상할 수도 있지만, 이런 괴벽들은 가치가 있다.

How to Set Up Angular Unit Testing with Jest

Testing Angular applications with Jest and Spectator

How I do configure Jest to test my Angular 8 Project

https://github.com/thymikee/jest-preset-angular

Unit Testing Angular with Jest

Migrate your Angular library to Jest

관중

'방관자'는 각도 단원 테스트를 설정하는 데 사용되는 지루한 템플릿 코드를 몇 줄로 줄이는 놀라운 라이브러리이다.그것은 가치를 제공하기 때문에 괴벽이 있다.

https://github.com/ngneat/spectator

Spectator V4: A Powerful Tool to Simplify Your Angular Tests!

Spectator for Angular or: How I Learned to Stop Worrying and Love the Spec

몇 가지 일이 있다

'방관자'와'우스갯소리'를 함께 사용할 때 기억해야 할 주요 점은 Specator 가져오기는 @ngneat/spectator/jest 패키지에서 가져와야 한다는 것이다.
'@ngneat/consident/jest'에서 {createHttpFactory, HttpMethod, considentHttp} 가져오기;
다음은 package.json의 최종 devDependencies 섹션입니다.
{
…
“devDependencies”:{
“@angular devkit/build angular”:“~ 0.901.7”,
“@angular/cli”:“~ 9.1.7”,
“@angular/compiler cli”:“~9.1.9”,
“@ngneat/consident”:“^5.13.3”,
“@types/jest”:“^26.0.13”,
“@types/node”:“^12.11.1”,
“codelyzer”:“^5.1.2”,
“jest”:“^26.4.2”,
“jest preset angular”:“^8.3.1”,
"각도기":"~7.0.0",
"ts 노드":"~ 8.3.0",
“tslint”:“~ 6.1.0”,
“typescript”:“~ 3.8.3”
}
}

각도 10 차단기 단위 테스트

이 예에서 Http 차단기를 테스트합니다. 이 차단기는 Http ErrorResponses를 컨트롤러에 기록합니다.
"@angular/core"에서 {Injectable} 가져오기;
가져오기
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor、HttpErrorResponse、HttpResponse
} "@angular/common/http"
"rxjs"에서 {Observable,throwError} 가져오기;
"rxjs/operators"에서 {catchError 가져오기};
/**
* HttpRequests를 차단하고 3xx의 모든 http 응답을 기록합니다 +
* 나중에 상태 코드에 따라 조건부 재시도를 할 수 있습니다.
*
*/
@ 주사 가능({providedIn:'루트'})
클래스 내보내기 HttpErrorInterceptor 구현 HttpInterceptor {
구조 함수 () {}
차단(요청: HttpRequest, 다음: HttpHandler): 관찰 가능 >{
다음은 돌아와.손잡이 (req).파이프 (헤드 뽑기 () = > {}),
catchError (오류) = >
if(HttpErrorResponse의 오류 인스턴스) {
if (error.error 및 error.error.message) {
위로하다로그 ('상태:'+error.status+'\n 메시지:'+error.error.message);
} 기타
위로하다로그 (오류);
}
}
투척자 되돌리기(오류);
})
);
}
}
이 코드는 응용 프로그램에서 온 HttpRequest를 차단하고 HttpErrorResponse로 돌아갈 때 응답을 컨트롤러에 기록하는 역할을 합니다.HttpHandler는 요청을 수행하는 데 사용됩니다next.handle.그리고 응답을 처리하기 위해 파이프를 만듭니다.주:tap은 일종rxjs pipe function으로 파이프의 실제 데이터를 바꾸지 않고 데이터를 검사할 수 있습니다.
이러한 상황에서 우리는 HttpErrorResponse를 포착하여 오류가 아닌 HttpResponse가 통과할 수 있도록 합니다.응답을 포착하면 오류 메시지를 확인하고 컨트롤러에 기록할 수 있습니다.이 예에서 HttpResponse에 사용자 정의 주체가 있기를 바랍니다.

단원 테스트

이 단원 테스트에서, 우리는 2xx가 있는 응답이 통과되었는지, 오류 응답이 나왔는지 검사할 것입니다.더 높은 테스트에 대해 시뮬레이션 컨트롤러를 사용할 수 있고, 우리는 컨트롤러를 검사할 수 있다.로그가 호출되었습니다.이것은 본문의 범위를 넘어섰다.
''에서 {HttpErrorInterceptor}/가져오기http 오류.차단기'@ngneat/consident/jest'에서 {createHttpFactory, HttpMethod, considentHttp} 가져오기;'@angular/core/testing'에서 {async} 가져오기;"rxjs"에서 {of,throwError} 가져오기;"@angular/common/http"에서 {HttpErrorResponse, HttpRequest, HttpResponse} 가져오기;설명('HttpErrorInterceptor', ()=>{let consident:considentHTTP;constcreateHttp=createHttpFactory({service:HttpErrorceptor});(()=>{consident=createHttp();}) 이전;test ('Http error', async () = > {const mockHandler = {handle:jest.fn () = >throwError (새 Http Error Response ({status:500, 오류: {message:'이것은 오류'}})};관중서비스차단(새 HttpRequestNown(HttpMethod.GET, "/thing"), mockHandler).subscribe((response)=>{fail('Expected error');},(error=>{expect(error.toBeTruthy();}));});테스트('Http success', 비동기화(()=>{const mockHandler={handle:jest.fn()=>of(new HttpResponse({status:500})))};관중서비스차단(새 HttpRequestNown(HttpMethod.GET, "/thing"), mockHandler).subscribe((response)=>{expect(response.toBeTruthy();},(오류=>{fail('Expected Successful');});
여기서 관건은 1) 시뮬레이션 처리 프로그램과 2) 차단기 응답을 어떻게 테스트하는가이다.

아날로그 HttpHandler

차단기를 테스트할 때, 첫 번째 곤혹스러운 일은 어떻게 HttpHandler를 모의하는가이다.재스민tap과 mock이 제거됐기 때문이다.SpyOn가 존재하지만 예상대로 작동하지 않습니다.이것은 내가 언급한 그 작은 농담 중의 하나이다.jest.mock 객체가 아닌 에뮬레이션 패키지에 사용됩니다.이 예에서 우리는 HttpHandler 인터페이스와 유사한 대상을 구축하고 예상한 방법을 모의할 것이다.다음은 HttpHandler 인터페이스입니다.보시다시피 그것은 단지 한 가지 방법일 뿐입니다.
설명 추상 클래스 내보내기 HttpHandler {abstract handle(req:HttpRequest): 관찰 가능
이것은 비웃음을 당하기 쉽다
const mockHandler={handle:jest.fn (()=>throwError (새 HttpErrorResponse ({status:500, 오류: {message:'오류입니다}}})};
오류가 발생한 경우 HttpErrorResponse를 내보내고 응답체/오류에 대한 사용자 정의 대상을 만드는 방법을 지시합니다.
happy path 사례에서 다음과 같이 시뮬레이션합니다.
const mockHandler={handle:jest.fn(()=>of(new-HttpResponse({status:200}))};

차단기 응답 테스트

기왕 우리가 HttpHandler를 시뮬레이션한 이상, 우리는 실제로 어떻게 차단기를 테스트하여 무엇을 했습니까?여기서 관건은 지정jest.mocklambda의 입력입니다.
관중서비스차단(새 HttpRequest nownn>(HttpMethod.GET, "/thing"), mockHandler).subscribe((response)=>{expect(response.toBeTruthy();},(오류=>{fail('Expected Successful');
이 예에서, 우리는 차단기가 응답을 정상적으로 전달했는지, 오류가 발생하지 않았는지 검사하고 있다.

시청자와 단원 테스트

어떤 사람들은 코드가 관객jest.fn()이 아니라 관객.subscribe을 사용한다는 것을 알아차릴 수 있다.이런 상황에서 양자의 작업 원리는 완전히 같다.createHttpFactory를 사용하여 HTTP 재시도를 추가할 예정입니다.
또 주의해야 할 것은 이 차단기는 실제로 응답을 수정하지 않아 테스트가 약하다는 것이다.이것은 차단기를 테스트하기 시작하는 기본 프레임워크입니다.createServiceFactory를 사용하여 HttpRespond를 수정하는 차단기가 있다면, 아날로그 HttpHandler를 사용하여 입력을 지정하고, 차단기가 호출한subscribe 부분에서 출력을 테스트할 수 있습니다.

총결산

관중과 농담을 각도 10과 결합시켜 사용하는 것은 매우 강력한 조합이다.비결은 농담과 관중을 충분히 이해하거나 기존의 예가 있다는 것이다.저는 본고가 시청자와 함께 Jest 테스트 각도 HTTPInterceptor를 어떻게 사용하는지 대충 이해할 수 있기를 바랍니다.여기 열쇠는요.

HttpHandler

시뮬레이션 기능 사용

입력 변수를subscribelambda에 추가하여 테스트

Github 출처: https://github.com/djchi82/angular-jest-spectator-interceptor-test