Karma 测试粘贴事件

Question

我有一个简单的组件来处理粘贴事件到表单输入中。

表格：

this.searchForm = this.formBuilder.group({
  query: [ null, [Validators.required] ]
});

onPaste(event) {
    event.preventDefault();
    const formattedQuery = event.clipboardData.getData('text/plain')
      .split(/,?[\r\n\t]+\s?/)
      .join(', ')
      .replace(/,\s?$/g, '');

    this.searchForm.get('query').setValue(formattedQuery);
  }

现在我正在尝试测试它，它看起来像这样：

it('should reformat pasted data', () => {
    const queryField = fixture.debugElement.query(By.css('input[type="search"]'));
    queryField.nativeElement.dispatchEvent(new ClipboardEvent('paste', {
      dataType: 'text/plain', 
      data: '123\r123'
    }));
    fixture.detectChanges();
    expect(queryField.nativeElement.value).toBe('123, 123');
    // also tried expect(component.searchForm.get('query').value).toBe('123, 123');
  });

但结果我有

Expected '' to be '123, 123'

如果我这样做，console.log(queryField.nativeElement)它会显示输入，但为什么它不处理new ClipboardEvent('paste')事件？

<input class="ng-untouched ng-pristine ng-invalid" formcontrolname="query" type="search" ng-reflect-name="query">

您可以在这里找到完整的组件https://stackblitz.com/edit/angular-cp9yhx?file=app%2Fhello.component.ts

我的单元测试有什么问题？

Answer 1

尝试这个：

it('should reformat pasted data', () => {
  component.onPaste(new ClipboardEvent('paste', {
    dataType: 'text/plain', 
    data: '123\r123'
  }));
  expect(queryField.nativeElement.value).toBe('123, 123');
});

甚至

it('should reformat pasted data', () => {
  component.onPaste(new ClipboardEvent('paste', {
    dataType: 'text/plain', 
    data: '123\r123'
  }));
  expect(component.searchForm.get('query').value).toBe('123, 123');
});