代码之家  ›  专栏  ›  技术社区  ›  LocustHorde

Angular 5上的单元测试HTTP服务

  •  2
  • LocustHorde  · 技术社区  · 6 年前

    我对如何测试数据服务感到非常困惑,有太多的可能性,而且是压倒性的。

    我有一个简单的服务:

    @Injectable()
    export class DataService {
    
      constructor(private _http: HttpClient) { }
    
      getData<T>(path: string): Observable<T> {
        return this._http.get<T>(path);
      }
    
    }
    

    我想测试一下那个电话 getData<number> number .

    这个 angular testing guide 令人沮丧的是,我展示了几种方法(使用试验台,使用前,使用茉莉花,不使用试验台),我已经尝试了所有的方法,但没有取得太大的成功。

    我该怎么做?到目前为止,我甚至连打电话给 getData . 我希望能够模拟HTTP,发出模拟返回值(如 jasmine.spy.and.returnValue(mockData) )并验证数据服务是否正常

    我把这个放在我的 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');
            });
    
        }));
    
      });
    
    });
    

    当我说不起作用的时候…第二次测试通过了!但它不应该。我可以看到实际的请求在dev控制台上发送到(无效的)url,并且错误如预期的那样输出,但是测试只是通过了……

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

    1 回复  |  直到 6 年前
        1
  •  3
  •   Fateh Mohamed    6 年前

    尝试使用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);
       })