如何模拟进行 AJAX 调用的方法？

Question

我正在尝试为我的 Angular 应用程序编写一些测试，并且我想模拟一个方法，这样我就不会对服务器进行实际调用。

这是我在 grid.service.ts 中的方法：

     loadAccountListPromise(id: string) {
        let promise = new Promise((resolve, reject) => {
            this.http.get(`${this.baseUrl}`)
                .toPromise()
                .then(
                (data) => {
                    this.results = this.formatData(data.json());
                    resolve(this.results);
                },
                (msg) => {
                    reject(msg);

                }
                );
        });
        return promise;

    }

到目前为止，我已经尝试按照官方角度测试指南编写类似的内容。在我的 grid.service.spec.ts 我有：

it('loadAcountListPromise should return Promise', () => {

            let someHttp;

            spyOn(myInnergridService, 'loadAccountListPromise').and.callThrough();

            myInnergridService.loadAccountListPromise(someHttp).then(
                ( response ) => { expect( response ).toBe( jasmine.any(Promise) );
            });
        });

在这里，我正在监视该方法，但通过调用.callThough()，我正在使用实际的实现，从而对服务器进行真正的 AJAX 调用。我想避免这种情况并伪造 GET 请求以进行测试。我该怎么做？

Answer 1

首先，测试台：

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpModule],
    providers: [
      YourService,
      // ... Other services
      { provide: XHRBackend, useClass: MockBackend }
    ]
  });
});

然后，在每个测试中（或在 beforeEach 中）：

it('testing http calls ...', inject([YourService, XHRBackend], (service: YourService, http: MockBackend) => {
  let cnt: MockConnection;
  let response = { contenu: 'anything you want here' };
  http.connections.subscribe((connection: MockConnection) => {
    cnt = connection;
    // Response (CHOOSE ONE)
    connection.mockRespond(new Response(new ResponseOptions({
      body: JSON.stringify(response)
    })));
    // Error (CHOOSE ONE)
    connection.mockError(new Error('error'));
  });

  let goodCall = (method, url) => {
    expect(cnt.request.method).toBe(method);
    expect(cnt.request.url.endsWith(url)).toBe(true);
  };

  service.method().subscribe(res => goodCall(RequestMethod.Get, 'params/search'));
}));

有不懂的可以追问！