user-event icon indicating copy to clipboard operation
user-event copied to clipboard

feat: add option to set element class on hover

Open rChaoz opened this issue 10 months ago • 1 comments

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:

  • [ ] Documentation
  • [ ] Tests
  • [x] Ready to be merged

rChaoz avatar Apr 18 '24 23:04 rChaoz

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.

codesandbox-ci[bot] avatar Apr 18 '24 23:04 codesandbox-ci[bot]