如何为Angular中设置滚动位置的ngOnInit方法编写Jasmine单元测试

开发者阿泽

2026-9-29

Angular Jasmine 单元测试实现思路

你要测试的ngOnInit逻辑核心是验证组件初始化时是否正确执行了滚动到页面顶部的两个操作，以下是具体实现方案：

测试核心原理

不要直接依赖真实浏览器的window和document对象，通过Jasmine的Spy能力mock全局对象的属性和方法，避免测试副作用，同时精准验证逻辑执行结果。

具体实现步骤

首先在测试用例的前置逻辑中mock两个需要验证的目标对象：
1. 给window.scrollTo方法创建间谍
2. 给document.body.scrollTop属性创建可写的间谍，监听赋值操作
触发组件的ngOnInit生命周期（可以手动调用，也可以通过Angular测试工具的fixture.detectChanges()自动触发）
分别断言两个操作是否符合预期

测试代码示例

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component'; // 替换为你自己的组件路径

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

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

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // Mock全局对象
    spyOn(window, 'scrollTo');
    spyOnProperty(document.body, 'scrollTop', 'set').and.callThrough();
  });

  it('should scroll to top on init', () => {
    // 触发ngOnInit
    fixture.detectChanges();

    // 断言两个滚动操作都正确执行
    expect(document.body.scrollTop).toBe(0);
    expect(window.scrollTo).toHaveBeenCalledOnceWith(0, 0);
  });
});