如何为Angular 17的addEventListener编写单元测试实现100%覆盖率

问题原因 #

你当前的测试代码是在组件视图初始化完成（ngAfterViewInit已执行）后，才通过innerHTML手动添加.menu-toggle元素的。这导致组件的ngAfterViewInit执行时，DOM中根本没有匹配的元素，里面的事件绑定逻辑完全没被执行，所以覆盖率统计显示该函数未被覆盖。

解决方案 #

1. 提前准备DOM元素，确保ngAfterViewInit能捕获到 #

调整测试流程，在触发组件生命周期（调用fixture.detectChanges()）之前，让.menu-toggle元素存在于组件模板中。可以直接修改组件的原生元素内容，确保初始化时元素已存在：

修改后的测试代码示例：

// 先获取组件原生元素，在初始化前添加目标元素
const el: HTMLElement = fixture.nativeElement;
el.innerHTML = '<li class="menu-item"><a class="menu-link menu-toggle"><i class="menu-icon tf-icons bx bx-dock-top"></i></a></li>';

// 触发组件初始化，这会执行ngAfterViewInit
fixture.detectChanges();

// 测试点击逻辑
const menus = el.querySelectorAll('.menu-toggle');
menus.forEach(menu => {
  const parent = menu.parentElement;
  const menuEl = menu as HTMLElement;
  
  expect(parent?.classList.contains('open')).toBeFalse();
  menuEl.click();
  fixture.detectChanges();
  expect(parent?.classList.contains('open')).toBeTrue();           
});

2. 覆盖menus为空的分支 #

为了实现100%覆盖率，还需要测试document.querySelectorAll('.menu-toggle')返回空集合的情况，确保if(menus)分支的逻辑也被覆盖：

// 确保DOM中没有.menu-toggle元素
const el: HTMLElement = fixture.nativeElement;
el.innerHTML = '';

// 触发ngAfterViewInit执行
fixture.detectChanges();

// 此时组件的ngAfterViewInit会执行，但因为找不到元素，不会进入forEach逻辑，覆盖空分支

关键说明 #

• Angular测试中，第一次调用fixture.detectChanges()会触发组件的初始化生命周期（包括ngAfterViewInit），所以必须在这之前准备好需要的DOM元素。
• 要覆盖所有代码分支：既要有元素存在的情况（测试事件绑定和点击逻辑），也要有元素不存在的情况（测试if(menus)的空分支）。

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