Angular 5滚动事件单元测试：whenStable未等待Zone任务完成

我完全懂你现在的头疼——明明滚动事件处理器能正常触发，但测试里的async/whenStable就是没等到任务完成，导致断言在测试结束后才生效。咱们一步步拆解问题，找到靠谱的解决办法：

问题根源 #

你在测试中直接调用了原生DOM的scroll()方法、手动设置scrollLeft，这种方式绕开了Angular的事件绑定机制。Angular的测试Zone没法追踪到这种原生触发的事件，自然没法在whenStable里等待事件处理完成。而且你的onScroll方法里的操作全是同步的，whenStable在这里根本派不上用场——因为没有异步任务需要等待。

解决方案 #

我们需要用Angular测试框架提供的triggerEventHandler来触发滚动事件，这样Zone能正确追踪事件的执行流程，后续的变更检测也能同步生效。

修改后的测试代码 #

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // 触发初始变更检测
  });

  it('should change message color when scrolling', () => {
    const scrollWindowDebugEl = fixture.debugElement.query(By.css('.scrollWindow'));
    const messageDebugEl = fixture.debugElement.query(By.css('p'));

    // 用Angular的triggerEventHandler触发scroll事件，让Zone能追踪到事件流程
    scrollWindowDebugEl.triggerEventHandler('scroll', {});

    // 触发变更检测，让Renderer2的样式修改同步到视图
    fixture.detectChanges();

    // 直接断言样式变化即可
    expect(messageDebugEl.styles.color).toEqual('blue');
  });
});

额外补充 #

如果需要模拟真实的滚动位置（比如设置scrollLeft），可以先修改原生元素属性再触发事件：

scrollWindowDebugEl.nativeElement.scrollLeft = 50;
scrollWindowDebugEl.triggerEventHandler('scroll', {});
fixture.detectChanges();

另外要注意：只有当事件处理逻辑包含异步操作（比如HTTP请求、setTimeout）时，才需要用到async或whenStable，你的场景里所有操作都是同步的，完全不需要它们。

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