如何在angular指令中测试按键事件

// 指令代码
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appKeydownListener]'
})
export class KeydownListenerDirective {
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // 处理按键事件的逻辑
  }
}

// 测试代码
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { KeydownListenerDirective } from './keydown-listener.directive';

describe('KeydownListenerDirective', () => {
  let fixture: ComponentFixture<any>;
  let directive: KeydownListenerDirective;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [KeydownListenerDirective]
    });

    fixture = TestBed.createComponent(TestComponent); // 创建一个包含指令的测试组件
    directive = fixture.debugElement.query(By.directive(KeydownListenerDirective)).injector.get(KeydownListenerDirective);
    fixture.detectChanges(); // 触发变更检测
  });

  it('should handle keydown event', () => {
    const event = new KeyboardEvent('keydown', { key: 'Enter' });
    spyOn(directive, 'onKeyDown'); // 监听按键事件处理函数
    fixture.debugElement.triggerEventHandler('keydown', event); // 模拟按键事件
    expect(directive.onKeyDown).toHaveBeenCalledWith(event); // 断言按键事件处理函数被调用
  });
});

@Component({
  template: `<div appKeydownListener></div>`
})
class TestComponent {}