vuejs / test-utils

Vue Test Utils for Vue 3
https://test-utils.vuejs.org
MIT License
1.04k stars 244 forks source link

Bug: Keydown events supply incorrect values for event.code #2544

Open spthiel opened 21 hours ago

spthiel commented 21 hours ago

Describe the bug When using element.trigger('keydown.xyz'), some keys incorrectly pass the keyCode as code to handlers of KeyboardEvents.

This fundamentally breaks testing for keyboard navigation when f.ex. a dropdown has to be tested for keydown.home, keydown.end, space and enter where a handler with check for event.code is the best practice

To Reproduce https://stackblitz.com/edit/github-bbenms?file=src%2FButton.vue&view=editor

-> Event.code logs a string representation of Event.keyCode for various keys. Tested keys that do not work correctly: Home, End, Enter, Space, Escape

Expected behavior Event.code should correctly log the name of the key

Related information:

  System:
    OS: Linux 5.15 Linux Mint 21.3 (Virginia)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 14.30 GB / 31.02 GB
    Container: Yes
    Shell: 0.96.0 - /home/n/.cargo/bin/nu
  npmPackages:
    @vue/test-utils: ^2.4.5 => 2.4.6 
    vitest: ^1.5.0 => 1.6.0 
    vue: ^3.5.12 => 3.5.12 

Additional context

cexbrayat commented 18 hours ago

Yes, I think this behavior is there for backward compatibility (see https://github.com/vuejs/test-utils/blob/3988a3161074d3ea6bbcbc57995f4f2829a83b39/src/createDomEvent.ts#L102-L117)

Feel free to open a PR if you think that could be omproved without breaking existing applciations 👍

spthiel commented 18 hours ago

for backward compatibility

What kind of backwards compatability are we talking here? To my knowledge Event.code has never used to house the keyCode. This seems to me to just break web standard

cexbrayat commented 18 hours ago

keyCode was a thing but is deprecated https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

But as I said, we're welcoming any contribution to improve this use case

spthiel commented 16 hours ago

keyCode was a thing but is deprecated

Yes I understand keyCode was deprecated but "code" wasn't and was never used to save a number. I can contribute here but my idea would be to just remove the "backwards compatibility"

spthiel commented 2 minutes ago

(see)

Actually looking at your code snippet it seems this issue would already be partially solved if a new version was built due to https://github.com/vuejs/test-utils/pull/2434 which would at least allow the 2nd test case in the repro to succeed