Clipboard API

[tleunen]

Hi,

I don't see any implementation of the clipboard api, with the DataTransfer, DataTransferItemList and DataTransferItemListItem objects. Is there any plan supporting it?

[domenic]

A pull request adding support for this would definitely be welcome.

[christopherschroer]

Is there any plan to support DataTransfer? It would help with an issue I'm having testing onDrop events using react-testing-library

testing-library/react-testing-library#339

[0xdevalias]

It's no full implementation to be sure.. but depending what you want out of the DataTransfer object, you may find good info on where to look to start implementing this/hacking around it for your needs in: #1272 (comment)

[icy0307]

It's no full implementation to be sure.. but depending what you want out of the DataTransfer object, you may find good info on where to look to start implementing this/hacking around it for your needs in: #1272 (comment)

I tried to mock ClipBoardEvent same as you did

import { implementation } from 'jsdom/lib/jsdom/living/events/Event-impl';

// @ts-ignore
class ClipboardEventMock extends implementation implements ClipboardEvent  {
    public readonly clipboardData: DataTransfer | null;
    public constructor(type: string, eventInitDict?: ClipboardEventInit) {
        super(type, eventInitDict);
        this.clipboardData = eventInitDict?.clipboardData || null;
    }
}

Object.defineProperty(window, 'ClipboardEvent', {
    writable: true,
    value: jest.fn().mockImplementation((type, eventInitDict) => new ClipboardEventMock(type, eventInitDict)),
});

but got a quiet wired result TypeError: Class constructor EventImpl cannot be invoked without 'new' .
Have you ever seen this?

[TimothyGu]

@icy0307 Instead of reaching into jsdom/lib which is unsupported, you should create a new mock for every window instead. Then you could say extends window.Event.

[clragon]

I just ran into this issue while trying to test my file type input with a drop event.
All the workarounds seem to be insane hacks though.

[rudolfbyker]

The simplest sane workaround I can think of is to implement ClipboardEvent like this:

class MockClipboardEvent extends Event implements ClipboardEvent {
  clipboardData: DataTransfer | null = null;
}

And then at the start of every test or script, do this:

window.ClipboardEvent = MockClipboardEvent;

If you need to perform test assertions of otherwise manipulate the ClipboardEvent objects, you could wrap it in a factory that collects all instances of MockClipboardEvent as they are created, for later inspection. You can also add any methods you like. For example:

export interface MockClipboardEvent extends ClipboardEvent {
  // Declare any extra stuff you need for testing.
  foo(): void;
}

export function createMockClipboardEventClass() {
  const instances: MockClipboardEvent[] = [];

  class _MockClipboardEvent extends Event implements MockClipboardEvent {
    clipboardData: DataTransfer | null;

    constructor(type: string, eventInitDict?: ClipboardEventInit) {
      super(type, eventInitDict);
      this.clipboardData = null;
      instances.push(this);
    }

    // Any extra stuff you need for testing.
    foo() {
      console.log(this.clipboardData);
    }
  }

  return {
    class: _MockClipboardEvent,
    instances,
  };
}

Then in your tests, you can check which clipboard events were created and what they contained, and even manipulate them in flight.