如何为调用scrollIntoView的Angular组件代码编写单元测试

你的测试失败大概率是因为DOM元素未正确渲染、document查询未被模拟，或者scrollIntoView的调用未被正确断言。下面是分步的解决方案：

1. 测试环境准备 #

首先确保测试模块中声明了test-card组件（如果是自定义组件），或者用Mock组件替代避免依赖：

@NgModule({
  declarations: [YourComponent, MockTestCardComponent]
})
class TestModule {}

// Mock test-card组件
@Component({selector: 'test-card', template: '<div></div>'})
class MockTestCardComponent {}

2. 编写测试用例 #

分两种核心场景测试：找到匹配卡片的情况，和未找到匹配卡片的情况。

场景1：存在匹配的卡片 #

it('should scroll to the matching card when found', () => {
  // 初始化组件
  fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  // 创建模拟卡片元素并添加到DOM
  const card1 = document.createElement('test-card');
  card1.innerText = '09:00 - 10:00\n其他内容';
  document.body.appendChild(card1);
  
  const targetCard = document.createElement('test-card');
  targetCard.innerText = '10:00 - 11:00\n其他内容';
  document.body.appendChild(targetCard);
  
  // 监听scrollIntoView方法，避免触发真实滚动
  const scrollSpy = spyOn(targetCard, 'scrollIntoView');
  
  // 调用目标方法
  component.scrollToCard();
  
  // 断言scrollIntoView被正确调用
  expect(scrollSpy).toHaveBeenCalled();
  
  // 清理DOM，避免影响其他测试
  document.body.removeChild(card1);
  document.body.removeChild(targetCard);
});

场景2：不存在匹配的卡片 #

it('should not call scrollIntoView when no matching card found', () => {
  fixture = TestBed.createComponent(YourComponent);
  const component = fixture.componentInstance;
  
  // 添加不匹配的卡片到DOM
  const card1 = document.createElement('test-card');
  card1.innerText = '09:00 - 10:00\n其他内容';
  document.body.appendChild(card1);
  
  // 创建空的spy，用于验证未被调用
  const scrollSpy = jasmine.createSpy('scrollIntoView');
  
  component.scrollToCard();
  
  // 断言scrollIntoView未被触发
  expect(scrollSpy).not.toHaveBeenCalled();
  
  // 清理DOM
  document.body.removeChild(card1);
});

3. 原代码优化（可选，提升可测试性） #

原代码直接依赖全局document，耦合性较高。可以改为通过组件的ElementRef查询内部元素，更符合Angular测试最佳实践：

// 修改组件代码
constructor(private elRef: ElementRef) {}

scrollToCard() {
  const scrollSlotToMatch = '10:00 - 11:00';
  // 从组件内部查询元素，而非全局document
  const matches = Array.from(this.elRef.nativeElement.querySelectorAll('test-card'));
  
  // 后续逻辑保持不变...
}

修改后测试时只需在组件的nativeElement下添加元素，无需操作全局document，测试隔离性更好。

关键注意事项 #

• 测试完成后必须清理DOM元素，防止测试用例之间互相干扰；
• 用spyOn监听scrollIntoView，避免测试过程中触发真实的页面滚动；
• 如果test-card是自定义组件，需确保其模板渲染的文本能正确映射到innerText属性。

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