angular 服务中 catcherror 管道函数的单元测试

Question

我试图了解如何测试此功能。从 (err)=>{ line, 开始，它显示为未覆盖的语句。 service.ts

Deletevote(inp) {
   console.log(inp);
     
   return this.http.post(environment.apiUrl + '/api/reset/abc', inp).pipe(
      catchError((err) => {
         console.log('error caught in service');
         console.error(err);
         return throwError(err);
      })
   );
}

我已经为正向流创建了这个测试用例，但仍然没有涵盖错误部分。请指导我如何创建错误。

service.spec.ts

const Mockcolor = 'green';
const MockGen = 'male';

it('submitnominGreen', () => {
    service.Deletevote(DeleteObj).subscribe((posts) =>{
      expect(posts).toEqual([Mockcolor,MockGen], 'should check mock data');
    });
    const req =  httpTestCtrl.expectOne(environment.apiUrl + '/api/reset/abc');
    expect(req.request.method).toBe('POST');
    expect(req.cancelled).toBeFalsy();
    req.flush([Mockcolor,MockGen])
});

Answer 1

首先单元测试subscribe里面的代码不会执行。 Karma 会等待所有同步执行完成，并会在执行异步回调之前认为测试已完成。作为解决方案，您可以使用 done 回调来指示测试何时手动完成。

您很好地利用了 HttpTestingModule 进行测试。它还允许您轻松地测试错误。您可以使用 req.error 方法代替 req.flush 来模拟 HTTP 错误。

it('submitnominGreen', (done) => {
    const mockError = {error: 'someError'} as ErrorEvent;
    service.Deletevote(DeleteObj).subscribe(() => {}, (thrownError) =>{
      expect(thrownError.error).toEqual(mockError);
      done();
    });
    const req =  httpTestCtrl.expectOne(environment.apiUrl + '/api/reset/abc');
    req.error(mockError);
});

查看这篇精彩文章的 Error handling 部分：Testing Angular HTTP Communication。这对其他一些场景也有帮助。

angular 服务中 catcherror 管道函数的单元测试

Unit testing of catcherror pipe function in angular service

unit-testing

karma-jasmine

jestjs

angular

angular-unit-test