为clipboardData创建自定义ClipboardEvent属性

Question

在我的卡玛-茉莉花测试中，我必须测试我的onPaste方法。

onPaste方法：

onPaste(event: any): void {
  const pastedText = event.clipboardData.getData('text/plain');
  // some stuff
}

我的单元测试：

it('should do something', () => {
  const queryField = fixture.debugElement.query(By.css('input[type="search"]')).nativeElement;
  queryField.dispatchEvent(new ClipboardEvent('paste', {
    dataType: 'text/plain',
    data: '325435956\r325435956',
  }));
  // some stuff
})

我使用Chrome运行测试，但是Chrome中的new ClipboardEvent()创建了ClipboardEvent对象，其中clipboardData是null，event.clipboardData.getData('text/plain')抛出了一个错误：

Uncaught TypeError: Cannot read property 'getData' of null

它不会发生在火狐，所以如果我使用karma-firefox-launcher，它的工作很好，但我必须使用Chrome。所以，我想出了一些解决办法。

第一个想法是创建ClipboardEvent对象并重写clipboardData属性：

const pasteEvent = new ClipboardEvent('paste', {
  dataType: 'text/plain',
  data: '325435956\r325435956',
});

pasteEvent.clipboardData = {
  getData() {
    return this.data;
  }
};

但是我做不到，因为clipboardData是一个只读属性。

第二个想法是创建假ClipboardEvent对象：

function FakePasteEvent(options) {
  this.clipboardData = {
    dataType: options.dataType,
    data: options.data,
    getData() {
      return this.data;
    }
  };
}
const pasteEvent = new FakePasteEvent({
  dataType: 'text/plain',
  data: '325435956\r325435956',
});

console.log(pasteEvent.clipboardData.getData()) // returns what I need

但是我不能将它传递给dispatchEvent，因为pasteEvent的类型不是事件。然后我想我可以为我的FakePasteEvent指定原型对象

Object.setPrototypeOf(pasteEvent, ClipboardEvent);

但不管怎样，我有个错误：

TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'

你能帮我解决这个问题吗？)

这里的代码示例http://jsbin.com/puqilivalo/1/edit?html,js,console,output

Answer 1

有趣的是，我目前还在纠结于在chrome和Firefox之间谁是正确的，我仍然不知道规格在他们说什么的时候说了什么

字典ClipboardEventInit : EventInit { DataTransfer？clipboardData =空；}；

和

构造函数(DOMString类型，可选的ClipboardEventInit eventInitDict)，Exposed=Window接口ClipboardEvent :事件{ readonly属性DataTransfer？clipboardData；}；

我倾向于说，当clipboardData属性返回null时，Chrome是正确的，但接下来的示例使FF的行为正确：

示例3 var pasteEvent =新的ClipboardEvent(‘粘贴’)； pasteEvent.clipboardData.items.add('My string'，‘text/平原’)；document.dispatchEvent(pasteEvent)；

但是无论如何，Chrome确实支持(部分) DataTransfer构造器，而FF仍然不支持。然后，您也可以用chrome中的DataTransfer对象构造您的事件：

​

var dT = null;
try{ dT = new DataTransfer();} catch(e){}
var evt = new ClipboardEvent('paste', {clipboardData: dT});
console.log('clipboardData available: ', !!evt.clipboardData);
evt.clipboardData.setData('text/plain', 'Hello world');

document.onpaste = function(e){
  console.log('onpaste: ', e.clipboardData.getData('text/plain'));
};
document.dispatchEvent(evt);

​