Skip to content

Components: Fixed broken className test for NumberControl #69540

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 3 commits into from
Mar 14, 2025
Merged

Components: Fixed broken className test for NumberControl #69540

merged 3 commits into from
Mar 14, 2025

Conversation

im3dabasia
Copy link
Contributor

What?

Fixed the className test for NumberControl component that wasn't actually testing className application.

Discovered while working in this: #36742 (comment)
Related issue: #36742

Why?

The previous test was only checking if the component was visible (toBeVisible()) but not verifying whether the className was actually being applied to the component.

How?

  1. Implemented a proper test that compares two rendered instances (with and without className)
  2. Added specific assertions to verify the className is correctly applied when provided
  3. Ensured the test actually tests what its name suggests

Took inspiration from the UnitControl test:

See how UnitControl tests the classname

gutenberg/packages/components/src/unit-control/test/index.tsx

Lines 101 to 116 in 8aa8c14

it( 'should render custom className', () => {
const { container: withoutClassName } = render( <UnitControl /> );
const { container: withClassName } = render(
<UnitControl className="hello" />
);
expect(
// eslint-disable-next-line testing-library/no-node-access
withoutClassName.querySelector( '.components-unit-control' )
).not.toHaveClass( 'hello' );
expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
withClassName.querySelector( '.components-unit-control' )
).toHaveClass( 'hello' );
} );

Testing Instructions

  1. Run the test suite for the NumberControl component
  2. Verify that all tests pass successfully

To run the tests:

npm run test:unit packages/components/src/number-control/test/

Screenshots or screencast

Screen.Recording.2025-03-12.at.11.07.23.AM.mov

@im3dabasia im3dabasia requested a review from ajitbohra as a code owner March 12, 2025 05:44
@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 12, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Mar 13, 2025
t-hamano
t-hamano reviewed Mar 13, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Nice catch! I suspect you may referenced this code in the UnitControl component.

Similar to the UnitControl component, there is no accessible way to access the wrapper element of the NumberControl component, so I think it's ok to add comments to ignore ESLint rule for now.

  • The change log file needs to be updated. It would be good to add Internal section between Enhancement and Bug Fixes section and add the changelog entry there.
  • Can you rebase this PR so that the E2E tests pass?

@im3dabasia im3dabasia force-pushed the fix/classname-test-number-control branch from 8aa8c14 to 748ed40 Compare March 13, 2025 10:15
@im3dabasia
Copy link
Contributor Author

Hi @t-hamano, Done! Now all the tests pass. We can merge if everything looks good?

@im3dabasia im3dabasia requested a review from t-hamano March 13, 2025 10:47
@im3dabasia
Copy link
Contributor Author

Hey @t-hamano,

I'm just following up on the pull request. Is everything looking good to proceed with the merge?

@t-hamano t-hamano merged commit 1c698f8 into WordPress:trunk Mar 14, 2025
61 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.6 milestone Mar 14, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@im3dabasia @t-hamano @chriszarate
Components: Fixed broken className test for NumberControl (WordPres…
1abac17 
…s#69540)

* fix: className test for number-control

* docs: Update changelog

* docs: Update subheader

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Milestone
Gutenberg 20.6
Development

Successfully merging this pull request may close these issues.
2 participants
@im3dabasia @t-hamano