Support contenteditable divs with userEvent.paste

[rbrady-hs]

• @testing-library/user-event version: 13.1.9

• Testing Framework and version: jasmine 2.91
• DOM Environment: Chrome 91.0.4472.114

Relevant code or config

describe('contentEditable', () => {
  it('pastes', () => {
    render(<div contentEditable="true" data-testid="input" />);
    userEvent.paste(screen.getByTestId('input'), 'asd');
    expect(screen.getByLabelText('input').value).toEqual('asd');
  });
});

What you did:

As above, tried pasting into a div with contenteditable="true"

What happened:

Test fails with the following error message:

TypeError: The given DIV element is currently unsupported.
      A PR extending this implementation would be very much welcome at https://github.com/testing-library/user-event

Reproduction repository: N/A

Problem description: N/A

Suggested solution: Not too sure what the implementation would look like, but couldn't find a feature request covering this so thought I'd add an issue if that's alright!

[signal-intrusion]

This would be fantastic. We have some custom paste behaviors that cannot be tested in Jest currently.

There is a sanity check here:

user-event/src/paste.ts

Lines 36 to 41 in a31ecc9

	if (!isSupportedElement(element)) {
	throw new TypeError(
	`The given ${element.tagName} element is currently unsupported.
	A PR extending this implementation would be very much welcome at https://github.com/testing-library/user-event`,
	)
	}

and here:

user-event/src/paste.ts

Lines 17 to 27 in a31ecc9

	function isSupportedElement(
	element: HTMLElement,
	): element is
	| HTMLTextAreaElement
	| (HTMLInputElement & {type: editableInputTypes}) {
	return (
	(isElementType(element, 'input') &&
	Boolean(editableInputTypes[element.type as editableInputTypes])) ||
	isElementType(element, 'textarea')
	)
	}

which should also check for contenteditable attr on just about any element.

[ph-fritsche]

Please have a look at #782 .

[ph-fritsche]

Resolved in #785