在 Angular 5 上对 http 服务进行单元测试

2023-12-28

我对如何测试数据服务感到非常困惑,可能性太多,而且令人不知所措。

我有这个简单的服务:

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }

  getData<T>(path: string): Observable<T> {
    return this._http.get<T>(path);
  }

}

我想测试一下这个调用getData<number>事实上,将返回数据类型number.

The 角度测试指南 https://angular.io/guide/testing令人沮丧的是,展示了几种方法(使用 testbed、使用 beforeEach、在没有 testBed 的情况下使用 jasmine),我已经尝试了所有这些方法,但没有取得太大成功。

请问我该怎么做?到目前为止,我什至都没能打电话给getData。我希望能够模拟 Http,发出模拟返回值(例如jasmine.spy.and.returnValue(mockData)) 并验证 dataService 是否正常

我的里面有这个data.service.spec.ts:

describe('DataService', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [
        HttpClientModule
      ],
      providers: [
        DataService,
        HttpClient
      ]
    });

  });

  // This was auto generated, and works
  it('should be created', inject([DataService], (service: DataService) => {
    expect(service).toBeTruthy();
  }));

  // I added this, but doesn't work
  describe('When getData() is called', () => {

    it('should return an observable of type T', inject([DataService], (service: DataService) => {

      service.getData<number>('mock-url')
        .subscribe(data => {
          expect(typeof(data)).toBe('number');
        });

    }));

  });

});

当我说它不起作用时...第二个测试通过了!但不应该。我可以看到真正的请求在开发控制台上发出到(无效)url,并且按预期出错,但测试刚刚通过......

所以我想,我的问题很简单,在 Angular 5 中,我如何模拟我的后端服务并对其进行单元测试?


尝试使用flush方法来测试它

 inject(
  [HttpTestingController, DataService],
  (httpMock: HttpTestingController, service: DataService) =>{
     const mockResponse = 5;
     const mock-url = '...';

     service.getData<number>('mock-url').subscribe(data => {
        expect(data).toEqual(mockResponse);
         expect(typeof(data)).toBe('number');
    });

    const mockRequest = httpMock.expectOne((req: HttpRequest<any>) => req.url === mock-url); //get your request here

    expect(mockRequest.request.method).toBe('GET');

    mockRequest.flush(mockResponse);
   })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 5 上对 http 服务进行单元测试 的相关文章

随机推荐