Angular单元测试如何覆盖HostListener函数内if判断的else分支

核心思路 #

你需要覆盖的else分支对应this.tooltip已存在的场景，只需在触发鼠标移入事件前，提前给组件的tooltip属性赋值，再验证show方法未被调用即可。

测试代码示例 #

假设你的指令/组件名为TooltipDirective，测试用例基于Angular默认的Jasmine测试框架编写，代码如下：

import { TooltipDirective } from './tooltip.directive';
import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

// 测试用宿主组件
@Component({
  template: `<div appTooltip>测试元素</div>`
})
class TestHostComponent {}

describe('TooltipDirective', () => {
  let fixture: ComponentFixture<TestHostComponent>;
  let directive: TooltipDirective;
  let hostElement: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TooltipDirective, TestHostComponent]
    });
    fixture = TestBed.createComponent(TestHostComponent);
    // 获取指令实例
    directive = fixture.debugElement.query(By.directive(TooltipDirective)).injector.get(TooltipDirective);
    hostElement = fixture.debugElement.query(By.directive(TooltipDirective)).nativeElement;
    fixture.detectChanges();
  });

  // 覆盖else分支的测试用例
  it('should not trigger show when tooltip already exists on mouse enter', () => {
    // 模拟tooltip已存在的场景，tooltip为私有属性时可用directive['tooltip']赋值
    directive.tooltip = document.createElement('div');
    // 监听show方法调用状态
    const showSpy = spyOn(directive, 'show');
    // 触发宿主元素鼠标移入事件
    hostElement.dispatchEvent(new Event('mouseenter'));
    fixture.detectChanges();
    // 断言show方法未被调用，验证else分支逻辑
    expect(showSpy).not.toHaveBeenCalled();
  });
});

注意要点 #

• 若tooltip为私有属性，直接赋值会触发TS语法报错，可改用索引访问写法directive['tooltip']，或添加// @ts-ignore注释忽略校验
• 无需手动调用onMouseEnter方法，直接触发宿主元素的原生鼠标事件即可，同时可验证@HostListener绑定是否生效

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