From b6c209759a54f90533fa5d45e17e85741ab417b2 Mon Sep 17 00:00:00 2001 From: KHeo Date: Thu, 23 Jan 2020 16:30:07 +0900 Subject: [PATCH 1/3] Trimmed inputValue. --- packages/block-editor/src/components/link-control/index.js | 2 +- packages/block-editor/src/components/url-input/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index dcd9c54dbd49d4..acc2ac818e1198 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -501,7 +501,7 @@ function LinkControl( { isURL={ directLinkEntryTypes.includes( suggestion.type.toLowerCase() ) } - searchTerm={ inputValue } + searchTerm={ inputValue.trim() } /> ); } ) } diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index f9c6eeb4b94e66..e0d88d66c40c81 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -214,7 +214,7 @@ class URLInput extends Component { this.props.onChange( inputValue ); if ( ! this.props.disableSuggestions ) { - this.updateSuggestions( inputValue ); + this.updateSuggestions( inputValue.trim() ); } } From ff5016bc1e832b745743090cb11051afda95c10d Mon Sep 17 00:00:00 2001 From: KHeo Date: Wed, 19 Feb 2020 14:12:31 +0900 Subject: [PATCH 2/3] Added unit test. --- .../src/components/link-control/test/index.js | 49 +++++++++++++++++++ .../src/components/url-input/index.js | 2 +- 2 files changed, 50 insertions(+), 1 deletion(-) 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 e244cb495c4d7a..759e1b47a43bb5 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -240,6 +240,55 @@ describe( 'Searching for a link', () => { ); } ); + it( 'should trim search term', async () => { + const searchTerm = ' Hello '; + + act( () => { + render( , container ); + } ); + + // Search Input UI + const searchInput = container.querySelector( + 'input[aria-label="URL"]' + ); + + // Simulate searching for a term + act( () => { + Simulate.change( searchInput, { target: { value: searchTerm } } ); + } ); + + // fetchFauxEntitySuggestions resolves on next "tick" of event loop + await eventLoopTick(); + + const searchResultTextHighlightElements = Array.from( + container.querySelectorAll( + '[role="listbox"] button[role="option"] mark' + ) + ); + + const invalidResults = searchResultTextHighlightElements.find( + ( mark ) => mark.innerHTML !== 'Hello' + ); + + // Grab the first argument that was passed to the fetchSuggestions + // handler (which is mocked out). + const mockFetchSuggestionsFirstArg = + mockFetchSearchSuggestions.mock.calls[ 0 ][ 0 ]; + + // Given we're mocking out the results we should always have 4 mark elements. + expect( searchResultTextHighlightElements ).toHaveLength( 4 ); + + // Make sure there are no `mark` elements which contain anything other + // than the trimmed search term (ie: no whitespace). + expect( invalidResults ).toBeFalsy(); + + // Implementation detail test to ensure that the fetch handler is called + // with the trimmed search value. We do this because we are mocking out + // the fetch handler in our test so we need to assert it would be called + // correctly in a real world scenario. + expect( mockFetchSuggestionsFirstArg ).toEqual( 'Hello' ); + } ); + it.each( [ [ 'couldbeurlorentitysearchterm' ], [ 'ThisCouldAlsoBeAValidURL' ], diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index e0d88d66c40c81..0be1523df6dd4c 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -231,7 +231,7 @@ class URLInput extends Component { ! ( suggestions && suggestions.length ) ) { // Ensure the suggestions are updated with the current input value - this.updateSuggestions( value ); + this.updateSuggestions( value.trim() ); } } From d895cabca251bfde710a0db57fe0b630324c58de Mon Sep 17 00:00:00 2001 From: KHeo Date: Wed, 19 Feb 2020 14:31:53 +0900 Subject: [PATCH 3/3] Trim text in TextHighlight --- .../block-editor/src/components/link-control/index.js | 2 +- packages/components/src/text-highlight/index.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index acc2ac818e1198..dcd9c54dbd49d4 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -501,7 +501,7 @@ function LinkControl( { isURL={ directLinkEntryTypes.includes( suggestion.type.toLowerCase() ) } - searchTerm={ inputValue.trim() } + searchTerm={ inputValue } /> ); } ) } diff --git a/packages/components/src/text-highlight/index.js b/packages/components/src/text-highlight/index.js index f9cbc95ac90424..2335f32132b394 100644 --- a/packages/components/src/text-highlight/index.js +++ b/packages/components/src/text-highlight/index.js @@ -9,11 +9,16 @@ import { escapeRegExp } from 'lodash'; import { __experimentalCreateInterpolateElement } from '@wordpress/element'; const TextHighlight = ( { text = '', highlight = '' } ) => { - if ( ! highlight.trim() ) { + const trimmedHighlightText = highlight.trim(); + + if ( ! trimmedHighlightText ) { return text; } - const regex = new RegExp( `(${ escapeRegExp( highlight ) })`, 'gi' ); + const regex = new RegExp( + `(${ escapeRegExp( trimmedHighlightText ) })`, + 'gi' + ); return __experimentalCreateInterpolateElement( text.replace( regex, '$&' ),