如何为检测Ctrl/CMD键的Service中的fromEvent编写单元测试

我有一个用于检测Ctrl/CMD键是否被按下的Service，该Service被多个组件用于判断链接是否需要在新标签页打开等场景。

Service代码：

keyDownListenerCTRL = fromEvent<KeyboardEvent>(window, 'keydown').pipe(
  tap((event: KeyboardEvent) => {
    if (
      event.metaKey ||
      event.ctrlKey ||
      event.key === 'Meta' ||
      event.key === 'Ctrl'
    ) {
      this.isControlButtonHeld = true;
    }
  })
);

constructor() {
    this.keyDownListenerCTRL.subscribe();
}

我不知道如何测试该Service，因为没有可模拟操作的HTML元素，使用dispatchEvent的方法无法生效。

解决方案 #

测试这类监听window全局事件的Service，核心是正确模拟事件并处理异步流，以下是具体实现：

测试思路

1. 用Angular TestBed注入目标Service
2. 模拟window的keydown事件，传入不同的按键参数
3. 借助fakeAsync和tick触发Observable的异步处理逻辑
4. 验证isControlButtonHeld的状态是否符合预期

完整测试代码

import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { KeyDetectionService } from './key-detection.service'; // 替换为你的Service实际路径

describe('KeyDetectionService', () => {
  let service: KeyDetectionService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(KeyDetectionService);
    // 每次测试前重置状态，避免用例间污染
    service.isControlButtonHeld = false;
  });

  afterEach(() => {
    // 可选：如果Service用takeUntil管理订阅，这里触发销毁逻辑清理订阅
    // 比如 service.destroy$.next();
  });

  it('标记isControlButtonHeld为true当Ctrl键按下', fakeAsync(() => {
    const ctrlEvent = new KeyboardEvent('keydown', { ctrlKey: true });
    window.dispatchEvent(ctrlEvent);
    
    tick(); // 触发Observable的tap操作

    expect(service.isControlButtonHeld).toBeTrue();
  }));

  it('标记isControlButtonHeld为true当Meta(CMD)键按下', fakeAsync(() => {
    const metaEvent = new KeyboardEvent('keydown', { metaKey: true });
    window.dispatchEvent(metaEvent);
    
    tick();

    expect(service.isControlButtonHeld).toBeTrue();
  }));

  it('非控制键按下时不修改isControlButtonHeld状态', fakeAsync(() => {
    const normalEvent = new KeyboardEvent('keydown', { key: 'Enter' });
    window.dispatchEvent(normalEvent);
    
    tick();

    expect(service.isControlButtonHeld).toBeFalse();
  }));
});

关键注意事项

• 之前dispatchEvent无效，通常是因为没处理Observable的异步特性——fromEvent是异步流，必须用tick()让测试同步执行完流中的操作
• 确保isControlButtonHeld是公共属性，或提供公共getter方法（比如isControlKeyHeld(): boolean）供测试访问
• 测试前重置状态、测试后清理订阅，避免用例间的状态污染

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