测试 Http 服务进行多次调用并返回 observable 而不映射响应

Question

我有一个数据服务，它从服务器获取数据并发出多个请求，然后返回一个可观察的数组。我要测试数据。

我尝试做的是在我发送的包含两个可观察对象的模拟响应中，我不知道这是否是测试数据的正确方法。

但是测试失败了，尤其是异步测试块中的最后三个测试

重要提示：我想测试一下，当将 charId 设置为 falsy 并将 ComicsId 设置为 falsy 时，调用 tthe 方法，订阅它返回的 observable，在你模拟 http 之后，你会得到一个包含两个预期响应的数组。如果 charId 为真，则与 4 预期响应相同。当comicsId 为真时，6 个预期响应相同

// 获取数据的服务

getChar(): Observable<any> {

    const Observables = [];
    Observables.push(this.http.get('https://gateway.marvel.com:443/v1/public/characters?apikey'));
    Observables.push(this.http.get('https://gateway.marvel.com:443/v1/public/comics?apikey'));

    if (this.charId) {
      Observables.push(this.http.get(`${this.urlChar}${this.charId}${this.apiKey}`));
      Observables.push(this.http.get(`${this.urlChar}${this.charId}/comics${this.apiKey}`));
    }
    if (this.comicsId) {
      Observables.push(this.http.get(`${this.urlCom}${this.comicsId}${this.apiKey}`));
      Observables.push(this.http.get(`${this.urlCom}${this.comicsId}/creators${this.apiKey}`));
    }
    console.log([Observable, Observable]);
    return Observable.forkJoin(Observables);
  }
}

// 我的测试

import { async, ComponentFixture, TestBed, getTestBed, inject } from '@angular/core/testing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { DataService } from './data.service';
import {
  BaseRequestOptions, Http, XHRBackend, HttpModule,
  Response, ResponseOptions, RequestMethod
} from '@angular/http';
import { Observable } from 'rxjs/Observable';

describe('DataService', () => {
  let mockBackend: MockBackend;

   beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        DataService,
        MockBackend,
        BaseRequestOptions,
        {
          provide: Http,
          deps: [MockBackend, BaseRequestOptions],
          useFactory:
          (backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
            return new Http(backend, defaultOptions);
          }
        }
      ],
      imports: [
        HttpModule
      ]
    });
    mockBackend = getTestBed().get(MockBackend);
  }));


  it('should get ObservableArr', (done) => {
    let dataService: DataService;

    getTestBed().compileComponents().then(() => {
      mockBackend.connections.subscribe(
        (connection: MockConnection) => {
          connection.mockRespond(new Response(
            new ResponseOptions({
              body: [Observable, Observable]
            }
            )));
        });

      dataService = getTestBed().get(DataService);
      expect(DataService).toBeDefined();

      dataService.getChar().subscribe((obsArr: Observable<any>[]) => {
        expect(obsArr.length).toBeDefined();
        expect(obsArr.length).toEqual(2);
        expect(obsArr.length).not.toBe(1);
        done();
      });
    });
  });


  it('should check the service',
    inject([DataService], (service: DataService) => {
      expect(service).toBeTruthy();
    }));

  it('should get ObservableArray async',
    async(inject([DataService], (dataService: DataService) => {
      mockBackend.connections.subscribe(
        (connection: MockConnection) => {
          connection.mockRespond(new Response(
            new ResponseOptions({
              body: [Observable, Observable]
            }
            )));
        });
      dataService.getChar().subscribe(
        (response) => {
          expect(response.length).toBe(2);
          expect(response[0]).toBe(Observable); <<<<<<<<<<<<<< Fails
          expect(response[1]).toBe(Observable); <<<<<<<<<<<<<< Fails
          expect(response).toEqual([Observable, Observable]); <<<<<< Fails
        });
    })));
});

Answer 1

首先，正如@Aviad P. 指出的那样，forkJoin 方法不会返回可观察对象的可观察数组...它返回 forkJoin 中每个可观察对象的结果数组，并且observables 的结果不是 Observables 实例。

此外，您不是在模拟 getChart() 方法，而是在模拟后端模拟每个 http 调用，而不是方法 getChar() 本身。数组的长度必须为 === 2，因为 this.chartId 和 this.comicsId 不存在...

所以我会说返回的结构是这样的，所以 response[0] 是一个数组：

response = [[Observable, Observable], [Observable, Observable]]

也就是说，这个期望永远不会成立，因为没有一个数组会等于一个新创建的数组：

expect(response).toEqual([Observable, Observable])

修改所有应该解决您的问题的内容。此外，如果您的 Observables 返回和 Observable 实例，您的代码：“body: [Observable, Observable]”没有返回 Observables 实例，它返回的是 Observable 定义函数，这将是一个不正确的模拟，尽管测试会通过.

这将是一个失败的测试示例：

const mockResponse = {isMockResponse: true};

it('should get ObservableArray async',
async(inject([DataService], (dataService: DataService) => {
  mockBackend.connections.subscribe(
    (connection: MockConnection) => {
      connection.mockRespond(new Response(
        new ResponseOptions({
          body: {...mockResponse}
        }
        )));
    });
  dataService.getChar().subscribe(
    (response) => {
      expect(response.length).toBe(2);
      expect(response[0].isMockResponse).toBe(true); <<< Is this expect really necessary?
      expect(response[1].isMockResponse).toBe(true); <<< Is this expect really necessary?
    });
})));

也就是说，测试您的用例的唯一期望是：

expect(response.length).toBe(2);

其他的是不必要的......所以你不是在测试你正在模拟的数据，你想测试由于变量 this 的值而执行的 调用次数。 chartId 和 this.comicsIs。

希望这会有所帮助。