feat: support clipboardData like dataTransfer. (#585)

* Support `clipboardData` like `dataTransfer`.

* Update events.js

* chore: Add test for clipboardData properties

Co-authored-by: Nick McCurdy <nick@nickmccurdy.com>

src/__tests__/events.js

@@ -140,17 +140,21 @@ const eventTypes = [
 
 const allEvents = Object.keys(eventMap)
 
-const bubblingEvents = allEvents
-  .filter(eventName => eventMap[eventName].defaultInit.bubbles)
+const bubblingEvents = allEvents.filter(
+  eventName => eventMap[eventName].defaultInit.bubbles,
+)
 
-const composedEvents = allEvents
-  .filter(eventName => eventMap[eventName].defaultInit.composed)
+const composedEvents = allEvents.filter(
+  eventName => eventMap[eventName].defaultInit.composed,
+)
 
-const nonBubblingEvents = allEvents
-  .filter(eventName => !bubblingEvents.includes(eventName))
+const nonBubblingEvents = allEvents.filter(
+  eventName => !bubblingEvents.includes(eventName),
+)
 
-const nonComposedEvents = allEvents
-  .filter(eventName => !composedEvents.includes(eventName))
+const nonComposedEvents = allEvents.filter(
+  eventName => !composedEvents.includes(eventName),
+)
 
 eventTypes.forEach(({type, events, elementType}) => {
   describe(`${type} Events`, () => {
@@ -203,7 +207,7 @@ describe(`Composed Events`, () => {
       const spy = jest.fn()
       node.addEventListener(event.toLowerCase(), spy)
 
-      const shadowRoot = node.attachShadow({ mode: 'closed' })
+      const shadowRoot = node.attachShadow({mode: 'closed'})
       const innerNode = document.createElement('div')
       shadowRoot.appendChild(innerNode)
 
@@ -218,7 +222,7 @@ describe(`Composed Events`, () => {
       const spy = jest.fn()
       node.addEventListener(event.toLowerCase(), spy)
 
-      const shadowRoot = node.attachShadow({ mode: 'closed' })
+      const shadowRoot = node.attachShadow({mode: 'closed'})
       const innerNode = document.createElement('div')
       shadowRoot.appendChild(innerNode)
 
@@ -234,7 +238,7 @@ describe(`Aliased Events`, () => {
       const node = document.createElement('div')
       const spy = jest.fn()
       node.addEventListener(eventAliasMap[eventAlias].toLowerCase(), spy)
-      
+
       fireEvent[eventAlias](node)
       expect(spy).toHaveBeenCalledTimes(1)
     })
@@ -303,6 +307,37 @@ test('assigning the files property on dataTransfer', () => {
   expect(spy.mock.calls[0][0]).toHaveProperty('dataTransfer.files', [file])
 })
 
+test('assigns clipboardData properties', () => {
+  const node = document.createElement('div')
+  const spy = jest.fn()
+  node.addEventListener('paste', spy)
+  const clipboardData = {
+    dropEffect: 'none',
+    effectAllowed: 'uninitialized',
+    files: [],
+    items: [
+      {
+        kind: 'string',
+        type: 'text/plain',
+        file: {
+          getAsFile() {
+            return null
+          },
+        },
+      },
+    ],
+    types: ['text/plain'],
+    getData() {
+      return 'example'
+    },
+  }
+  fireEvent.paste(node, {clipboardData})
+  expect(spy).toHaveBeenCalledTimes(1)
+  expect(spy.mock.calls[0][0].clipboardData).toBe(clipboardData)
+  expect(clipboardData.items[0].file.getAsFile()).toBeNull()
+  expect(clipboardData.getData('text')).toBe('example')
+})
+
 test('fires events on Window', () => {
   const messageSpy = jest.fn()
   window.addEventListener('message', messageSpy)

src/events.js

@@ -62,21 +62,25 @@ Object.keys(eventMap).forEach(key => {
         event[eventKey] = otherInit[eventKey]
       })
     }
-
-    const {dataTransfer} = eventInit
-    if (typeof dataTransfer === 'object') {
-      // DataTransfer is not supported in jsdom: https://github.com/jsdom/jsdom/issues/1568
-      /* istanbul ignore if  */
-      if (typeof window.DataTransfer === 'function') {
-        Object.defineProperty(event, 'dataTransfer', {
-          value: Object.assign(new window.DataTransfer(), dataTransfer),
-        })
-      } else {
-        Object.defineProperty(event, 'dataTransfer', {
-          value: dataTransfer,
-        })
+
+    // DataTransfer is not supported in jsdom: https://github.com/jsdom/jsdom/issues/1568
+    ['dataTransfer', 'clipboardData'].forEach(dataTransferKey => {
+      const dataTransferValue = eventInit[dataTransferKey];
+
+      if (typeof dataTransferValue === 'object') {
+        /* istanbul ignore if  */
+        if (typeof window.DataTransfer === 'function') {
+          Object.defineProperty(event, dataTransferKey, {
+            value: Object.assign(new window.DataTransfer(), dataTransferValue)
+          })
+        } else {
+          Object.defineProperty(event, dataTransferKey, {
+            value: dataTransferValue
+          })
+        }
       }
-    }
+    })
+
     return event
   }