angular - 如何测试对输入字段中的 keydown 事件使用react的指令

Question

我写了一个防止键盘默认值的指令，通过检查按下了什么按钮。我正在尝试对上述指令进行单元测试。我可以看到指令在应用程序中工作，或者当我将 console.log() 放在指令中时。不起作用的是输入的字母不会被设置到组件 ngModelField 中。

我已经尝试了很多东西，包括fixture.detectChanges()、fixture.whenStable() 等。

我的指令:

private allowed  = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',]

@HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (this.allowed.indexOf(e.key) > -1) {
      console.log('allowed');
      return;
    }
    console.log('preventdefault');
    e.preventDefault();
  }

我的单元测试:

describe('OnlyDecimalDirective', () => {
  let fixture: ComponentFixture<MockOnlyDecimalComponent>;
  let component: MockOnlyDecimalComponent;
  let input: HTMLInputElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [OnlyDecimalDirective, MockOnlyDecimalComponent],
      imports: [FormsModule],
    });
    fixture = TestBed.createComponent(MockOnlyDecimalComponent);
    component = fixture.componentInstance;
    input = fixture.debugElement.query(By.css('input')).nativeElement;
  }));

  it('sollte Ziffern akzeptieren', () => {
    fixture.detectChanges();
    let keyDown = new KeyboardEvent('keydown', { key: '5' });
    input.dispatchEvent(keyDown);
    console.log(component.text)
  });

});

我用于单元测试的 MockComponent

@Component({ template: '<input onlyDecimal [(ngModel)]="text" type="string">' })
export class MockOnlyDecimalComponent {
  public text = '';
}

我需要能够测试结果。所以我希望如果我触发 Keydown 事件，component.text 字段会获取我在新 KeyBoardEvent 中发布的任何键的值:

let keyDown = new KeyboardEvent('keydown', { key: '5' }); // key: 's' should prevent default

我可以看到 console.log() 出现但我无法测试实际结果，因为我不会在 component.text 中显示

我被要求进行 Stackblitz:
https://stackblitz.com/edit/angular-testing-callback-cuqg9m

Answer 1

input.dispatchEvent(keyDown);
console.log(component.text);

调用 dispatchEvent()在 DOM 元素上不会更新输入文本。您无法使用手动 DOM 事件轻松模拟用户交互。模拟键盘输入涉及更多的 DOM 事件，然后只是一个 keydown事件。当用户在键盘上键入时，诸如更改事件、焦点事件和多个键盘事件之类的事情都会发生。

例如，如果用户从剪贴板粘贴文本或使用浏览器的自动完成功能，则您的指令不起作用。

如果您想限制表单的值，您需要构建一个自定义模板驱动验证器来改变输入值。

https://angular.io/guide/form-validation#custom-validators