Add unit tests to V1 and V2 legacy wrapper

WordPress · Jun 27, 2024 · 5321e8e · 5321e8e
1 parent 6634310
commit 5321e8e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 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
@@ -558,6 +558,28 @@ describe.each( [
 			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
 		} );
 
+		it( 'Can change selection with a focused input and closed dropdown while pressing arrow keys', async () => {
+			render( <Component { ...legacyProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent(
+				legacyProps.options[ 0 ].name
+			);
+
+			await press.ArrowDown();
+			await press.ArrowDown();
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+
+			expect( currentSelectedItem ).toHaveTextContent(
+				legacyProps.options[ 2 ].name
+			);
+		} );
+
 		it( 'Should have correct aria-selected value for selections', async () => {
 			render( <Component { ...legacyProps } /> );
 

diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js
@@ -542,6 +542,30 @@ describe.each( [
 			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
 		} );
 
+		it( 'Can change selection with a focused input and closed dropdown while pressing arrow keys', async () => {
+			const user = userEvent.setup();
+
+			render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'button', {
+				expanded: false,
+			} );
+
+			await user.tab();
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 0 ].name
+			);
+
+			await user.keyboard( '{arrowdown}' );
+			await user.keyboard( '{arrowdown}' );
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 2 ].name
+			);
+		} );
+
 		it( 'Should have correct aria-selected value for selections', async () => {
 			const user = userEvent.setup();