-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding support for defined IDs in
TextControl component (#52028)
* Adding support for defined IDs in `TextControl` This patch adds support for custom IDs in the `TextControl` component. Currently any passed ID prop is ignored, and a auto-generated value is used instead. --- Resolves #24749 * Updating tests Changing the test setup for labels to be more `testing-library` idiomatic. * Updating CHANGELOG Adding line item under Enhancements to include `TextControl` changes. * Fixing use of `useInstanceId` Dropping the old `useUniqueId` pattern in favour of the more succinct and complete `useInstanceId` usage.
- Loading branch information
1 parent
d59187f
commit 357afa8
Showing
3 changed files
with
69 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
packages/components/src/text-control/test/text-control.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TextControl from '..'; | ||
|
|
||
| const noop = () => {}; | ||
|
|
||
| describe( 'TextControl', () => { | ||
| describe( 'When no ID prop is provided', () => { | ||
| it( 'should generate an ID', () => { | ||
| render( <TextControl onChange={ noop } value="" /> ); | ||
|
|
||
| expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( | ||
| 'id', | ||
| expect.stringMatching( /^inspector-text-control-/ ) | ||
| ); | ||
| } ); | ||
|
|
||
| it( 'should be labelled correctly', () => { | ||
| const labelValue = 'Test Label'; | ||
| render( | ||
| <TextControl label={ labelValue } onChange={ noop } value="" /> | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByRole( 'textbox', { name: labelValue } ) | ||
| ).toBeVisible(); | ||
| } ); | ||
| } ); | ||
|
|
||
| describe( 'When an ID prop is provided', () => { | ||
| const id = 'test-id'; | ||
|
|
||
| it( 'should use the passed ID prop if provided', () => { | ||
| render( <TextControl id={ id } onChange={ noop } value="" /> ); | ||
|
|
||
| expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'id', id ); | ||
| } ); | ||
|
|
||
| it( 'should be labelled correctly', () => { | ||
| const labelValue = 'Test Label'; | ||
| render( | ||
| <TextControl | ||
| label={ labelValue } | ||
| id={ id } | ||
| onChange={ noop } | ||
| value="" | ||
| /> | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByRole( 'textbox', { name: labelValue } ) | ||
| ).toBeVisible(); | ||
| } ); | ||
| } ); | ||
| } ); |