Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set class on pseudo-states #1210

Open
rChaoz opened this issue Apr 18, 2024 · 0 comments
Open

Set class on pseudo-states #1210

rChaoz opened this issue Apr 18, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@rChaoz
Copy link

rChaoz commented Apr 18, 2024

Problem description

Currently, it is impossible to test hover states with JavaScript. One common solution for this is to use a special class for hovered elements instead of the pseudo-class :hover.

In storybook, there is an addon for this. There's also one (which I use) for postcss, which is great: replaces :hover in CSS with .\:hover, so the hover states is activated with class=":hover" instead of a real hover.

Note that this works with all pseudo-states, not just hover. The issue is that it is difficult to correctly apply the classes manually (and remove them), on actions such as hover, type, etc.

Suggested solution

A configuration option (generally to be used with userEvent.setup()) names pseudoStates with the following form:

type PseudoStates = Record<"hover" | "focus" | ... , {
    // Class to be applied to element when it should be in the pseudo-state
    class?: string
    // Other options, such as for setting a "data-*" attribute instead
}>

Additional context

If you think this is a good idea which fits with testing library, I would be willing to make a PR for this.

@rChaoz rChaoz added enhancement New feature or request needs assessment This needs to be looked at by a team member labels Apr 18, 2024
@ph-fritsche ph-fritsche removed the needs assessment This needs to be looked at by a team member label Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants