feat: add special keys to userEvent.type()

[malwilley]

Hello! I hope it's okay if I submit a PR for this feature. It seems to be highly requested (#181, #172, #31) and it would make this library much more useful for some of my own use cases. Was hoping this would be a smaller change, but the scope got away from me a little bit!

This adds support for some new key presses in userEvent.type(). I am following the same syntax that cypress uses in their .type() command.

Commands added:

• {enter}
• {esc}
• {backspace}
• {shift}
• {ctrl}
• {alt}
• {meta}

This does not yet track cursor position or selection range, so keys like {leftarrow} have not been implemented. This work could be done in a followup PR, but I wanted to keep the scope of this relatively small so I stopped here.

Code notes:

• The code for the type() command was getting pretty unwieldy so I've broken it out into its own file.
• Testing that events were being called with the right properties was resulting in some hairy test code. To combat this I've added toHaveBeenCalledWithEventAtIndex which helps assert that the event handlers are being called with the correct events.

Checklist:

• Documentation
• Tests
• Typings (N/A)
• Ready to be merged

[codecov]

Codecov Report

Merging #235 into master will increase coverage by 0.17%.
The diff coverage is 97.36%.

@@            Coverage Diff             @@
##           master     #235      +/-   ##
==========================================
+ Coverage   98.90%   99.07%   +0.17%     
==========================================
  Files           1        2       +1     
  Lines         182      216      +34     
  Branches       55       60       +5     
==========================================
+ Hits          180      214      +34     
  Misses          2        2              

Impacted Files	Coverage Δ
src/index.js	98.75% <90.00%> (-0.16%)	⬇️
src/type.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6239c3a...f6d606a. Read the comment docs.

[malwilley]

@kentcdodds @Gpx happy to see a flurry of activity on this repo!

I'd be happy to fix the conflicts on this PR if the changes are still wanted. Since this is such a big feature, however, I would not at all be offended if you preferred to tackle this in a different way. Let me know, and thank you for taking time to maintain this library!

[kentcdodds]

Hi! Thanks so much for this. Sorry for messing up the git history for you a bit 😬

I hadn't noticed this PR, but I'm definitely a fan. If you'd like to get it updated, I'll help get it merged. Thanks!

[malwilley]

@kentcdodds all cleaned up and ready for review!

Note that there are some prettier changes in index.js due to a previous PR getting merged without the new formatting requirements.

Also, code coverage is technically down in index.js, but I believe that's only because I reduced the number of lines in that file when I extracted the type function.

[kentcdodds]

Thanks for your work on this. Just want to let you know that I've seen this. I need more time to review it though. I hope to get back to you soon though.

[klujanrosas]

Should this be deleteContentBackward?

[malwilley]

Good catch! Yes it should

[kentcdodds]

Hi @malwilley,

I promise I'm still thinking about this PR. It's in my inbox and I think about it multiple times a day. I really feel like there's something we could do to improve the design and reduce code complexity, but I think I need to experiment with it myself a little bit. I may work on it a little bit today on my live stream at https://kcd.im/discord if you want to join in later.

[malwilley]

@kentcdodds No problem at all! I too think there is a lot of room for improvement -- I'm all ears if there is a more elegant solution to be found.

[kentcdodds]

Thanks for all your work on this! I've opened a new PR that I think you'll really like. Would love your feedback: #308

[kentcdodds]

🎉 This issue has been resolved in version 11.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀