Testing copy and paste with rich-text content

[smbkr]

I have a component with contenteditable set, which accepts only plaintext content on paste via an event handler function. I'm not sure what the best way to test this with testing-library and user-event is.

Implementation:

function AutoSizedTextInput({ setValue, ...props }) {
  async function handlePaste(e: ClipboardEvent) {
    e.preventDefault();

    let plaintext;

    if (e.clipboardData && e.clipboardData.getData) {
      plaintext = e.clipboardData.getData("text/plain");
    } else if (navigator.clipboard && navigator.clipboard.readText) {
      plaintext = await navigator.clipboard.readText();
    }

    if (!plaintext) {
      return;
    }

    document.execCommand("insertText", false, plaintext);
  }

  return (
    <div
      contentEditable
      role="textbox"
      label="Your reply"
      onPaste={handlePaste}
      onInput={(e) => onInput?.(e?.currentTarget?.textContent ?? "")}
      {...props}
    />
  );
}

Test:

import { render, screen, waitFor } from "@testing-library/preact";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { AutoSizedTextInput } from "./AutoSizedTextInput";

describe("AutoSizedTextInput", () => {
  it("removes extraneous formatting on paste", async () => {
    let value = "";
    const onInput = (v) => (value = v);

    render(
      <>
        <div data-testid="copy-source">
          <h1>Hello world!</h1>
          <p>Welcome to my web page.</p>
        </div>
        <AutoSizedTextInput onInput={onInput} />
      </>
    );

    const user = userEvent.setup({ writeToClipboard: true });

    const source = screen.getByTestId("copy-source");
    const dt = await user.copy();

    const input = screen.getByRole("textbox");
    await user.click(input);
    await user.paste(dt);

    expect(value).toEqual("Hello world! Welcome to my web page.");
  });
});

This test fails - the value of the input is always ''.

I've also tried creating a DataTransfer manually to pass to user.paste but this doesn't work as DataTransfer is not defined in the jsdom environment.

[smbkr]

Perhaps I don't understand the docs. https://testing-library.com/docs/user-event/clipboard#copy states that .copy() will "copy the current selection", but how do I select something? There's no such method available. Or do I need to manually place the cursor at the start of the 'screen', click, drag and release?

[qianjunhu]

@smbkr How did you solve the problem?

[qianjunhu]

@smbkr Can you try it? So I can succeed,
I hope this helps you a little
@testing-library/user-event": "^14.5.2"

it('paste a text', async function () {
    const user = userEvent.setup();
    render(<App readOnly={true} />);
    const dom = await screen.findByRole('textbox');
    await user.click(screen.getByRole('textbox'));
    await user.paste('How to Use');
    await waitFor(() => {
      expect(dom). toHaveTextContent('How to Use');
    });
  });