javascript - 为 ClipboardEvent 创建自定义 clipboardData 属性

Question

在我的 Karma-Jasmine 测试中，我必须测试我的 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

在 Firefox 中不会发生这种情况，所以如果我使用 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 的类型不是Event。然后我想我可以为我的 FakePasteEvent 指定原型(prototype)对象:

Object.setPrototypeOf(pasteEvent, ClipboardEvent);

但无论如何我有一个错误:

TypeError:无法在“EventTarget”上执行“dispatchEvent”:参数 1 不是“Event”类型

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

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

Answer 1

非常有趣的是，我目前正在纠结于 Chrome 和 Firefox 之间谁是正确的，我仍然无法弄清楚是什么 the specs告诉他们什么时候说

dictionary ClipboardEventInit : EventInit {
 DataTransfer? clipboardData = null;
};

和

[Constructor (DOMString type, optional ClipboardEventInit eventInitDict), Exposed=Window]
 interface ClipboardEvent : Event {
 readonly attribute DataTransfer? clipboardData;
};

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

Example 3
var pasteEvent = new ClipboardEvent('paste');
pasteEvent.clipboardData.items.add('My string', 'text/plain'); 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);