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 我的单元测试有什么问题吗？

- rel1x

---

你有没有尝试过不使用 fixture.detectChanges() ？ - pop

我做了，结果一样。 - rel1x

值 325435956, 325435956 来自哪里？你在测试之前设置过吗？比如在 beforeEach 中？ - pop

抱歉，我尝试了不同的数字。让我们假设它是“123，123”。 - rel1x

尝试直接调用onPaste。因此，不要在元素上分派事件queryField.nativeElement.dispatchEvent....，而是尝试调用onPaste( new ClipboardEvent(....，看看是否有帮助。 - pop

TypeError: queryField.nativeElement.onPaste is not a function and TypeError: queryField.onPaste is not a function - rel1x

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');
});

- pop

---

抱歉，但我得到了相同的结果“预期''为'123, 123'。”我已经复制粘贴了您的两个示例，没有做任何更改。 - rel1x

Answer 2

这对我起了作用：

it('should trim pasted data', () => {
  const initialValue = 'test ';
  fixture.detectChanges();

  // Setting initial value
  const el = inputElement.nativeElement;
  el.value = initialValue;

  // Setting up event data
  const pasteData = new DataTransfer();
  pasteData.setData('text', initialValue);

  // Creating event
  const pasteEvent = new ClipboardEvent('paste', {
    clipboardData: 'new value'  <- CHANGED
  } as any);


  // Dispatching event    
  el.dispatchEvent(pasteEvent);

  expect(el.value).toEqual('new value'); <- CHANGED
});

- luke-at-work

---

不，它只是看起来像工作正常，因为el.value = initialValue;。 - ed4becky

谢谢@ed4becky。我真是太蠢了。我更新了答案。 - luke-at-work

pasteData有什么用途？ - Siraj Kakeh