Angular 17锚点点击测试：新标签页重复打开问题

问题场景：Angular 17应用里的锚点同时带href、target="_blank"和(click)事件，测试handleClick()时，调用link.click()会导致Karma每隔几秒生成新标签页，资源占用过高无法完成测试。

问题根源 #

debugElement.click()或nativeElement.click()会模拟真实用户点击，同时触发两个行为：

1. 执行Angular绑定的(click)处理函数
2. 触发原生a标签的导航行为，target="_blank"会打开新标签页
   Karma的测试环境中，这种重复的导航行为会不断创建新标签，耗尽系统资源。

解决方案 #

方案1：使用Angular测试工具的triggerEventHandler（推荐）

这个方法只会触发Angular绑定的(click)事件，不会触发原生导航行为，从根源避免新标签页生成。

修改后的测试代码：

it('should call click handler when link is clicked', fakeAsync(() => {
  const onClickSpy = spyOn(component, 'handleClick');
  fixture.detectChanges();

  const link = fixture.debugElement.query(By.css('#anchor-to-test'));
  link.triggerEventHandler('click', null); // 替换原link.click()
  tick();

  expect(onClickSpy).toHaveBeenCalled();
}));

方案2：阻止原生点击事件的默认行为

如果需要保留click()调用，可以给锚点添加事件监听器，阻止导航的默认动作：

it('should call click handler when link is clicked', fakeAsync(() => {
  const onClickSpy = spyOn(component, 'handleClick');
  fixture.detectChanges();

  const link = fixture.debugElement.query(By.css('#anchor-to-test')).nativeElement;
  // 阻止默认导航行为
  link.addEventListener('click', (e) => e.preventDefault());
  link.click();
  tick();

  expect(onClickSpy).toHaveBeenCalled();
}));

方案3：临时修改锚点属性

在测试中修改href和target属性，让锚点不触发跳转：

it('should call click handler when link is clicked', fakeAsync(() => {
  const onClickSpy = spyOn(component, 'handleClick');
  fixture.detectChanges();

  const link = fixture.debugElement.query(By.css('#anchor-to-test')).nativeElement;
  // 修改属性禁用跳转
  link.href = 'javascript:void(0)';
  link.target = '_self';
  link.click();
  tick();

  expect(onClickSpy).toHaveBeenCalled();
}));

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