fix(browser): cleanup keyboard state

[hi-ogawa]

Description

• closes userEvent.keyboard doesn't release pressed key with playwright provider #6693

I added userEvent.cleanup to reset keyboard state and hooked into tester cleanup runner onAfterRunTask.

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:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b23c8ae
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/67159487dc4c840008bda622
😎 Deploy Preview	https://deploy-preview-6731--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[sheremet-va]

Maybe for per-test isolation we can provide a userEvent inside the test context:

const test = base.extend({
  userEvent: async ({}, use) => {
    const user = userEvent.setup()
    await use(user)
    await user.cleanup()
  },
})

test('my test', ({ userEvent }) => {
 // ...
})

I don't think we can use .extend on our side because it would break this use case:

beforeEach(ctx => {
  ctx.dynamicAssigment = true
})

But we can maybe do it the same way we inject expect 🤔

[hi-ogawa]

I didn't realize but I guess OP expected per-test isolation #6693 (comment) because vitest-browser-svelte provides automatic document/component cleanup from beforeEach, so ideally we should do the same for userEvent. Let me think about it.

[hi-ogawa]

I moved userEvent.cleanup to runner onAfterRunTask for test isolation. For @testing-library/user-event cleanup on preview provider, I need to tweak structure a bit.

[sheremet-va]

I don't understand why this is needed; the first argument is supposed to be called with setup() - see the setup method on L40

[hi-ogawa]

Not sure if this what you're asking, but we need to pass around the original userEvent since this happens:

import { userEvent } from "@testing-library/user-event"

const userEvent1 = userEvent.setup();
userEvent1.keyboard("{Alt>}")

// userEvent1 and userEvent2 share the same keyboard state 
const userEvent2 = userEvent1.setup();
userEvent2.keyboard("{Tab}") // altKey = true


// need to call original `userEvent.setup()` to have a fresh state
{
  const userEvent1 = userEvent.setup();
  userEvent1.keyboard("{Alt>}")
  
  const userEvent2 = userEvent.setup();
  userEvent2.keyboard("{Tab}") // altKey = false
}

For L40, we should probably recurse it like createUserEvent(__tl_user_event_base__).

[sheremet-va]

We need documentation for every public API - in jsdoc and vitest.dev

[sheremet-va]

I added userEvent.cleanup to reset keyboard state and hooked into tester cleanup runner onAfterRunTask.

Hm, actually, our vitest-browser-* wrappers cleanup the state before the test runs, not after.

[hi-ogawa]

Good point. I thought it's trivial to move it to onBeforeTryTask, but just realized it's difficult for playwright since we need to reset keyboard based on previous userEvent instance before moving to next test file.

Btw, I thought I was using onAfterTryTask but realized it's onAfterRunTask. I should probably update this one at least to simulate afterEach like behavior.