From c6ea7610a6ef9f60cf690fee3c74b00556f7e9ae Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 22 Oct 2024 18:38:39 +0900 Subject: [PATCH 01/13] test: add test --- .../fixtures/user-event/clipboard.test.ts | 48 +++++++++++++++++++ test/browser/specs/runner.test.ts | 1 + 2 files changed, 49 insertions(+) create mode 100644 test/browser/fixtures/user-event/clipboard.test.ts diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts new file mode 100644 index 000000000000..db1aba6b5324 --- /dev/null +++ b/test/browser/fixtures/user-event/clipboard.test.ts @@ -0,0 +1,48 @@ +import { expect, test } from 'vitest'; +import { page, userEvent, server } from '@vitest/browser/context'; + +test('clipboard', async () => { + document.body.innerHTML = ` + + + + `; + + const modifier = server.platform === 'darwin' ? 'Meta' : '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); + + // paste twice into second + await userEvent.click(page.getByPlaceholder('second')); + await userEvent.keyboard(paste); + await userEvent.keyboard(paste); + + // cut first "hello" + await userEvent.click(page.getByPlaceholder('first')); + await userEvent.keyboard(`{selectall}`); + await userEvent.keyboard(cut); + + // paste it to third + await userEvent.click(page.getByPlaceholder('third')); + await userEvent.keyboard(paste); + + // hellohello + expect([ + (page.getByPlaceholder('first').element() as any).value, + (page.getByPlaceholder('second').element() as any).value, + (page.getByPlaceholder('third').element() as any).value, + ]).toMatchInlineSnapshot(` + [ + "", + "hellohello", + "hello", + ] + `) +}); diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts index 0347d9be2d42..596e68d63eb2 100644 --- a/test/browser/specs/runner.test.ts +++ b/test/browser/specs/runner.test.ts @@ -147,6 +147,7 @@ test('user-event', async () => { "cleanup-retry.test.ts": "pass", "cleanup1.test.ts": "pass", "cleanup2.test.ts": "pass", + "clipboard.test.ts": "pass", } `) }) From 30c458fa957e43177849139fbf8ef0b6726571fc Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 22 Oct 2024 18:48:10 +0900 Subject: [PATCH 02/13] test: debug --- test/browser/specs/runner.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts index 596e68d63eb2..c53d64af5356 100644 --- a/test/browser/specs/runner.test.ts +++ b/test/browser/specs/runner.test.ts @@ -139,9 +139,11 @@ error with a stack }) test('user-event', async () => { - const { ctx } = await runBrowserTests({ + const { ctx, stderr } = await runBrowserTests({ root: './fixtures/user-event', }) + onTestFailed(() => console.error(stderr)) + expect(Object.fromEntries(ctx.state.getFiles().map(f => [f.name, f.result.state]))).toMatchInlineSnapshot(` { "cleanup-retry.test.ts": "pass", From 1d477aba59369d8f4a8998a366ecee0ee37f2239 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 22 Oct 2024 19:05:11 +0900 Subject: [PATCH 03/13] test: meta only for playwright/darwin --- test/browser/fixtures/user-event/clipboard.test.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index db1aba6b5324..27975205483f 100644 --- a/test/browser/fixtures/user-event/clipboard.test.ts +++ b/test/browser/fixtures/user-event/clipboard.test.ts @@ -8,10 +8,13 @@ test('clipboard', async () => { `; - const modifier = server.platform === 'darwin' ? 'Meta' : 'Control'; - const copy = `{${modifier}>}{c}{/${modifier}}` - const cut = `{${modifier}>}{x}{/${modifier}}` - const paste = `{${modifier}>}{v}{/${modifier}}` + const modifier = + server.provider === 'playwright' && server.platform === 'darwin' + ? 'Meta' + : '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')); From a298b2544df25b64538088cd4c92c125512856d3 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 22 Oct 2024 19:17:23 +0900 Subject: [PATCH 04/13] test: fix webdriverio --- test/browser/fixtures/user-event/clipboard.test.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index 27975205483f..25180608d24f 100644 --- a/test/browser/fixtures/user-event/clipboard.test.ts +++ b/test/browser/fixtures/user-event/clipboard.test.ts @@ -8,9 +8,15 @@ test('clipboard', async () => { `; + // https://webdriver.io/docs/api/browser/keys/ + // https://playwright.dev/docs/api/class-keyboard const modifier = - server.provider === 'playwright' && server.platform === 'darwin' - ? 'Meta' + server.provider === 'webdriverio' + ? server.platform === 'darwin' + ? 'Command' + : 'Control' + : server.provider === 'playwright' + ? 'ControlOrMeta' : 'Control'; const copy = `{${modifier}>}{c}{/${modifier}}`; const cut = `{${modifier}>}{x}{/${modifier}}`; From ab76c7176e2656d637afa2315ddd249657c29a9b Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 10:21:24 +0900 Subject: [PATCH 05/13] fix: fix webdriverio special key --- packages/browser/src/node/commands/keyboard.ts | 5 +++-- test/browser/fixtures/user-event/clipboard.test.ts | 4 +--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/browser/src/node/commands/keyboard.ts b/packages/browser/src/node/commands/keyboard.ts index 852a2fd2ca51..7f041dde9053 100644 --- a/packages/browser/src/node/commands/keyboard.ts +++ b/packages/browser/src/node/commands/keyboard.ts @@ -129,8 +129,9 @@ export async function keyboardImplementation( for (const { releasePrevious, releaseSelf, repeat, keyDef } of actions) { let key = keyDef.key! - const code = 'location' in keyDef ? keyDef.key! : keyDef.code! - const special = Key[code as 'Shift'] + // const code = 'location' in keyDef ? keyDef.key! : keyDef.code! + // const special = Key[code as 'Shift'] + const special = Key[key as 'Shift'] if (special) { key = special diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index 25180608d24f..2ed4415dc516 100644 --- a/test/browser/fixtures/user-event/clipboard.test.ts +++ b/test/browser/fixtures/user-event/clipboard.test.ts @@ -12,9 +12,7 @@ test('clipboard', async () => { // https://playwright.dev/docs/api/class-keyboard const modifier = server.provider === 'webdriverio' - ? server.platform === 'darwin' - ? 'Command' - : 'Control' + ? 'Ctrl' : server.provider === 'playwright' ? 'ControlOrMeta' : 'Control'; From 212dac1025e5ce0c6e3d5d2ec4581d4865bbd92c Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 10:44:20 +0900 Subject: [PATCH 06/13] test: tweak --- test/browser/fixtures/user-event/clipboard.test.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index 2ed4415dc516..3a31df902cd2 100644 --- a/test/browser/fixtures/user-event/clipboard.test.ts +++ b/test/browser/fixtures/user-event/clipboard.test.ts @@ -2,6 +2,9 @@ import { expect, test } from 'vitest'; import { page, userEvent, server } from '@vitest/browser/context'; test('clipboard', async () => { + // make it smaller since webdriverio fails when scaled + page.viewport(300, 300) + document.body.innerHTML = ` @@ -31,8 +34,9 @@ test('clipboard', async () => { await userEvent.keyboard(paste); await userEvent.keyboard(paste); - // cut first "hello" + // append first "world" and cut await userEvent.click(page.getByPlaceholder('first')); + await userEvent.keyboard('world'); await userEvent.keyboard(`{selectall}`); await userEvent.keyboard(cut); @@ -40,7 +44,6 @@ test('clipboard', async () => { await userEvent.click(page.getByPlaceholder('third')); await userEvent.keyboard(paste); - // hellohello expect([ (page.getByPlaceholder('first').element() as any).value, (page.getByPlaceholder('second').element() as any).value, @@ -49,7 +52,7 @@ test('clipboard', async () => { [ "", "hellohello", - "hello", + "helloworld", ] `) }); From 95068289dc480ddabf3fadd4c11551b35d000aac Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 10:58:59 +0900 Subject: [PATCH 07/13] feat: implement copy, cut, paste --- packages/browser/context.d.ts | 6 ++++ packages/browser/src/client/tester/context.ts | 33 ++++++++++++++++++- .../fixtures/user-event/clipboard.test.ts | 24 ++++---------- 3 files changed, 44 insertions(+), 19 deletions(-) diff --git a/packages/browser/context.d.ts b/packages/browser/context.d.ts index c332b1df9de9..dadfd3a8c7ee 100644 --- 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 + + // TODO: doc https://testing-library.com/docs/user-event/clipboard/ + copy: () => Promise + cut: () => Promise + paste: () => Promise + /** * 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 index 613740bc9fef..9adf4eda95c1 100644 --- 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 index 3a31df902cd2..83b9094064b5 100644 --- 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 () => { `; - // 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, From cb717ab68b318542a99f1fcbaa02af82886b7491 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 11:36:32 +0900 Subject: [PATCH 08/13] fix: fix on preview --- packages/browser/src/client/tester/context.ts | 7 ++++--- .../browser/fixtures/user-event/clipboard.test.ts | 15 ++++++++++++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts index 9adf4eda95c1..54a4178b417a 100644 --- a/packages/browser/src/client/tester/context.ts +++ b/packages/browser/src/client/tester/context.ts @@ -31,6 +31,7 @@ function triggerCommand(command: string, ...args: any[]) { export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent, options?: TestingLibraryOptions): UserEvent { let __tl_user_event__ = __tl_user_event_base__?.setup(options ?? {}) + let clipboardData: any const keyboard = { unreleased: [] as string[], } @@ -129,21 +130,21 @@ export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent }, async copy() { if (typeof __tl_user_event__ !== 'undefined') { - await __tl_user_event__.copy() + clipboardData = 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() + clipboardData = 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() + await __tl_user_event__.paste(clipboardData) return } await userEvent.keyboard(`{${modifier}>}{v}{/${modifier}}`) diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index 83b9094064b5..873167ccb620 100644 --- 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 } from '@vitest/browser/context'; +import { page, userEvent, server } from '@vitest/browser/context'; test('clipboard', async () => { // make it smaller since webdriverio fails when scaled @@ -11,10 +11,19 @@ test('clipboard', async () => { `; + async function selectall() { + if (server.provider === 'preview') { + // TODO: support selectall on preview? + await userEvent.keyboard('{Control>}{a}{/Control}') + } else { + await userEvent.keyboard('{selectall}') + } + } + // write first "hello" and copy to clipboard await userEvent.click(page.getByPlaceholder('first')); await userEvent.keyboard('hello'); - await userEvent.keyboard(`{selectall}`); + await selectall() await userEvent.copy(); // paste twice into second @@ -25,7 +34,7 @@ test('clipboard', async () => { // append first "world" and cut await userEvent.click(page.getByPlaceholder('first')); await userEvent.keyboard('world'); - await userEvent.keyboard(`{selectall}`); + await selectall() await userEvent.cut(); // paste it to third From 7da03e87b2c3029adbcb9cae7cfb8d83453b1a85 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 11:46:47 +0900 Subject: [PATCH 09/13] docs: jsdoc --- packages/browser/context.d.ts | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/browser/context.d.ts b/packages/browser/context.d.ts index dadfd3a8c7ee..b4998809c9d5 100644 --- a/packages/browser/context.d.ts +++ b/packages/browser/context.d.ts @@ -172,12 +172,27 @@ 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 - - // TODO: doc https://testing-library.com/docs/user-event/clipboard/ + /** + * Copies the selected content. + * @see {@link https://playwright.dev/docs/api/class-keyboard} Playwright API + * @see {@link https://webdriver.io/docs/api/browser/keys//} WebdriverIO API + * @see {@link https://testing-library.com/docs/user-event/clipboard#copy} testing-library API + */ copy: () => Promise + /** + * Cuts the selected content. + * @see {@link https://playwright.dev/docs/api/class-keyboard} Playwright API + * @see {@link https://webdriver.io/docs/api/browser/keys//} WebdriverIO API + * @see {@link https://testing-library.com/docs/user-event/clipboard#cut} testing-library API + */ cut: () => Promise + /** + * Pastes the copied or cut content. + * @see {@link https://playwright.dev/docs/api/class-keyboard} Playwright API + * @see {@link https://webdriver.io/docs/api/browser/keys//} WebdriverIO API + * @see {@link https://testing-library.com/docs/user-event/clipboard#paste} testing-library API + */ paste: () => Promise - /** * 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. From d4620bdce8a9daeb7fce640e8e897934594e0cec Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 11:51:01 +0900 Subject: [PATCH 10/13] chore: cleanup --- packages/browser/src/node/commands/keyboard.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/browser/src/node/commands/keyboard.ts b/packages/browser/src/node/commands/keyboard.ts index 7f041dde9053..eaaf27f6057b 100644 --- a/packages/browser/src/node/commands/keyboard.ts +++ b/packages/browser/src/node/commands/keyboard.ts @@ -129,8 +129,6 @@ export async function keyboardImplementation( for (const { releasePrevious, releaseSelf, repeat, keyDef } of actions) { let key = keyDef.key! - // const code = 'location' in keyDef ? keyDef.key! : keyDef.code! - // const special = Key[code as 'Shift'] const special = Key[key as 'Shift'] if (special) { From 24fd7dd21213f4bec803548947cdd35876a2def4 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 12:03:47 +0900 Subject: [PATCH 11/13] test: double click to select text --- .../browser/fixtures/user-event/clipboard.test.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index 873167ccb620..2b268fe956ab 100644 --- 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,19 +11,10 @@ test('clipboard', async () => { `; - async function selectall() { - if (server.provider === 'preview') { - // TODO: support selectall on preview? - await userEvent.keyboard('{Control>}{a}{/Control}') - } else { - await userEvent.keyboard('{selectall}') - } - } - // write first "hello" and copy to clipboard await userEvent.click(page.getByPlaceholder('first')); await userEvent.keyboard('hello'); - await selectall() + await userEvent.dblClick(page.getByPlaceholder('first')); await userEvent.copy(); // paste twice into second @@ -34,7 +25,7 @@ test('clipboard', async () => { // append first "world" and cut await userEvent.click(page.getByPlaceholder('first')); await userEvent.keyboard('world'); - await selectall() + await userEvent.dblClick(page.getByPlaceholder('first')); await userEvent.cut(); // paste it to third From 390457fc1727b864d5b10e4d57db8e4a23dfc2e9 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 12:17:10 +0900 Subject: [PATCH 12/13] docs: more --- docs/guide/browser/interactivity-api.md | 78 +++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/docs/guide/browser/interactivity-api.md b/docs/guide/browser/interactivity-api.md index b82f4a701edb..8d1deba9a7a4 100644 --- a/docs/guide/browser/interactivity-api.md +++ b/docs/guide/browser/interactivity-api.md @@ -530,3 +530,81 @@ References: - [Playwright `frame.dragAndDrop` API](https://playwright.dev/docs/api/class-frame#frame-drag-and-drop) - [WebdriverIO `element.dragAndDrop` API](https://webdriver.io/docs/api/element/dragAndDrop/) + +## userEvent.copy + +```ts +function copy(): Promise +``` + +Copy the selected text to the clipboard. + +```js +import { page, userEvent } from '@vitest/browser/context' + +test('copy and paste', async () => { + // write to 'source' + await userEvent.click(page.getByPlaceholder('source')) + await userEvent.keyboard('hello') + + // select and copy 'source' + await userEvent.dblClick(page.getByPlaceholder('source')) + await userEvent.copy() + + // paste to 'target' + await userEvent.click(page.getByPlaceholder('target')) + await userEvent.paste() + + await expect.element(page.getByPlaceholder('source')).toHaveTextContent('hello') + await expect.element(page.getByPlaceholder('target')).toHaveTextContent('hello') +}) +``` + +References: + +- [testing-library `copy` API](https://testing-library.com/docs/user-event/convenience/#copy) + +## userEvent.cut + +```ts +function cut(): Promise +``` + +Cut the selected text to the clipboard. + +```js +import { page, userEvent } from '@vitest/browser/context' + +test('copy and paste', async () => { + // write to 'source' + await userEvent.click(page.getByPlaceholder('source')) + await userEvent.keyboard('hello') + + // select and cut 'source' + await userEvent.dblClick(page.getByPlaceholder('source')) + await userEvent.cut() + + // paste to 'target' + await userEvent.click(page.getByPlaceholder('target')) + await userEvent.paste() + + await expect.element(page.getByPlaceholder('source')).toHaveTextContent('') + await expect.element(page.getByPlaceholder('target')).toHaveTextContent('hello') +}) +``` + +References: + +- [testing-library `cut` API](https://testing-library.com/docs/user-event/clipboard#cut) + +## userEvent.paste + +```ts +function paste(): Promise +``` + +Paste the text from the clipboard. See [`userEvent.copy`](#userevent-copy) and [`userEvent.cut`](#userevent-cut) for usage examples. + +References: + +- [testing-library `paste` API](https://testing-library.com/docs/user-event/clipboard#paste) From f6cfc279e8091167188e6e15d6b61a32f373b2f5 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 23 Oct 2024 12:20:33 +0900 Subject: [PATCH 13/13] test: tweak --- test/browser/fixtures/user-event/clipboard.test.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/test/browser/fixtures/user-event/clipboard.test.ts b/test/browser/fixtures/user-event/clipboard.test.ts index 2b268fe956ab..18f286a7ed29 100644 --- a/test/browser/fixtures/user-event/clipboard.test.ts +++ b/test/browser/fixtures/user-event/clipboard.test.ts @@ -17,10 +17,9 @@ test('clipboard', async () => { await userEvent.dblClick(page.getByPlaceholder('first')); await userEvent.copy(); - // paste twice into second + // paste into second await userEvent.click(page.getByPlaceholder('second')); await userEvent.paste(); - await userEvent.paste(); // append first "world" and cut await userEvent.click(page.getByPlaceholder('first')); @@ -39,7 +38,7 @@ test('clipboard', async () => { ]).toMatchInlineSnapshot(` [ "", - "hellohello", + "hello", "helloworld", ] `)