From 2d7dae7bb7606c0c5edfb8b2a4dfe81eef7dbba4 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 13 Jul 2023 18:12:59 -0400 Subject: [PATCH 1/7] Add keyboardReturn submit button --- .../src/components/link-control/index.js | 10 ++++++++++ .../src/components/link-control/style.scss | 13 ++++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 4e0a1f2291b02..1cca10b29b062 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -14,6 +14,7 @@ import { ENTER } from '@wordpress/keycodes'; import { isShallowEqualObjects } from '@wordpress/is-shallow-equal'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as preferencesStore } from '@wordpress/preferences'; +import { keyboardReturn } from '@wordpress/icons'; /** * Internal dependencies @@ -388,6 +389,15 @@ function LinkControl( { } hideLabelFromVision={ ! showTextControl } /> +
+
{ errorMessage && ( Date: Fri, 14 Jul 2023 15:22:48 -0400 Subject: [PATCH 2/7] No keyboardReturn on edit Also fixes spinner on the internal url input --- .../src/components/link-control/index.js | 21 +++++++++++-------- .../src/components/link-control/style.scss | 8 ++++++- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 1cca10b29b062..c25ed5cd1187a 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -356,6 +356,7 @@ function LinkControl( { className={ classnames( { 'block-editor-link-control__search-input-wrapper': true, 'has-text-control': showTextControl, + 'has-actions': showActions, } ) } > { showTextControl && ( @@ -389,15 +390,17 @@ function LinkControl( { } hideLabelFromVision={ ! showTextControl } /> -
-
+ { ! showActions && ( +
+
+ ) } { errorMessage && ( Date: Tue, 8 Aug 2023 12:11:14 +0100 Subject: [PATCH 3/7] Remove debug --- .../block-editor/src/components/link-control/test/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index f8e9aedcbd5bd..1efd645c8a4eb 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -766,9 +766,6 @@ describe( 'Manual link entry', () => { name: 'Save', } ); - // debug the UI state - // screen.debug(); - // Verify the submission UI is disabled. expect( submitButton ).toBeVisible(); expect( submitButton ).toHaveAttribute( From 028cd30209654006a12769ff9d4e7b51f97a66be Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 8 Aug 2023 13:05:42 +0100 Subject: [PATCH 4/7] Add test for submit button in link creation --- .../src/components/link-control/test/index.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 1efd645c8a4eb..2f0ff4d099309 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -934,6 +934,33 @@ describe( 'Manual link entry', () => { } ); } ); + + it( 'should show a submit button when creating a link', async () => { + const user = userEvent.setup(); + + const LinkControlConsumer = () => { + const [ link, setLink ] = useState( {} ); + + return ; + }; + + render( ); + + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); + + const submitButton = screen.getByRole( 'button', { + name: 'Submit', + } ); + + expect( submitButton ).toBeVisible(); + expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' ); + + await user.type( searchInput, 'https://wordpress.org' ); + + expect( submitButton ).toHaveAttribute( 'aria-disabled', 'false' ); + } ); } ); describe( 'Default search suggestions', () => { From 535b8510dd51a243426995cc51d313bab20b4abf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 8 Aug 2023 13:11:13 +0100 Subject: [PATCH 5/7] Add test for edit mode buttons --- .../src/components/link-control/test/index.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 2f0ff4d099309..ee48db15fd07f 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -934,7 +934,9 @@ describe( 'Manual link entry', () => { } ); } ); +} ); +describe( 'Link submission', () => { it( 'should show a submit button when creating a link', async () => { const user = userEvent.setup(); @@ -961,6 +963,45 @@ describe( 'Manual link entry', () => { expect( submitButton ).toHaveAttribute( 'aria-disabled', 'false' ); } ); + + it( 'should show a submit button when editing a link', async () => { + const user = userEvent.setup(); + + const LinkControlConsumer = () => { + const [ link, setLink ] = useState( fauxEntitySuggestions[ 0 ] ); + + return ( + + ); + }; + + render( ); + + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); + + const createSubmitButton = screen.queryByRole( 'button', { + name: 'Submit', + } ); + + expect( createSubmitButton ).not.toBeInTheDocument(); + + const editSubmitButton = screen.getByRole( 'button', { + name: 'Save', + } ); + + expect( editSubmitButton ).toBeVisible(); + expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'true' ); + + await user.type( searchInput, '#appendtolinktext' ); + + expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'false' ); + } ); } ); describe( 'Default search suggestions', () => { From 804bd3c06fa1c3e12a00ad5d27593cba0f4e73a2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 8 Aug 2023 13:13:53 +0100 Subject: [PATCH 6/7] Assert that premature submission is not possible via UI --- .../src/components/link-control/test/index.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index ee48db15fd07f..56aeac6b2ee08 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -959,6 +959,12 @@ describe( 'Link submission', () => { expect( submitButton ).toBeVisible(); expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' ); + // Click the button and check it's not possible to prematurely submit the link. + await user.click( submitButton ); + + expect( searchInput ).toBeVisible(); + expect( submitButton ).toBeVisible(); + await user.type( searchInput, 'https://wordpress.org' ); expect( submitButton ).toHaveAttribute( 'aria-disabled', 'false' ); @@ -989,6 +995,7 @@ describe( 'Link submission', () => { name: 'Submit', } ); + // Check the submit button for "creation" of links is not displayed. expect( createSubmitButton ).not.toBeInTheDocument(); const editSubmitButton = screen.getByRole( 'button', { @@ -998,6 +1005,12 @@ describe( 'Link submission', () => { expect( editSubmitButton ).toBeVisible(); expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'true' ); + // Click the button and check it's not possible to prematurely submit the link. + await user.click( editSubmitButton ); + + expect( searchInput ).toBeVisible(); + expect( editSubmitButton ).toBeVisible(); + await user.type( searchInput, '#appendtolinktext' ); expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'false' ); From 9eef0a1f3c6c8cfc4b90d572028e68648f0be643 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 5 Sep 2023 15:51:05 +0100 Subject: [PATCH 7/7] Fix bug in tests --- .../block-editor/src/components/link-control/test/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 56aeac6b2ee08..bce5ca5233192 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -1013,6 +1013,11 @@ describe( 'Link submission', () => { await user.type( searchInput, '#appendtolinktext' ); + // As typing triggers the search handler, we need to wait for the + // search results to be returned. We can use the presence of the + // search results listbox as a proxy for this. + expect( await screen.findByRole( 'listbox' ) ).toBeVisible(); + expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'false' ); } ); } );