Components: add unit test __experimentalExpandOnFocus unit tests fo…

…r `FormTokenField` (#57122) * add unit test * add tests for suggestion visibility after selection
WordPress · Jan 4, 2024 · ac57369 · ac57369
1 parent f9f33ce
commit ac57369
Showing 1 changed file with 97 additions and 0 deletions.
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
@@ -741,6 +741,103 @@ describe( 'FormTokenField', () => {
 			] );
 		} );
 
+		it( 'should render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+						__experimentalExpandOnFocus
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+		} );
+
+		it( 'should not render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `false` or not defined', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not render suggestions after the input is blurred', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			// Click the body, blurring the input.
+			await user.click( document.body );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
 		it( 'should not render suggestions if the text input is not matching any of the suggestions', async () => {
 			const user = userEvent.setup();