Angular含Pipe/Map操作的HTTP请求单元测试问题排查

业务代码中getAll()方法通过map操作调用helpers.sortData，按tippro字段对返回数据排序，但当前测试代码里排序逻辑未生效，需排查修正。

业务代码 #

getAll(): Observable<any> {
    return this.http.get(this.helpers.getBasicEndPoint('/configuraciones/nominas/procesos'))
    .pipe(
      /** Ordenar data por tippro */
      map((data: Procesos[]) => data = this.helpers.sortData(data, 'tippro'))
    );
  }

当前测试代码的问题 #

1. 测试用的mockResult没有tippro字段，业务代码的排序逻辑无操作对象，自然不会产生排序效果
2. 订阅回调里的map((data: Procesos[]) => data = helpers.sortData(data, 'tippro'))是孤立代码，既不会触发业务逻辑中的排序，也不对订阅结果生效
3. 断言直接对比原始mockResult和返回值，但业务代码已做排序，正确断言应对比排序后的预期数据
4. 测试用例描述与实际测试内容不匹配（描述是教育级别，实际测试Procesos数据）

修正后的测试代码 #

it('Should return array of Procesos sorted by tippro', waitForAsync((done: DoneFn) => {
    // 1. 构造带tippro字段的测试数据，让排序逻辑有可操作的目标
    const mockResult: Procesos[] = [
      {
        "desniv": "Basica",
        "codley": null,
        "codniv": "6",
        "tippro": "C"
      },
      {
        "desniv": "Universitario",
        "codley": null,
        "codniv": "4",
        "tippro": "A"
      },
      {
        "desniv": "Bachiller",
        "codley": null,
        "codniv": "5",
        "tippro": "B"
      }
    ];

    // 2. 提前生成排序后的预期数据，与helpers.sortData的输出逻辑一致
    const sortedMockResult = [...mockResult].sort((a, b) => a.tippro.localeCompare(b.tippro));

    // 3. 模拟HTTP请求返回原始未排序数据
    getHttpClientSpy.get.and.returnValue(of(mockResult));

    // 4. 调用服务方法并断言排序结果
    procesosService.getAll().subscribe((resp) => {
      expect(resp).toEqual(sortedMockResult);
      done();
    });
  }));

额外注意：Helpers服务的模拟 #

如果helpers是注入到procesosService的依赖服务，测试时需正确模拟该服务，确保sortData方法正常执行：

beforeEach(() => {
  const helpersSpy = jasmine.createSpyObj('Helpers', ['getBasicEndPoint', 'sortData']);
  // 模拟基础路径方法
  helpersSpy.getBasicEndPoint.and.returnValue('/mock-url');
  // 模拟sortData排序逻辑，与业务代码中的实现一致
  helpersSpy.sortData.and.callFake((data: any[], field: string) => 
    [...data].sort((a, b) => a[field].localeCompare(b[field]))
  );

  TestBed.configureTestingModule({
    providers: [
      ProcesosService,
      { provide: HttpClient, useValue: jasmine.createSpyObj('HttpClient', ['get']) },
      { provide: Helpers, useValue: helpersSpy }
    ]
  });

  procesosService = TestBed.inject(ProcesosService);
  getHttpClientSpy = TestBed.inject(HttpClient) as jasmine.SpyObj<HttpClient>;
});

内容的提问来源于stack exchange，提问作者Aaron Escobar