Don't show protocol on suggestions in navigation (#20350)

* Add test. * Remove protocol.
WordPress · May 18, 2020 · 31bb9a6 · 31bb9a6
1 parent 4fd5ba0
commit 31bb9a6
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { safeDecodeURI } from '@wordpress/url';
+import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 import { Button, TextHighlight } from '@wordpress/components';
 import { Icon, globe } from '@wordpress/icons';
@@ -46,7 +46,11 @@ export const LinkControlSearchItem = ( {
 					aria-hidden={ ! isURL }
 					className="block-editor-link-control__search-item-info"
 				>
-					{ ! isURL && ( safeDecodeURI( suggestion.url ) || '' ) }
+					{ ! isURL &&
+						( filterURLForDisplay(
+							safeDecodeURI( suggestion.url )
+						) ||
+							'' ) }
 					{ isURL && __( 'Press ENTER to add this link' ) }
 				</span>
 			</span>

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
@@ -3,7 +3,7 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
-import { first, last, nth } from 'lodash';
+import { first, last, nth, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -85,6 +85,56 @@ describe( 'Basic rendering', () => {
 		expect( container.innerHTML ).toMatchSnapshot();
 	} );
 
+	it( 'should not render protocol in links', async () => {
+		mockFetchSearchSuggestions.mockImplementation( () =>
+			Promise.resolve( [
+				{
+					id: uniqueId(),
+					title: 'Hello Page',
+					type: 'Page',
+					info: '2 days ago',
+					url: `http://example.com/?p=${ uniqueId() }`,
+				},
+				{
+					id: uniqueId(),
+					title: 'Hello Post',
+					type: 'Post',
+					info: '19 days ago',
+					url: `https://example.com/${ uniqueId() }`,
+				},
+			] )
+		);
+
+		const searchTerm = 'Hello';
+
+		act( () => {
+			render( <LinkControl />, container );
+		} );
+
+		// Search Input UI
+		const searchInput = getURLInput();
+
+		// Simulate searching for a term
+		act( () => {
+			Simulate.change( searchInput, { target: { value: searchTerm } } );
+		} );
+
+		// fetchFauxEntitySuggestions resolves on next "tick" of event loop
+		await eventLoopTick();
+
+		// Find all elements with link
+		// Filter out the element with the text 'ENTER' because it doesn't contain link
+		const linkElements = Array.from(
+			container.querySelectorAll(
+				'.block-editor-link-control__search-item-info'
+			)
+		).filter( ( elem ) => ! elem.innerHTML.includes( 'ENTER' ) );
+
+		linkElements.forEach( ( elem ) => {
+			expect( elem.innerHTML ).not.toContain( '://' );
+		} );
+	} );
+
 	describe( 'forceIsEditingLink', () => {
 		const isEditing = () => !! getURLInput();