Angular测试问题：模拟1、2按键按下后断言输入值为12失败

需求 #

编写Angular测试，模拟按键1和按键2的keydown事件，随后断言输入框的值为12。

我的HTML代码 #

<input
  id="myInput"
/>

我的测试代码 #

fit('should update input value on key press', () => {
    const inputDebugElement = fixture.debugElement.query(
      By.css('#money-input')
    );
    const inputElement = inputDebugElement.nativeElement as HTMLInputElement;

    inputElement.value = '';
    inputElement.dispatchEvent(new Event('input'));

    const event1 = new KeyboardEvent('keydown', { key: '1' });
    const event2 = new KeyboardEvent('keydown', { key: '2' });

    inputElement.dispatchEvent(event1);
    inputElement.dispatchEvent(event2);

    fixture.detectChanges();

    expect(inputElement.value).toBe('12');
  });

当前测试结果 #

问题分析与修复方案 #

1. 选择器不匹配：HTML中输入框的id是myInput，但测试代码里用的是#money-input，导致无法正确获取目标输入元素，这是核心错误。
2. 原生keydown事件特性限制：浏览器原生的keydown事件不会自动修改输入框的value属性，仅触发按键行为，不会直接更新输入内容。

修复后的测试代码：

fit('should update input value on key press', () => {
    // 修正选择器，匹配HTML中的输入框id
    const inputDebugElement = fixture.debugElement.query(By.css('#myInput'));
    const inputElement = inputDebugElement.nativeElement as HTMLInputElement;

    // 模拟输入1并触发input事件
    inputElement.value = '1';
    inputElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    // 模拟输入2并触发input事件
    inputElement.value += '2';
    inputElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(inputElement.value).toBe('12');
  });

如果你的组件中存在监听keydown事件并手动更新输入值的逻辑，只需修正选择器后，确保组件逻辑能正确响应keydown事件即可；若使用原生输入框行为，直接修改value并触发input事件是最直接的测试方式。

内容的提问来源于stack exchange，提问作者Gabriela Suarez Carvajal