如何在Angular中测试http请求参数?

时间:2020-04-13 10:13:23

标签: angular typescript http jestjs httptestingcontroller

我正在尝试在发出http请求时测试http参数是否正确。

当我expect(req.request.params.get('action')).toEqual('pause');执行时,测试失败:

预期:“暂停” 收到:空

服务

constructor(private _http: HttpClient)

pause(key: string): Observable<ReturnValue> {
    const httpParams = new HttpParams().set('action', 'pause');

    return this._http
        .put<ReturnValue>(`${API.pauseUrl}/${key}`, {
        params: httpParams,
    });
}

测试

let httpMock: HttpTestingController;
let httpClient: HttpClient;
let service: MyService;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    providers: [MyService],
  }).compileComponents();

  httpMock = TestBed.inject(HttpTestingController);
  httpClient = TestBed.inject(HttpClient);
  service = TestBed.inject(MyService);
});

afterEach(() => {
  httpMock.verify();
});

describe("WHEN: pause", () => {
  const key = "1q2w3e-4r5t6y";
  const response: ReturnValue = ({
    key,
    status: "paused",
  } as ReturnValue;

  it("THEN: should call http.put with the expected url and params", (done) => {
      service.pause(key).subscribe(() => {
        expect(req.request.method).toBe('PUT');
        expect(req.request.params.get('action')).toEqual('pause');
        expect(req.request.url).toBe(`${PUSH_CORE_API.parcelUrl}/${key}`);
        done();
      });
      const req = httpMock.expectOne({
        method: 'PUT',
        url: `${PUSH_CORE_API.parcelUrl}/${key}`,
      });
      req.flush(response);
  });
});

为什么会发生这种情况?

我正在将Angular与Jest和TestBed一起使用。

1 个答案:

答案 0 :(得分:0)

您可以像这样进行测试:

it("THEN: should call http.put with the expected url and params", (done) => {
    service.pause(key).subscribe(() => done());

      httpMock
      .expectOne((req: HttpRequest<any>) => {

         expect(rep.url).toBe(`${API.pauseUrl}/${key}`);        
         expect(req.method).toBe('PUT');
         expect(req.params.get('action')).toEqual('pause');
         expect(req.url).toBe(`${API.pauseUrl}/${key}`);

        return true;
      })
      .flush(response);
  });
});

希望它对您有帮助