search

testing-library / user-event

🐕 Simulate user events
https://testing-library.com/user-event
MIT License
2.19k stars 249 forks source link

feat: add option to set element class on hover #1212

Open rChaoz opened 7 months ago

rChaoz commented 7 months ago

Important: I have two different changes in the same PR as I want to use the version generated by codesandbox, but when ready to mege this can be fixed.

What:

  1. Add option to set a class on target element on hover. Useful for testing hover states either by manually adding .my-hover-class on top of :hover in CSS or with a plugin such as the one for PostCSS or Storybook.
  2. Fix focus event not sent sometimes. startSelecting() is called before focusElement(). Setting a selection on an element sets that element as the document.activeElement, causing focusElement() not to do anything.

Why:

Allow testing of CSS hover states using userEvent.hover / userEvent.unhover or other commands that move the mouse.

How:

Add a new config option hoverClass (string) which defaults to null. When set (non-null), target.classList.add(hoverClass) is called whenever mouseenter is emitted and target.classList.remove(hoverClass) whenever mouseleave is emitted.

Checklist:

codesandbox-ci[bot] commented 7 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.