如何在finalize()执行前测试Observable回调更新的Angular组件属性值？

你的测试失败有两个核心原因：

1. 测试数据计算错误：第一个事件中loaded:100、total:50，计算出的进度是(100/50)*100=200%，和你断言的50%不符。
2. Observable同步完成触发重置：of会同步发射所有事件后立即完成，触发pipe中的finalize调用reset()，把uploadProgress重置为0，导致断言时属性已被重置。

方案一：用Subject手动控制事件发射（推荐） #

通过Subject模拟Observable，只发射进度事件且不触发完成，避免finalize执行：

import { Subject } from 'rxjs';
import { HttpEventType } from '@angular/common/http';

it('Should display progress bar', () => {
  // 构造正确的进度事件：loaded=25，total=50，计算后为50%
  const progressEvent = {
    body: ['blodId1'],
    type: HttpEventType.UploadProgress,
    total: 50,
    loaded: 25,
  };
  
  // 创建Subject来控制事件发射
  const uploadSubject = new Subject();
  mockFileTransferService.uploadQuarantineFile.and.returnValue(uploadSubject.asObservable());

  // 调用组件上传方法
  component.onUpload();
  // 发射进度事件
  uploadSubject.next(progressEvent);

  // 断言进度值
  expect(component.uploadProgress).toBe(NumberConstant.FIFTY);
});

方案二：修正测试数据并延迟Observable完成 #

如果需要保留多个事件，可使用fakeAsync和tick控制异步流程，确保断言在finalize执行前完成：

import { fakeAsync, tick } from '@angular/core/testing';
import { of, delay } from 'rxjs';
import { HttpEventType } from '@angular/common/http';

it('Should display progress bar', fakeAsync(() => {
  mockFileTransferService.uploadQuarantineFile.and.returnValue(
    of(
      // 修正数据：进度为50%
      {
        body: ['blodId1'],
        type: HttpEventType.UploadProgress,
        total: 50,
        loaded: 25,
      },
      // 响应事件，type应为HttpEventType.Response（值为4）
      {
        body: ['blodId1'],
        type: HttpEventType.Response,
        total: 100,
        loaded: 100,
      }
    ).pipe(delay(0)) // 转为异步Observable，避免同步完成
  );

  component.onUpload();
  tick(); // 处理进度事件的同步逻辑

  // 此时finalize还未执行，断言进度值
  expect(component.uploadProgress).toBe(NumberConstant.FIFTY);
}));

• 组件中第二个事件的type应该是HttpEventType.Response（值为4），而非1，否则不会触发上传成功的提示逻辑。
• 如果要单独测试finalize中的reset()逻辑，可以写另一个测试用例，验证Observable完成后uploadProgress是否被重置为0。

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