-
Notifications
You must be signed in to change notification settings - Fork 905
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
Make Unit Testing Easier #900
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm writing some unit tests for a component that uses the React-color Chrome Picker component and I've found it particularly difficult to test because there are no easily targetable elements on the various inputs and also no way to set these via props.
For example, the up and down arrow that you can click to change input type from "hex" to "RBG" to "HSL" doesn't have anything you can target in testing to change the mode. Nor does the component have a prop for setting the input type.
<div style="width: 32px; text-align: right; position: relative;"><div style="margin-right: -4px; margin-top: 12px; cursor: pointer; position: relative;"><svg viewBox="0 0 24 24" style="fill: rgb(51, 51, 51); width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px; background: transparent;"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"></path></svg></div></div>
Another example, the gradient box where you can click to select a colour has no data-testid or id attributes, role or label to target it with during testing.
<div style="width: 100%;padding-bottom: 55%;position: relative;border-radius: 2px 2px 0px 0px;overflow: hidden;"><div style="position: absolute; inset: 0px; background: rgb(0, 255, 128);"><div style="position: absolute; inset: 0px; background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));"><div style="position: absolute; inset: 0px; background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));"></div><div style="position: absolute; top: 100%; left: 0%; cursor: default;"><div style="width: 12px; height: 12px; border-radius: 6px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; transform: translate(-6px, -6px);"></div></div></div></div></div>
It would be really nice if these could be set or allow us to set them via props so we can easily test this component
The text was updated successfully, but these errors were encountered: