Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LinkControl unit tests: use user.type to type into search field #45802

Merged
merged 1 commit into from
Nov 17, 2022
Merged

LinkControl unit tests: use user.type to type into search field #45802

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 31 additions & 57 deletions packages/block-editor/src/components/link-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,8 +186,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();
} );
Expand Down Expand Up @@ -328,8 +327,7 @@ 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();
Expand Down Expand Up @@ -364,8 +362,7 @@ 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();
Expand Down Expand Up @@ -406,8 +403,7 @@ 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();
Expand Down Expand Up @@ -447,8 +443,7 @@ 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' );

Expand All @@ -472,8 +467,7 @@ 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();
Expand Down Expand Up @@ -510,8 +504,7 @@ describe( 'Searching for a link', () => {
const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );

// Simulate searching for a term.
searchInput.focus();
await user.keyboard( 'couldbeurlorentitysearchterm' );
await user.type( searchInput, 'couldbeurlorentitysearchterm' );

// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
await eventLoopTick();
Expand Down Expand Up @@ -544,8 +537,7 @@ describe( 'Manual link entry', () => {
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();
Expand Down Expand Up @@ -591,13 +583,12 @@ describe( 'Manual link entry', () => {
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.
Expand Down Expand Up @@ -637,13 +628,12 @@ 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.
Expand Down Expand Up @@ -681,8 +671,7 @@ describe( 'Manual link entry', () => {
} );

// 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();
Expand Down Expand Up @@ -796,8 +785,7 @@ describe( 'Default search suggestions', () => {
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();
Expand Down Expand Up @@ -911,8 +899,7 @@ 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();

Expand Down Expand Up @@ -983,8 +970,7 @@ 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 user.type( searchInput, 'Some new page to create' );

await eventLoopTick();

Expand Down Expand Up @@ -1039,8 +1025,7 @@ 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();

Expand All @@ -1049,18 +1034,16 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
name: /Search results for.*/,
} )
).getAllByRole( 'option' );
const createButton = Array.from( searchResultElements ).filter(
( result ) => result.innerHTML.includes( 'Create:' )
)[ 0 ];
const createButton = searchResultElements.find( ( result ) =>
result.innerHTML.includes( 'Create:' )
);

// Step down into the search results, highlighting the first result item.
triggerArrowDown( searchInput );

createButton.focus();
await user.keyboard( '[Enter]' );
await user.click( createButton );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The description for this test mentions creating entities via keyboard but here we're using a mouse event. As per your PR description it's clear to me why but it may be worth a comment so devs coming here in the future easily understand, too. What do you think?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes, this should be fixed. But when I tried, it becomes a complex task. Let's do it in another PR: this one was supposed to be a search-and-replace easy fix.

There's one occurrence of searchInput.focus() left on line 754, shall we use the opportunity to wrap it in act?

Yes, but later, for the same reasons.


searchInput.focus();
await user.keyboard( '[Enter]' );
await user.type( searchInput, '[Enter]' );

await eventLoopTick();

Expand Down Expand Up @@ -1088,8 +1071,7 @@ 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();

Expand Down Expand Up @@ -1167,8 +1149,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
} );

// Simulate searching for a term.
searchInput.focus();
await user.keyboard( inputText );
await user.type( searchInput, inputText );

await eventLoopTick();

Expand Down Expand Up @@ -1205,8 +1186,7 @@ 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();

Expand Down Expand Up @@ -1340,8 +1320,7 @@ 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();
Expand Down Expand Up @@ -1406,8 +1385,7 @@ 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();
Expand Down Expand Up @@ -1626,8 +1604,7 @@ describe( 'Post types', () => {
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();
Expand Down Expand Up @@ -1657,8 +1634,7 @@ describe( 'Post types', () => {
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();
Expand Down Expand Up @@ -2050,8 +2026,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 );
Expand Down Expand Up @@ -2087,8 +2062,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.
Expand Down