@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/link-control/test/index.js

@@ -1,18 +1,21 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import {
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+	within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -23,14 +26,6 @@ import {
 	uniqueId,
 } from './fixtures';
 
-// Mock debounce() so that it runs instantly.
-jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
-	debounce: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 const mockFetchSearchSuggestions = jest.fn();
 
 /**
@@ -58,18 +53,6 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 
 jest.useRealTimers();
 
-/**
- * Wait for next tick of event loop. This is required
- * because the `fetchSearchSuggestions` Promise will
- * resolve on the next tick of the event loop (this is
- * inline with the Promise spec). As a result we need to
- * wait on this loop to "tick" before we can expect the UI
- * to have updated.
- */
-function eventLoopTick() {
-	return new Promise( ( resolve ) => setImmediate( resolve ) );
-}
-
 beforeEach( () => {
 	// Setup a DOM element as a render target.
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
@@ -186,8 +169,7 @@ describe( 'Basic rendering', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( searchTerm );
+		await user.type( searchInput, searchTerm );
 
 		expect( screen.queryByText( '://' ) ).not.toBeInTheDocument();
 	} );
@@ -289,6 +271,7 @@ describe( 'Basic rendering', () => {
 		it( 'should show "Unlink" button if a onRemove handler is provided', async () => {
 			const user = userEvent.setup();
 			const mockOnRemove = jest.fn();
+
 			render(
 				<LinkControl
 					value={ { url: 'https://example.com' } }
@@ -314,13 +297,12 @@ describe( 'Searching for a link', () => {
 		const searchTerm = 'Hello';
 
 		let resolver;
-
-		const fauxRequest = () =>
-			new Promise( ( resolve ) => {
-				resolver = resolve;
-			} );
-
-		mockFetchSearchSuggestions.mockImplementation( fauxRequest );
+		mockFetchSearchSuggestions.mockImplementation(
+			() =>
+				new Promise( ( resolve ) => {
+					resolver = resolve;
+				} )
+		);
 
 		render( <LinkControl /> );
 
@@ -328,35 +310,22 @@ describe( 'Searching for a link', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( searchTerm );
+		await user.type( searchInput, searchTerm );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		expect( await screen.findByRole( 'presentation' ) ).toBeVisible();
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 
-		const searchResultsField = screen.queryByRole( 'listbox' );
-
-		let loadingUI = screen.queryByRole( 'presentation' );
-
-		expect( searchResultsField ).not.toBeInTheDocument();
-
-		expect( loadingUI ).toBeVisible();
+		// make the search suggestions fetch return a response
+		resolver( fauxEntitySuggestions );
 
-		act( () => {
-			resolver( fauxEntitySuggestions );
-		} );
-
-		await eventLoopTick();
-
-		loadingUI = screen.queryByRole( 'presentation' );
-
-		expect( loadingUI ).not.toBeInTheDocument();
+		expect( await screen.findByRole( 'listbox' ) ).toBeVisible();
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should display only search suggestions when current input value is not URL-like', async () => {
 		const user = userEvent.setup();
 		const searchTerm = 'Hello world';
-		const firstFauxSuggestion = fauxEntitySuggestions[ 0 ];
+		const firstSuggestion = fauxEntitySuggestions[ 0 ];
 
 		render( <LinkControl /> );
 
@@ -364,14 +333,10 @@ describe( 'Searching for a link', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( searchTerm );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		await user.type( searchInput, searchTerm );
 
 		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
 		).getAllByRole( 'option' );
@@ -382,12 +347,12 @@ describe( 'Searching for a link', () => {
 
 		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		// Sanity check that a search suggestion shows up corresponding to the data.
+		// Check that a search suggestion shows up corresponding to the data.
 		expect( searchResultElements[ 0 ] ).toHaveTextContent(
-			firstFauxSuggestion.title
+			firstSuggestion.title
 		);
 		expect( searchResultElements[ 0 ] ).toHaveTextContent(
-			firstFauxSuggestion.type
+			firstSuggestion.type
 		);
 
 		// The fallback URL suggestion should not be shown when input is not URL-like.
@@ -400,34 +365,37 @@ describe( 'Searching for a link', () => {
 		const user = userEvent.setup();
 		const searchTerm = '   Hello    ';
 
-		const { container } = render( <LinkControl /> );
+		render( <LinkControl /> );
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( searchTerm );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		await user.type( searchInput, searchTerm );
 
-		const searchResultTextHighlightElements = Array.from(
-			container.querySelectorAll(
-				'[role="listbox"] button[role="option"] mark'
-			)
-		);
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		const invalidResults = searchResultTextHighlightElements.find(
-			( mark ) => mark.innerHTML !== 'Hello'
-		);
+		const searchResultTextHighlightElements = within( searchResults )
+			.getAllByRole( 'option' )
+			// TODO: Change to `getByRole( 'mark' )` when officially supported by
+			// WAI-ARIA 1.3 - see https://w3c.github.io/aria/#mark
+			// eslint-disable-next-line testing-library/no-node-access
+			.map( ( searchResult ) => searchResult.querySelector( 'mark' ) )
+			.flat()
+			.filter( Boolean );
 
 		// 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();
+		expect(
+			searchResultTextHighlightElements.every(
+				( mark ) => mark.innerHTML === 'Hello'
+			)
+		).toBe( true );
 
 		// Implementation detail test to ensure that the fetch handler is called
 		// with the trimmed search value. We do this because we are mocking out
@@ -447,14 +415,10 @@ describe( 'Searching for a link', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( 'anything' );
+		await user.type( searchInput, 'anything' );
 
 		const searchResultsField = screen.queryByRole( 'listbox' );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
-
 		expect( searchResultsField ).not.toBeInTheDocument();
 		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 	} );
@@ -472,14 +436,10 @@ describe( 'Searching for a link', () => {
 			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 			// Simulate searching for a term.
-			searchInput.focus();
-			await user.keyboard( searchTerm );
-
-			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-			await eventLoopTick();
+			await user.type( searchInput, searchTerm );
 
 			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
+				await screen.findByRole( 'listbox', {
 					name: /Search results for.*/,
 				} )
 			).getAllByRole( 'option' );
@@ -510,14 +470,10 @@ describe( 'Searching for a link', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( 'couldbeurlorentitysearchterm' );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		await user.type( searchInput, 'couldbeurlorentitysearchterm' );
 
 		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
 		).getAllByRole( 'option' );
@@ -544,14 +500,10 @@ describe( 'Manual link entry', () => {
 			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 			// Simulate searching for a term.
-			searchInput.focus();
-			await user.keyboard( searchTerm );
-
-			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-			await eventLoopTick();
+			await user.type( searchInput, searchTerm );
 
 			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
+				await screen.findByRole( 'listbox', {
 					name: /Search results for.*/,
 				} )
 			).getByRole( 'option' );
@@ -584,29 +536,25 @@ describe( 'Manual link entry', () => {
 					name: 'URL',
 				} );
 
-				let submitButton = screen.queryByRole( 'button', {
+				let submitButton = screen.getByRole( 'button', {
 					name: 'Submit',
 				} );
 
 				expect( submitButton ).toBeDisabled();
 				expect( submitButton ).toBeVisible();
 
-				searchInput.focus();
 				if ( searchString.length ) {
 					// Simulate searching for a term.
-					await user.keyboard( searchString );
+					await user.type( searchInput, searchString );
 				} else {
 					// Simulate clearing the search term.
-					await userEvent.clear( searchInput );
+					await user.clear( searchInput );
 				}
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
-
 				// Attempt to submit the empty search value in the input.
 				await user.keyboard( '[Enter]' );
 
-				submitButton = screen.queryByRole( 'button', {
+				submitButton = screen.getByRole( 'button', {
 					name: 'Submit',
 				} );
 
@@ -637,18 +585,14 @@ describe( 'Manual link entry', () => {
 				expect( submitButton ).toBeVisible();
 
 				// Simulate searching for a term.
-				searchInput.focus();
 				if ( searchString.length ) {
 					// Simulate searching for a term.
-					await user.keyboard( searchString );
+					await user.type( searchInput, searchString );
 				} else {
 					// Simulate clearing the search term.
-					await userEvent.clear( searchInput );
+					await user.clear( searchInput );
 				}
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
-
 				// Attempt to submit the empty search value in the input.
 				await user.click( submitButton );
 
@@ -681,14 +625,10 @@ describe( 'Manual link entry', () => {
 				} );
 
 				// Simulate searching for a term.
-				searchInput.focus();
-				await user.keyboard( searchTerm );
-
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
+				await user.type( searchInput, searchTerm );
 
 				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
+					await screen.findByRole( 'listbox', {
 						name: /Search results for.*/,
 					} )
 				).getByRole( 'option' );
@@ -706,14 +646,10 @@ describe( 'Manual link entry', () => {
 
 describe( 'Default search suggestions', () => {
 	it( 'should display a list of initial search suggestions when there is no search value or suggestions', async () => {
-		const expectedResultsLength = 3; // Set within `LinkControl`.
-
 		render( <LinkControl showInitialSuggestions /> );
 
-		await eventLoopTick();
-
 		expect(
-			screen.queryByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: 'Recently updated',
 			} )
 		).toBeVisible();
@@ -731,24 +667,16 @@ describe( 'Default search suggestions', () => {
 		expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
 
 		// Verify the search results already display the initial suggestions.
-		expect( screen.queryAllByRole( 'option' ) ).toHaveLength(
-			expectedResultsLength
-		);
+		// `LinkControl` internally always limits the number of initial suggestions to 3.
+		expect( screen.queryAllByRole( 'option' ) ).toHaveLength( 3 );
 	} );
 
 	it( 'should not display initial suggestions when input value is present', async () => {
 		const user = userEvent.setup();
 
-		// Render with an initial value an ensure that no initial suggestions
-		// are shown.
-		render(
-			<LinkControl
-				showInitialSuggestions
-				value={ fauxEntitySuggestions[ 0 ] }
-			/>
-		);
-
-		await eventLoopTick();
+		// Render with an initial value an ensure that no initial suggestions are shown.
+		const initialValue = fauxEntitySuggestions[ 0 ];
+		render( <LinkControl showInitialSuggestions value={ initialValue } /> );
 
 		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 
@@ -758,23 +686,21 @@ describe( 'Default search suggestions', () => {
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
 			name: 'Edit',
 		} );
-
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
-		searchInput.focus();
+		// Search input is set to the URL value.
+		expect( searchInput ).toHaveValue( initialValue.url );
 
-		await eventLoopTick();
+		// Focus the search input to display suggestions
+		await user.click( searchInput );
 
 		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
 		).getAllByRole( 'option' );
 
-		// Search input is set to the URL value.
-		expect( searchInput ).toHaveValue( fauxEntitySuggestions[ 0 ].url );
-
 		// It should match any url that's like ?p= and also include a URL option.
 		expect( searchResultElements ).toHaveLength( 5 );
 
@@ -789,63 +715,45 @@ describe( 'Default search suggestions', () => {
 
 		render( <LinkControl showInitialSuggestions /> );
 
-		let searchResultElements;
-		let searchInput;
-
 		// Search Input UI.
-		searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( searchTerm );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		await user.type( searchInput, searchTerm );
 
 		expect( searchInput ).toHaveValue( searchTerm );
 
-		searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
-
-		// Delete the text.
-		await userEvent.clear( searchInput );
+		const searchResultsList = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		await eventLoopTick();
+		expect( searchResultsList ).toBeVisible();
 
-		searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: 'Recently updated',
-			} )
-		).getAllByRole( 'option' );
+		expect(
+			within( searchResultsList ).getAllByRole( 'option' )
+		).toHaveLength( 4 );
 
-		searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		// Delete the text.
+		await userEvent.clear( searchInput );
 
 		// Check the input is empty now.
 		expect( searchInput ).toHaveValue( '' );
 
-		expect(
-			screen.queryByRole( 'listbox', {
-				name: 'Recently updated',
-			} )
-		).toBeVisible();
+		const initialResultsList = await screen.findByRole( 'listbox', {
+			name: 'Recently updated',
+		} );
 
-		expect( searchResultElements ).toHaveLength( 3 );
+		expect(
+			within( initialResultsList ).getAllByRole( 'option' )
+		).toHaveLength( 3 );
 	} );
 
 	it( 'should not display initial suggestions when there are no recently updated pages/posts', async () => {
-		const noResults = [];
 		// Force API returning empty results for recently updated Pages.
-		mockFetchSearchSuggestions.mockImplementation( () =>
-			Promise.resolve( noResults )
-		);
+		mockFetchSearchSuggestions.mockImplementation( async () => [] );
 
 		render( <LinkControl showInitialSuggestions /> );
 
-		await eventLoopTick();
-
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
@@ -876,19 +784,15 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		async ( entityNameText ) => {
 			const user = userEvent.setup();
 			let resolver;
-			let resolvedEntity;
-
 			const createSuggestion = ( title ) =>
 				new Promise( ( resolve ) => {
-					resolver = ( arg ) => {
-						resolve( arg );
-					};
-					resolvedEntity = {
-						title,
-						id: 123,
-						url: '/?p=123',
-						type: 'page',
-					};
+					resolver = () =>
+						resolve( {
+							title,
+							id: 123,
+							url: '/?p=123',
+							type: 'page',
+						} );
 				} );
 
 			const LinkControlConsumer = () => {
@@ -911,16 +815,15 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 			// Simulate searching for a term.
-			searchInput.focus();
-			await user.keyboard( entityNameText );
-
-			await eventLoopTick();
+			await user.type( searchInput, entityNameText );
 
-			const searchResultElements = screen.queryAllByRole( 'option' );
+			const searchResults = await screen.findByRole( 'listbox', {
+				name: /Search results for.*/,
+			} );
 
-			const createButton = Array.from( searchResultElements ).filter(
-				( result ) => result.innerHTML.includes( 'Create:' )
-			)[ 0 ];
+			const createButton = within( searchResults ).getByRole( 'option', {
+				name: /^Create:/,
+			} );
 
 			expect( createButton ).toBeVisible();
 			expect( createButton ).toHaveTextContent( entityNameText );
@@ -929,8 +832,6 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			// resolution manually via the `resolver` reference.
 			await user.click( createButton );
 
-			await eventLoopTick();
-
 			// Check for loading indicator.
 			const loadingIndicator = screen.getByText( 'Creating…' );
 			const currentLinkLabel =
@@ -943,13 +844,11 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			);
 
 			// Resolve the `createSuggestion` promise.
-			await act( async () => {
-				resolver( resolvedEntity );
-			} );
-
-			await eventLoopTick();
+			resolver();
 
-			const currentLink = screen.getByLabelText( 'Currently selected' );
+			const currentLink = await screen.findByLabelText(
+				'Currently selected'
+			);
 
 			expect( currentLink ).toHaveTextContent( entityNameText );
 			expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -983,25 +882,18 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( 'Some new page to create' );
-
-		await eventLoopTick();
+		await user.type( searchInput, 'Some new page to create' );
 
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		const createButton = Array.from( searchResultElements ).filter(
-			( result ) => result.innerHTML.includes( 'Create:' )
-		)[ 0 ];
+		const createButton = within( searchResults ).getByRole( 'option', {
+			name: /^Create:/,
+		} );
 
 		await user.click( createButton );
 
-		await eventLoopTick();
-
 		const currentLink = screen.getByLabelText( 'Currently selected' );
 
 		expect( currentLink ).toHaveTextContent( 'Some new page to create' );
@@ -1039,33 +931,27 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( entityNameText );
+		await user.type( searchInput, entityNameText );
 
-		await eventLoopTick();
-
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
-		const createButton = Array.from( searchResultElements ).filter(
-			( result ) => result.innerHTML.includes( 'Create:' )
-		)[ 0 ];
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		// Step down into the search results, highlighting the first result item.
+		// Step down into the search results, selecting the first result item.
 		triggerArrowDown( searchInput );
 
-		createButton.focus();
-		await user.keyboard( '[Enter]' );
-
-		searchInput.focus();
-		await user.keyboard( '[Enter]' );
+		// Check that the create button is in the results and that it's selected
+		const createButton = within( searchResults ).getByRole( 'option', {
+			name: /^Create:/,
+			selected: true,
+		} );
+		expect( createButton ).toBeVisible();
 
-		await eventLoopTick();
+		expect( searchInput ).toHaveFocus();
+		triggerEnter( searchInput );
 
 		expect(
-			screen.getByLabelText( 'Currently selected' )
+			await screen.findByLabelText( 'Currently selected' )
 		).toHaveTextContent( entityNameText );
 	} );
 
@@ -1088,20 +974,15 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( entityNameText );
+		await user.type( searchInput, entityNameText );
 
-		await eventLoopTick();
-
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		const createButton = Array.from( searchResultElements ).filter(
-			( result ) => result.innerHTML.includes( 'Custom suggestion text' )
-		)[ 0 ];
+		const createButton = within( searchResults ).getByRole( 'option', {
+			name: /Custom suggestion text/,
+		} );
 
 		expect( createButton ).toBeVisible();
 	} );
@@ -1112,9 +993,6 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			async ( handler ) => {
 				render( <LinkControl createSuggestion={ handler } /> );
 
-				// Await the initial suggestions to be fetched.
-				await eventLoopTick();
-
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
 					name: 'URL',
@@ -1128,17 +1006,14 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			}
 		);
 
-		it( 'should not show not show an option to create an entity when input is empty', async () => {
+		it( 'should not show an option to create an entity when input is empty', async () => {
 			render(
 				<LinkControl
-					showInitialSuggestions={ true } // Should show even if we're not showing initial suggestions.
+					showInitialSuggestions // Should show even if we're not showing initial suggestions.
 					createSuggestion={ jest.fn() }
 				/>
 			);
 
-			// Await the initial suggestions to be fetched.
-			await eventLoopTick();
-
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
@@ -1167,22 +1042,17 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				} );
 
 				// Simulate searching for a term.
-				searchInput.focus();
-				await user.keyboard( inputText );
-
-				await eventLoopTick();
-
-				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
-						name: /Search results for.*/,
-					} )
-				).getAllByRole( 'option' );
+				await user.type( searchInput, inputText );
 
-				const createButton = Array.from( searchResultElements ).filter(
-					( result ) => result.innerHTML.includes( 'New page' )
-				)[ 0 ];
+				const searchResults = await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} );
 
-				expect( createButton ).toBeFalsy(); // Shouldn't exist!
+				const createButton = within( searchResults ).queryByRole(
+					'option',
+					{ name: /New page/ }
+				);
+				expect( createButton ).not.toBeInTheDocument(); // Shouldn't exist!
 			}
 		);
 	} );
@@ -1205,24 +1075,18 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 			// Simulate searching for a term.
-			searchInput.focus();
-			await user.keyboard( searchText );
+			await user.type( searchInput, searchText );
 
-			await eventLoopTick();
+			const searchResults = await screen.findByRole( 'listbox', {
+				name: /Search results for.*/,
+			} );
 
-			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
-					name: /Search results for.*/,
-				} )
-			).getAllByRole( 'option' );
-			const createButton = Array.from( searchResultElements ).filter(
-				( result ) => result.innerHTML.includes( 'Create:' )
-			)[ 0 ];
+			const createButton = within( searchResults ).getByRole( 'option', {
+				name: /^Create:/,
+			} );
 
 			await user.click( createButton );
 
-			await eventLoopTick();
-
 			searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 			const errorNotice = screen.getAllByText(
@@ -1234,6 +1098,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Check human readable error notice is perceivable.
 			expect( errorNotice ).toBeVisible();
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( errorNotice.parentElement ).toHaveClass(
 				'block-editor-link-control__search-error'
 			);
@@ -1340,14 +1205,10 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Simulate searching for a term.
-				searchInput.focus();
-				await user.keyboard( searchTerm );
-
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
+				await user.type( searchInput, searchTerm );
 
 				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
+					await screen.findByRole( 'listbox', {
 						name: /Search results for.*/,
 					} )
 				).getAllByRole( 'option' );
@@ -1406,20 +1267,17 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Simulate searching for a term.
-				searchInput.focus();
-				await user.keyboard( searchTerm );
+				await user.type( searchInput, searchTerm );
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
+				const searchResults = await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} );
 
 				// Step down into the search results, highlighting the first result item.
 				triggerArrowDown( searchInput );
 
-				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
-						name: /Search results for.*/,
-					} )
-				).getAllByRole( 'option' );
+				const searchResultElements =
+					within( searchResults ).getAllByRole( 'option' );
 
 				const firstSearchSuggestion = searchResultElements[ 0 ];
 				const secondSearchSuggestion = searchResultElements[ 1 ];
@@ -1429,7 +1287,7 @@ describe( 'Selecting links', () => {
 				} );
 
 				// We should have highlighted the first item using the keyboard.
-				expect( selectedSearchResultElement ).toEqual(
+				expect( selectedSearchResultElement ).toBe(
 					firstSearchSuggestion
 				);
 
@@ -1444,7 +1302,7 @@ describe( 'Selecting links', () => {
 
 					// We should have highlighted the first item using the keyboard
 					// eslint-disable-next-line jest/no-conditional-expect
-					expect( selectedSearchResultElement ).toEqual(
+					expect( selectedSearchResultElement ).toBe(
 						secondSearchSuggestion
 					);
 
@@ -1457,7 +1315,7 @@ describe( 'Selecting links', () => {
 
 					// We should be back to highlighting the first search result again
 					// eslint-disable-next-line jest/no-conditional-expect
-					expect( selectedSearchResultElement ).toEqual(
+					expect( selectedSearchResultElement ).toBe(
 						firstSearchSuggestion
 					);
 				}
@@ -1473,7 +1331,8 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Make sure focus is retained after submission.
-				expect( container ).toContainElement( document.activeElement );
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( container.firstChild ).toHaveFocus();
 
 				expect( currentLink ).toBeVisible();
 				expect(
@@ -1486,10 +1345,8 @@ describe( 'Selecting links', () => {
 		it( 'should allow selection of initial search results via the keyboard', async () => {
 			render( <LinkControl showInitialSuggestions /> );
 
-			await eventLoopTick();
-
 			expect(
-				screen.queryByRole( 'listbox', {
+				await screen.findByRole( 'listbox', {
 					name: 'Recently updated',
 				} )
 			).toBeVisible();
@@ -1500,8 +1357,6 @@ describe( 'Selecting links', () => {
 			// Step down into the search results, highlighting the first result item.
 			triggerArrowDown( searchInput );
 
-			await eventLoopTick();
-
 			const searchResultElements = within(
 				screen.getByRole( 'listbox', {
 					name: 'Recently updated',
@@ -1626,14 +1481,10 @@ describe( 'Post types', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		// Simulate searching for a term.
-		searchInput.focus();
-		await user.keyboard( searchTerm );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		await user.type( searchInput, searchTerm );
 
 		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
 		).getAllByRole( 'option' );
@@ -1657,14 +1508,10 @@ describe( 'Post types', () => {
 			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 			// Simulate searching for a term.
-			searchInput.focus();
-			await user.keyboard( searchTerm );
-
-			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-			await eventLoopTick();
+			await user.type( searchInput, searchTerm );
 
 			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
+				await screen.findByRole( 'listbox', {
 					name: /Search results for.*/,
 				} )
 			).getAllByRole( 'option' );
@@ -1712,11 +1559,6 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
@@ -1738,16 +1580,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-
-		expect( isRichLinkPreview ).toBe( true );
+		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 	} );
 
 	it( 'should not display placeholders for the image and description if neither is available in the data', async () => {
@@ -1762,19 +1597,18 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
+		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
+
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichImagePreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-image'
 		);
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichDescriptionPreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-description'
 		);
@@ -1795,15 +1629,9 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-		expect( isRichLinkPreview ).toBe( true );
+		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
 		const titlePreview = screen.getByText( selectedLink.title );
 
@@ -1824,21 +1652,18 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-		expect( isRichLinkPreview ).toBe( true );
+		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const iconPreview = linkPreview.querySelector(
 			`.block-editor-link-control__search-item-icon`
 		);
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const fallBackIcon = iconPreview.querySelector( 'svg' );
+		// eslint-disable-next-line testing-library/no-node-access
 		const richIcon = iconPreview.querySelector( 'img' );
 
 		expect( fallBackIcon ).toBeVisible();
@@ -1862,17 +1687,13 @@ describe( 'Rich link previews', () => {
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			// mockFetchRichUrlData resolves on next "tick" of event loop.
-			await act( async () => {
-				await eventLoopTick();
-			} );
-
 			const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-			const isRichLinkPreview =
-				linkPreview.classList.contains( 'is-rich' );
-			expect( isRichLinkPreview ).toBe( true );
+			await waitFor( () =>
+				expect( linkPreview ).toHaveClass( 'is-rich' )
+			);
 
+			// eslint-disable-next-line testing-library/no-node-access
 			const missingDataItem = linkPreview.querySelector(
 				`.block-editor-link-control__search-item-${ dataItem }`
 			);
@@ -1887,23 +1708,19 @@ describe( 'Rich link previews', () => {
 	] )(
 		'should not display a rich preview when data is %s',
 		async ( _descriptor, data ) => {
-			mockFetchRichUrlData.mockImplementation( () =>
-				Promise.resolve( data )
-			);
+			mockFetchRichUrlData.mockImplementation( async () => data );
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			// mockFetchRichUrlData resolves on next "tick" of event loop.
-			await act( async () => {
-				await eventLoopTick();
-			} );
-
 			const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-			const isRichLinkPreview =
-				linkPreview.classList.contains( 'is-rich' );
+			expect( linkPreview ).toHaveClass( 'is-fetching' );
 
-			expect( isRichLinkPreview ).toBe( false );
+			await waitFor( () =>
+				expect( linkPreview ).not.toHaveClass( 'is-fetching' )
+			);
+
+			expect( linkPreview ).not.toHaveClass( 'is-rich' );
 		}
 	);
 
@@ -1914,19 +1731,10 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-		const isFetchingRichPreview =
-			linkPreview.classList.contains( 'is-fetching' );
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-
-		expect( isFetchingRichPreview ).toBe( true );
-		expect( isRichLinkPreview ).toBe( false );
+		expect( linkPreview ).toHaveClass( 'is-fetching' );
+		expect( linkPreview ).not.toHaveClass( 'is-rich' );
 	} );
 
 	it( 'should remove fetching UI indicators and fallback to standard preview if request for rich preview results in an error', async () => {
@@ -1936,20 +1744,15 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
-		} );
-
 		const linkPreview = screen.getByLabelText( 'Currently selected' );
 
-		const isFetchingRichPreview =
-			linkPreview.classList.contains( 'is-fetching' );
+		expect( linkPreview ).toHaveClass( 'is-fetching' );
 
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
+		await waitFor( () =>
+			expect( linkPreview ).not.toHaveClass( 'is-fetching' )
+		);
 
-		expect( isFetchingRichPreview ).toBe( false );
-		expect( isRichLinkPreview ).toBe( false );
+		expect( linkPreview ).not.toHaveClass( 'is-rich' );
 	} );
 
 	afterAll( () => {
@@ -2050,8 +1853,7 @@ describe( 'Controlling link title text', () => {
 
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
-		textInput.focus();
-		await userEvent.clear( textInput );
+		await user.clear( textInput );
 		await user.keyboard( textValue );
 
 		expect( textInput ).toHaveValue( textValue );
@@ -2087,8 +1889,7 @@ describe( 'Controlling link title text', () => {
 
 		expect( textInput ).toBeVisible();
 
-		textInput.focus();
-		await userEvent.clear( textInput );
+		await user.clear( textInput );
 		await user.keyboard( textValue );
 
 		// Attempt to submit the empty search value in the input.