From c2d397878610f47595e1fae3650aa3e38877bd9d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Mon, 25 Mar 2024 05:50:40 +0900 Subject: [PATCH] CustomSelectControlV2: Stabilize tests (#60133) * CustomSelectControlV2: Stabilize tests * Add comments Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla Co-authored-by: aaronrobertshaw --- .../legacy-component/test/index.tsx | 8 ++++++-- .../src/custom-select-control-v2/test/index.tsx | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx index dbb1ac1d784022..906bf1cde02905 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx @@ -388,8 +388,10 @@ describe.each( [ await sleep(); await press.Tab(); expect( currentSelectedItem ).toHaveFocus(); + expect( currentSelectedItem ).toHaveTextContent( 'violets' ); - await type( 'aq' ); + // Ideally we would test a multi-character typeahead, but anything more than a single character is flaky + await type( 'a' ); expect( screen.queryByRole( 'listbox', { @@ -398,8 +400,10 @@ describe.each( [ } ) ).not.toBeInTheDocument(); + // This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser await press.Enter(); - expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' ); + + expect( currentSelectedItem ).toHaveTextContent( 'amber' ); } ); it( 'Should have correct aria-selected value for selections', async () => { diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx index fc8552b7a612a7..52097e4f8bc5bb 100644 --- a/packages/components/src/custom-select-control-v2/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/test/index.tsx @@ -175,8 +175,10 @@ describe.each( [ await sleep(); await press.Tab(); expect( currentSelectedItem ).toHaveFocus(); + expect( currentSelectedItem ).toHaveTextContent( 'violets' ); - await type( 'aq' ); + // Ideally we would test a multi-character typeahead, but anything more than a single character is flaky + await type( 'a' ); expect( screen.queryByRole( 'listbox', { @@ -185,8 +187,10 @@ describe.each( [ } ) ).not.toBeInTheDocument(); + // This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser await press.Enter(); - expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' ); + + expect( currentSelectedItem ).toHaveTextContent( 'amber' ); } ); it( 'Should have correct aria-selected value for selections', async () => {