casesandberg / casesandberg/react-color

Make Unit Testing Easier

Open
#900 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
920
PR merge metrics
No merged PRs in 30d

Description

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.

`

`

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.

`

`

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

Contributor guide

Open the contributing guide

Research direction

Start by locating the React-color Chrome Picker component and its existing tests, then inspect how the mode control, color inputs, and gradient box are rendered. Add stable testing targets or prop-driven control as appropriate, and add tests showing that the mode and color-selection interactions can be exercised without relying on inline styles.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing-qa
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.