-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add clear Apply and Cancel buttons to Link Control (#46933)
* Add initial Apply and Cancel buttons and refactor styles * Add improved cancellation logic * Update tests * Add unit tests for Cancellation * Fix Media flow tests * Add ability to supply callback to be triggered on cancelling * Fix input padding and spinner positioning * Add test coverage to check optional onCancel is not called if undefined * Update button text string in e2e test * Fix tab stops in test * Don't propgate the click back to the parent blocks * Fix more tab stops in tests * Fix another test tab stops * Fix snapshot missing open in new tab attributes * reset the URL to undefined rather than an empty string so that the popover doesn't reopen * Ensure correctly resetting all “link” attributes to true default state Co-authored-by: Ben Dwyer <[email protected]>
- Loading branch information
Showing
8 changed files
with
205 additions
and
49 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
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 |
|---|---|---|
|
|
@@ -537,7 +537,7 @@ describe( 'Manual link entry', () => { | |
| } ); | ||
|
|
||
| let submitButton = screen.getByRole( 'button', { | ||
| name: 'Submit', | ||
| name: 'Apply', | ||
| } ); | ||
|
|
||
| expect( submitButton ).toBeDisabled(); | ||
|
|
@@ -555,7 +555,7 @@ describe( 'Manual link entry', () => { | |
| await user.keyboard( '[Enter]' ); | ||
|
|
||
| submitButton = screen.getByRole( 'button', { | ||
| name: 'Submit', | ||
| name: 'Apply', | ||
| } ); | ||
|
|
||
| // Verify the UI hasn't allowed submission. | ||
|
|
@@ -578,7 +578,7 @@ describe( 'Manual link entry', () => { | |
| } ); | ||
|
|
||
| let submitButton = screen.queryByRole( 'button', { | ||
| name: 'Submit', | ||
| name: 'Apply', | ||
| } ); | ||
|
|
||
| expect( submitButton ).toBeDisabled(); | ||
|
|
@@ -597,7 +597,7 @@ describe( 'Manual link entry', () => { | |
| await user.click( submitButton ); | ||
|
|
||
| submitButton = screen.queryByRole( 'button', { | ||
| name: 'Submit', | ||
| name: 'Apply', | ||
| } ); | ||
|
|
||
| // Verify the UI hasn't allowed submission. | ||
|
|
@@ -608,6 +608,135 @@ describe( 'Manual link entry', () => { | |
| ); | ||
| } ); | ||
|
|
||
| describe( 'Handling cancellation', () => { | ||
| it( 'should allow cancellation of the link creation process and reset any entered values', async () => { | ||
| const user = userEvent.setup(); | ||
| const mockOnRemove = jest.fn(); | ||
| const mockOnCancel = jest.fn(); | ||
|
|
||
| render( <LinkControl onRemove={ mockOnRemove } /> ); | ||
|
|
||
| // Search Input UI. | ||
| const searchInput = screen.getByRole( 'combobox', { | ||
| name: 'URL', | ||
| } ); | ||
|
|
||
| const cancelButton = screen.queryByRole( 'button', { | ||
| name: 'Cancel', | ||
| } ); | ||
|
|
||
| expect( cancelButton ).toBeEnabled(); | ||
| expect( cancelButton ).toBeVisible(); | ||
|
|
||
| // Simulate adding a link for a term. | ||
| await user.type( searchInput, 'https://www.wordpress.org' ); | ||
|
|
||
| // Attempt to submit the empty search value in the input. | ||
| await user.click( cancelButton ); | ||
|
|
||
| // Verify the consumer can handle the cancellation. | ||
| expect( mockOnRemove ).toHaveBeenCalled(); | ||
|
|
||
| // Ensure optional callback is not called. | ||
| expect( mockOnCancel ).not.toHaveBeenCalled(); | ||
|
|
||
| expect( searchInput ).toHaveValue( '' ); | ||
| } ); | ||
|
|
||
| it( 'should allow cancellation of the link editing process and reset any entered values', async () => { | ||
| const user = userEvent.setup(); | ||
| const initialLink = fauxEntitySuggestions[ 0 ]; | ||
|
|
||
| const LinkControlConsumer = () => { | ||
| const [ link, setLink ] = useState( initialLink ); | ||
|
|
||
| return ( | ||
| <LinkControl | ||
| value={ link } | ||
| onChange={ ( suggestion ) => { | ||
| setLink( suggestion ); | ||
| } } | ||
| hasTextControl | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| render( <LinkControlConsumer /> ); | ||
|
|
||
| let linkPreview = screen.getByLabelText( 'Currently selected' ); | ||
|
|
||
| expect( linkPreview ).toBeInTheDocument(); | ||
|
|
||
| // Click the "Edit" button to trigger into the editing mode. | ||
| let editButton = screen.queryByRole( 'button', { | ||
| name: 'Edit', | ||
| } ); | ||
|
|
||
| await user.click( editButton ); | ||
|
|
||
| let searchInput = screen.getByRole( 'combobox', { | ||
| name: 'URL', | ||
| } ); | ||
|
|
||
| let textInput = screen.getByRole( 'textbox', { | ||
| name: 'Text', | ||
| } ); | ||
|
|
||
| // Make a change to the search input. | ||
| await user.type( searchInput, 'This URL value was changed!' ); | ||
|
|
||
| // Make a change to the text input. | ||
| await user.type( textInput, 'This text value was changed!' ); | ||
|
|
||
| const cancelButton = screen.queryByRole( 'button', { | ||
| name: 'Cancel', | ||
| } ); | ||
|
|
||
| // Cancel the editing process. | ||
| await user.click( cancelButton ); | ||
|
|
||
| linkPreview = screen.getByLabelText( 'Currently selected' ); | ||
|
|
||
| expect( linkPreview ).toBeInTheDocument(); | ||
|
|
||
| // Re-query the edit button as it's been replaced. | ||
| editButton = screen.queryByRole( 'button', { | ||
| name: 'Edit', | ||
| } ); | ||
|
|
||
| await user.click( editButton ); | ||
|
|
||
| // Re-query the inputs as they have been replaced. | ||
| searchInput = screen.getByRole( 'combobox', { | ||
| name: 'URL', | ||
| } ); | ||
|
|
||
| textInput = screen.getByRole( 'textbox', { | ||
| name: 'Text', | ||
| } ); | ||
|
|
||
| // Expect to see the original link values and **not** the changed values. | ||
| expect( searchInput ).toHaveValue( initialLink.url ); | ||
| expect( textInput ).toHaveValue( initialLink.text ); | ||
| } ); | ||
|
|
||
| it( 'should call onCancel callback when cancelling if provided', async () => { | ||
| const user = userEvent.setup(); | ||
| const mockOnCancel = jest.fn(); | ||
|
|
||
| render( <LinkControl onCancel={ mockOnCancel } /> ); | ||
|
|
||
| const cancelButton = screen.queryByRole( 'button', { | ||
| name: 'Cancel', | ||
| } ); | ||
|
|
||
| await user.click( cancelButton ); | ||
|
|
||
| // Verify the consumer can handle the cancellation. | ||
| expect( mockOnCancel ).toHaveBeenCalled(); | ||
| } ); | ||
| } ); | ||
|
|
||
| describe( 'Alternative link protocols and formats', () => { | ||
| it.each( [ | ||
| [ 'mailto:[email protected]', 'mailto' ], | ||
|
|
@@ -1859,7 +1988,7 @@ describe( 'Controlling link title text', () => { | |
| expect( textInput ).toHaveValue( textValue ); | ||
|
|
||
| const submitButton = screen.queryByRole( 'button', { | ||
| name: 'Submit', | ||
| name: 'Apply', | ||
| } ); | ||
|
|
||
| await user.click( submitButton ); | ||
|
|
||
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
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
Oops, something went wrong.
875628fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in 875628f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3955960072
📝 Reported issues:
specs/editor/various/block-editor-keyboard-shortcuts.test.js