Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(browser): support clipboard api userEvent.copy, cut, paste #6769

Merged
merged 22 commits into from
Dec 23, 2024

Conversation

hi-ogawa
Copy link
Contributor

@hi-ogawa hi-ogawa commented Oct 22, 2024

Description

Manually tested on my Linux PC:

  • playwright / chromium
  • playwright / firefox
  • webdriver / chrome
  • webdriver / firefox
  • preview / chromium

todo

  • docs

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
  • Ideally, include a test that fails without this PR but passes with it.
  • Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

  • Run the tests with pnpm test:ci.

Documentation

  • If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

  • Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

Copy link

netlify bot commented Oct 22, 2024

Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit c73e0d7
🔍 Latest deploy log https://app.netlify.com/sites/vitest-dev/deploys/67660db6027b2800082bb120
😎 Deploy Preview https://deploy-preview-6769--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Comment on lines -132 to -148
const code = 'location' in keyDef ? keyDef.key! : keyDef.code!
const special = Key[code as 'Shift']
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed this as it wasn't working when key === 'Ctrl', which is webdriverio's special key to switch modifier keys based on platform. I'm not sure the original code's intent, but it didn't break existing tests.

Copy link
Member

@sheremet-va sheremet-va Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The difference here is AltrRight for example - see https://github.com/testing-library/user-event/blob/main/src/keyboard/keyMap.ts. Without this, it will always trigger Alt, not AltRight

The same is for ControlLeft/ControlRight

Copy link
Contributor Author

@hi-ogawa hi-ogawa Dec 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is broken anyways regardless of what I do here. (see test/browser/fixtures/user-event/keyboard.test.ts. on main [Shift] works differently, but [Shift] shouldn't actually work since there's no such code).

I don't think solving this is a scope of PR adding copy/cut/paste sugars, so we can follow this up separately #7118.

@hi-ogawa hi-ogawa marked this pull request as ready for review October 23, 2024 03:29
@hi-ogawa hi-ogawa changed the title feat(browser): support clipboard api feat(browser): support clipboard api userEvent.copy, cut, paste Oct 23, 2024
sheremet-va
sheremet-va previously approved these changes Oct 23, 2024
@sheremet-va sheremet-va added this to the 3.0.0 milestone Dec 19, 2024
@sheremet-va
Copy link
Member

This got lost! Can you resolve the merge conflicts? Feel free to merge!

@hi-ogawa
Copy link
Contributor Author

Review required 😄

Comment on lines -132 to -148
const code = 'location' in keyDef ? keyDef.key! : keyDef.code!
const special = Key[code as 'Shift']
Copy link
Member

@sheremet-va sheremet-va Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The difference here is AltrRight for example - see https://github.com/testing-library/user-event/blob/main/src/keyboard/keyMap.ts. Without this, it will always trigger Alt, not AltRight

The same is for ControlLeft/ControlRight

? 'ControlOrMeta'
: provider === 'webdriverio'
? 'Ctrl'
: 'Control'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am confused why this is required here. All sent characters are from https://github.com/testing-library/user-event/blob/main/src/keyboard/keyMap.ts shouldn't we do this check in keyboard?

We probably need a test for every key 👀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parseKeyDef doesn't strictly check what's inside {xxx} and, for example, {ControlOrMeta} ends up with keyDef: { key: 'ControlOrMeta', code: 'Unknown' }. Then we only send keyDef.key to the provider, so it's working.

We should probably do something with this key translation layer, but what do you suggest for this specific ControlOrMeta etc... specifically? Is this about consistency between providers (like supporting ControlOrMeta both for playwright and webdriverio)?

Copy link
Member

@sheremet-va sheremet-va Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this about consistency between providers (like supporting ControlOrMeta both for playwright and webdriverio)?

I think it's about the compatibility with testing-library. If there are keys that are unique to providers, they can stay that way, but common keys should do the same thing and should be entered the same way like in the key map *so, ControlOrMeta is Control in every provider or something) - we can extend the keyMap, by the way

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, that sounds like a good spec. I'll check later, but providers might only support only {key} concept (like {Control}), but not physical [code] (like [ControlLeft]). Is alignment only for {key} or you're thinking about to do [code] too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine to fallback to Control when ControlLeft is used. There is a location property on the even though, so it might be useful for some: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location

But if there is no way to do that in provider, then we can't do anything about it yet

@hi-ogawa hi-ogawa force-pushed the feat-browser-clipboard branch from 0b5c4a9 to 6ff4a4f Compare December 23, 2024 06:15
@hi-ogawa hi-ogawa requested a review from sheremet-va December 23, 2024 06:40
@hi-ogawa hi-ogawa merged commit 843a621 into vitest-dev:main Dec 23, 2024
13 checks passed
@hi-ogawa hi-ogawa deleted the feat-browser-clipboard branch December 23, 2024 08:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

browser testing: enable (or make it easier) to copy/paste text
2 participants