如何使用HttpTestingClientModule单元测试HTTP请求是否已取消？

我的组件在ngOnInit生命周期中调用服务方法从服务器获取数据，用户可导航离开当前视图销毁组件，此时需取消该请求（实际逻辑已实现），但现有单元测试无法验证这一行为，求正确的测试模拟方法。

现有代码实现 #

组件类 #

@Component({
    ...
    providers: [ProjectsOverviewService] // 服务生命周期与组件绑定
    ...
})
export class ProjectsOverviewComponent implements OnInit {
    constructor(private projectsOverviewService: ProjectsOverviewService) {}

    ngOnInit() {
        this.projectsOverviewService.getSomeData();
    }
}

服务类 #

@Injectable()
export class ProjectsOverviewService implements OnDestroy {
    private someData: Data;
    private serviceDestroyed$ = new Subject();

    constructor(private projectPageService: ProjectPageService) {}

    ngOnDestroy() {
        this.serviceDestroyed$.next();
    }

    getSomeData() {
        this.projectPageService.projectsGetAll$
        .pipe(takeUntil(this.serviceDestroyed$))
        .subscribe(data => this.someData = data);
    }
}

当前测试代码（无效） #

let component: ProjectsOverviewComponent;
let fixture: ComponentFixture<ProjectsOverviewComponent>;
let httpTestingController: HttpTestingController;

beforeEach(async () => {
    await TestBed.configureTestingModule({
        imports: [
            HttpClientTestingModule
        ],
        declarations: [ProjectsOverviewComponent],
        providers: [ProjectsServiceProxy]
    }).compileComponents();
});

beforeEach(() => {
    fixture = TestBed.createComponent(ProjectsOverviewComponent);
    component = fixture.componentInstance;
    httpTestingController = TestBed.inject(HttpTestingController);
    fixture.detectChanges();
});

it('should cancel get some data request when component is destroyed', () => {
    const req = httpTestingController.expectOne('/api/services/app/Projects/GetAll');

    console.log(req); // TestRequest

    component.ngOnDestroy();

    expect(req.cancelled).toBe(true); // 失败：期望true，实际false
});

问题原因与修正方案 #

问题根源 #

手动调用component.ngOnDestroy()只会触发组件自身的销毁逻辑，但组件级Provider的服务不会自动触发ngOnDestroy，导致serviceDestroyed$没有发送信号，takeUntil无法取消订阅，HTTP请求也就不会被标记为已取消。

正确测试步骤 #

1. 使用fixture.destroy()替代手动调用component.ngOnDestroy()，Angular会自动处理组件及其关联服务的销毁流程，触发服务的ngOnDestroy方法。
2. 确保测试模块中提供正确的服务依赖（比如ProjectsOverviewService和ProjectPageService），避免依赖缺失导致逻辑不执行。

修正后的测试用例 #

it('should cancel get some data request when component is destroyed', () => {
    // 拦截HTTP请求
    const req = httpTestingController.expectOne('/api/services/app/Projects/GetAll');
    
    // 销毁组件，触发组件及关联服务的销毁生命周期
    fixture.destroy();

    // 验证请求已被取消
    expect(req.cancelled).toBe(true);
});

额外优化建议 #

• 如果ProjectPageService是独立服务，测试时可mock它，让测试更聚焦于“取消订阅”行为：

  // 在TestBed配置中mock ProjectPageService
  providers: [
    ProjectsOverviewService,
    {
      provide: ProjectPageService,
      useValue: {
        projectsGetAll$: new Observable(observer => {
          // 模拟一个不会自动完成的请求
          return () => {};
        })
      }
    }
  ]
  

• 服务中的serviceDestroyed$建议添加complete()调用，避免内存泄漏：

  ngOnDestroy() {
      this.serviceDestroyed$.next();
      this.serviceDestroyed$.complete();
  }
  

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