如何测试Angular组件中ngZone.runOutsideAngular内的方法调用

嘿，这个测试场景我之前也碰到过！其实核心就是要捕获runOutsideAngular传入的回调函数，手动执行它来验证内部的bindScroll是否被正确调用，同时确认runOutsideAngular本身的执行情况。下面是具体的实现步骤和代码示例：

核心思路 #

runOutsideAngular接收一个回调函数作为参数，我们可以在测试中拦截这个回调并保存下来，之后手动执行它，这样就能触发里面的bindScroll调用，进而完成断言验证。

具体测试代码（Jasmine示例） #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgZone } from '@angular/core';
import { YourComponent } from './your.component';
import { LayoutService } from './layout.service';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let layoutServiceSpy: jasmine.SpyObj<LayoutService>;
  let ngZoneSpy: jasmine.SpyObj<NgZone>;
  // 用来存储runOutsideAngular传入的回调函数
  let runOutsideAngularCallback: Function;

  beforeEach(async () => {
    // 创建LayoutService的spy对象
    layoutServiceSpy = jasmine.createSpyObj('LayoutService', ['bindScroll']);
    // 创建NgZone的spy对象，包含runOutsideAngular方法
    ngZoneSpy = jasmine.createSpyObj('NgZone', ['runOutsideAngular']);

    // 配置runOutsideAngular的callFake，保存传入的回调
    ngZoneSpy.runOutsideAngular.and.callFake((callback: Function) => {
      runOutsideAngularCallback = callback;
      // 如果原方法有返回值，这里可以模拟返回，比如return callback();
      // 但为了可控，我们先不执行，后面手动调用
    });

    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: LayoutService, useValue: layoutServiceSpy },
        { provide: NgZone, useValue: ngZoneSpy }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 重置回调变量，避免测试用例间污染
    runOutsideAngularCallback = null;
  });

  it('should call bindScroll inside ngZone.runOutsideAngular on OnInit', () => {
    // 触发组件的OnInit生命周期
    fixture.detectChanges();

    // 第一步：验证runOutsideAngular确实被调用了
    expect(ngZoneSpy.runOutsideAngular).toHaveBeenCalled();
    expect(runOutsideAngularCallback).toBeDefined();

    // 第二步：手动执行保存的回调函数
    runOutsideAngularCallback();

    // 第三步：验证bindScroll被调用了
    expect(layoutServiceSpy.bindScroll).toHaveBeenCalled();
  });
});

代码解释 #

1. 拦截并保存回调：通过ngZoneSpy.runOutsideAngular.and.callFake，我们把传入runOutsideAngular的回调函数存储到runOutsideAngularCallback变量中，这样就能完全控制它的执行时机。
2. 触发组件初始化：调用fixture.detectChanges()会触发组件的OnInit钩子，此时组件内部的runOutsideAngular会被调用，我们的spy就会捕获到这个调用并保存回调。
3. 手动执行回调：执行runOutsideAngularCallback()就相当于模拟了NgZone在Angular外部执行该回调的场景，此时内部的bindScroll方法会被调用。
4. 双重验证：既验证了runOutsideAngular被正确调用，又验证了bindScroll确实是在这个回调内部执行的。

如果你的组件里runOutsideAngular的回调有参数或者需要上下文，你可以在手动执行的时候传入对应的参数或者绑定this（比如runOutsideAngularCallback.call(component)）。

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