feat: implement copy, cut, paste

vitest-dev · Oct 23, 2024 · 9506828 · 9506828
1 parent 212dac1
commit 9506828
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/packages/browser/context.d.ts b/packages/browser/context.d.ts
@@ -172,6 +172,12 @@ export interface UserEvent {
    * @see {@link https://testing-library.com/docs/user-event/utility#upload} testing-library API
    */
   upload: (element: Element | Locator, files: File | File[] | string | string[]) => Promise<void>
+
+  // TODO: doc https://testing-library.com/docs/user-event/clipboard/
+  copy: () => Promise<void>
+  cut: () => Promise<void>
+  paste: () => Promise<void>
+
   /**
    * Fills an input element with text. This will remove any existing text in the input before typing the new text.
    * Uses provider's API under the hood.

diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts
@@ -35,7 +35,16 @@ export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent
     unreleased: [] as string[],
   }
 
-  return {
+  // https://playwright.dev/docs/api/class-keyboard
+  // https://webdriver.io/docs/api/browser/keys/
+  const modifier
+    = provider === `playwright`
+      ? 'ControlOrMeta'
+      : provider === 'webdriverio'
+        ? 'Ctrl'
+        : 'Control'
+
+  const userEvent: UserEvent = {
     setup(options?: any) {
       return createUserEvent(__tl_user_event_base__, options)
     },
@@ -118,7 +127,29 @@ export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent
       )
       keyboard.unreleased = unreleased
     },
+    async copy() {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        await __tl_user_event__.copy()
+        return
+      }
+      await userEvent.keyboard(`{${modifier}>}{c}{/${modifier}}`)
+    },
+    async cut() {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        await __tl_user_event__.cut()
+        return
+      }
+      await userEvent.keyboard(`{${modifier}>}{x}{/${modifier}}`)
+    },
+    async paste() {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        await __tl_user_event__.paste()
+        return
+      }
+      await userEvent.keyboard(`{${modifier}>}{v}{/${modifier}}`)
+    },
   }
+  return userEvent
 }
 
 export function cdp() {

diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts
@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { page, userEvent, server } from '@vitest/browser/context';
+import { page, userEvent } from '@vitest/browser/context';
 
 test('clipboard', async () => {
   // make it smaller since webdriverio fails when scaled
@@ -11,38 +11,26 @@ test('clipboard', async () => {
     <input placeholder="third" />
   `;
 
-  // https://webdriver.io/docs/api/browser/keys/
-  // https://playwright.dev/docs/api/class-keyboard
-  const modifier =
-    server.provider === 'webdriverio'
-      ? 'Ctrl'
-      : server.provider === 'playwright'
-      ? 'ControlOrMeta'
-      : 'Control';
-  const copy = `{${modifier}>}{c}{/${modifier}}`;
-  const cut = `{${modifier}>}{x}{/${modifier}}`;
-  const paste = `{${modifier}>}{v}{/${modifier}}`;
-
   // write first "hello" and copy to clipboard
   await userEvent.click(page.getByPlaceholder('first'));
   await userEvent.keyboard('hello');
   await userEvent.keyboard(`{selectall}`);
-  await userEvent.keyboard(copy);
+  await userEvent.copy();
 
   // paste twice into second
   await userEvent.click(page.getByPlaceholder('second'));
-  await userEvent.keyboard(paste);
-  await userEvent.keyboard(paste);
+  await userEvent.paste();
+  await userEvent.paste();
 
   // append first "world" and cut
   await userEvent.click(page.getByPlaceholder('first'));
   await userEvent.keyboard('world');
   await userEvent.keyboard(`{selectall}`);
-  await userEvent.keyboard(cut);
+  await userEvent.cut();
 
   // paste it to third
   await userEvent.click(page.getByPlaceholder('third'));
-  await userEvent.keyboard(paste);
+  await userEvent.paste();
 
   expect([
     (page.getByPlaceholder('first').element() as any).value,