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

Components: update ColorPicker unit tests #49698

Merged
merged 10 commits into from
Apr 18, 2023
Merged

Conversation

chad1008
Copy link
Contributor

What?

Updates ColorPicker's unit tests to provide more meaningful feedback, and replace fireEvent with userEvent.

Why?

The existing tests attempted to manipulate the two-dimensional color picker, and would check to see if onChange was fired with a hex or a hex8.

While attempting to migrate these tests from fireEvent to userEvent I found that while they might fire with the right format, it was never actually the correct color. It was always #000000, optionally with two more digits for the alpha value. Chatting with @ciampo and @jsnajdr revealed that this is due to JSDOM not rendering layout, so moving slider handle between coordinates isn't actually possible.

If I recall correctly, this led to a fun bug where trying to slide a slider resulted in effectively toggling it between 0 and infinity... strangeness ensued and long story longer, the existing tests weren't actually functioning as they appeared to be.

The new/updated tests aim to focus on the inputs our unit tests can get accurate data from.

How?

The individual inputs for hex, rgb, and hsl inputs are all tested independently. The existing test for legacy props (which uses a different internal format for color values and different callback when the value changes) has been updated as well.

I had initially hoped to also test the inputs as a group (e.g. updating all three rgb values and confirming the correct color was called) but this didn't prove possible. When updating the second or third value, the previous value(s) always reset to zero. I suspect this is happening due to the physical slider being updated to match the value entered by the test, which fails because of the no-layout issue I've described above.

Followup

I'd like to add another test for the Copy button, but I wasn't quite sure how to properly mock it. Rather than delay this PR, I'll put this on a list to come back to later.

Testing Instructions

Confirm unit tests pass

@chad1008 chad1008 added [Package] Components /packages/components [Feature] Component System WordPress component system labels Apr 10, 2023
@chad1008 chad1008 requested review from mirka and ciampo April 10, 2023 20:23
@chad1008 chad1008 requested a review from ajitbohra as a code owner April 10, 2023 20:23
@chad1008 chad1008 self-assigned this Apr 10, 2023
@chad1008 chad1008 force-pushed the ColorPicker-rework-unit-tests branch from 4c3f148 to 9fd4841 Compare April 13, 2023 15:20
Copy link
Member

@jsnajdr jsnajdr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have one more suggestion for improving a color picker query. Otherwise this looks good 👍 Thanks for addressing all feedback.

packages/components/src/color-picker/test/index.tsx Outdated Show resolved Hide resolved
@chad1008 chad1008 enabled auto-merge (squash) April 18, 2023 13:14
@chad1008 chad1008 merged commit 323094c into trunk Apr 18, 2023
@chad1008 chad1008 deleted the ColorPicker-rework-unit-tests branch April 18, 2023 13:41
@github-actions github-actions bot added this to the Gutenberg 15.7 milestone Apr 18, 2023
@bph bph added [Type] Build Tooling Issues or PRs related to build tooling [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. and removed [Type] Build Tooling Issues or PRs related to build tooling labels Apr 26, 2023
@bph bph removed the [Feature] Component System WordPress component system label Apr 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants