각도 - 추가 HTTP 테스트의 TDD

HttpErrorResponse 이해

this.http.get('/some/failing/request').subscribe(
   (data) => { console.log(data); },
   (error: HttpErrorResponse) => { /*Access error object here*/ }
);

실패한 요청 처리

테스트 작성

나는 이 함수를 위해 단독 테스트 세트를 만들었다. 왜냐하면 나는 위에서 설명한 것보다 더 많은 테스트를 하고 싶기 때문이다

우리의 함수는 오류에서 회복되고 정상적으로 계속되어야 하기 때문에 우리의 단언은 next의 subscribe 함수에 있다.우리는 응답 데이터가 정의되어 있으며, 길이가 0

우리는 두 번째 파라미터를 testRequest.flush에 전달함으로써 서로 다른 상태, 상태 텍스트, 제목 등을 모의할 수 있다.이런 상황에서 500의 상태를 시뮬레이션한 것은 서버에서 내부 오류가 발생했다는 것을 의미합니다

우리가 테스트를 실행할 때, 이 상황을 처리하기 위해 코드를 수정하지 않았기 때문에

주의error 리셋이 어떻게 촉발되었는지, Jasmine이 제공한 fail 함수는 어떻게 실행되었는지 주의하십시오.그러나 만약 우리가 코드를 다음과 같이 수정한다면, 우리의 테스트는 통과될 것이다.

getAllTodos() {
  return this.http.get(this.url).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 500) {
        return of([]);
      }
    })
  )
}

위의 코드는 HTTP 요청을 실행하지만 오류가 발생하고 응답 상태가 500이면 빈 그룹을 포함하는 관찰 가능한 값을 되돌려줍니다.우리는 원시 값과 상반된 관찰 가능한 값을 되돌려줍니다. 왜냐하면 이것은 catchError가 기대하는

Testing unauthorized requests

보통, 권한 수여를 처리할 때, 서버가 우리가 누군지 알 수 있도록 요청 헤더에 접근 영패를 포함합니다.이 영패가 없으면 서버가 요청을 거부하고 401 응답을 되돌려야 한다는 것을 의미합니다

우리가 처리해야 할 사항을 업데이트할 수 있는 권한을 부여해야 한다고 가정합니다

요청이 승인되지 않으면 특정 오류 메시지가 표시되는지 테스트할 수 있습니다

우리의 테스트는 다음과 같다.

테스트를 통과한 상응하는 코드는

updateTodo(updatedItem: Todo) {
  return this.http.put(`${this.url}/${updatedItem.id}`, updatedItem).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        this.displayError(error.statusText);
        return of(null);
      }
    })
  )
}

Testing retries

때때로 사용자는 자신이 고장이 없어서 연결이 불안정할 수 있습니다.요청이 실패했을 때, 화면에 오류 메시지가 표시될 수 있지만, 응답은

우리가 첫 번째 실패 후에 다시 한 번 처리해야 할 사항을 세 번 얻으려고 한다고 가정하자.만약 실패한다면, 다시 세 번 시도한 후에 오류를 던져야 합니다

우리의 테스트:

및 상응하는 코드:

getSingleTodo(id: number) {
    return this.http.get(`${this.url}/${id}`).pipe(
      retry(3),
      catchError(error => {
        return throwError(`Failed to fetch item with id ${id}`)
      })
    )
  }

우리의 테스트에서 우리는 404 오류를 모의할 수 있지만, 우리의 함수는 사실상 모든 오류를 포획한 후에 다시 요청을 시도합니다.이 밖에 우리가 테스트한 for 순환이 네 번 실행되었음을 주의하십시오.이것은 원본 요청에 적용되며, 다음 3회

우리는 또한 이 함수가 오류를 던지기를 기대한다.따라서 우리의 단언은 관찰 대상error의 회조에서

Conclusion

본고에서 우리는 HttpErrorResponse와 가시광선에서의 표현에 대해 더욱 깊이 있게 이해했다.우리는 또한 조작 응답 데이터와 상태 코드를 통해 Http 요청을 더욱 테스트했다

이것은 단지 주요 RxJs 조작부호를 한데 연결하는 더욱 복잡한 Http 요청을 테스트하는 기초일 뿐이다.요청을 작성할 때 더욱 자신감을 가지고, 더욱 좋은 사용자 체험을 얻기를 바랍니다.읽어주셔서 감사합니다.😄