InputControl: Add tests and update to use @testing-library/user-event

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `InputControl`: Add tests and update to use `@testing-library/user-event` ([#41421](https://github.com/WordPress/gutenberg/pull/41421)).
+
 ## 19.13.0 (2022-06-15)
 
 ### Bug Fix

packages/components/src/input-control/test/index.js

@@ -1,13 +1,24 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BaseInputControl from '../';
 
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
@@ -42,49 +53,66 @@ describe( 'InputControl', () => {
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', () => {
+		it( 'should focus its input on mousedown events', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
 			render( <InputControl type="number" onFocus={ spy } /> );
+			const target = getInput();
 
-			const input = getInput();
-			fireEvent.mouseDown( input );
+			// Hovers the input and presses (without releasing) primary button.
+			await user.pointer( [
+				{ target },
+				{ keys: '[MouseLeft]', target },
+			] );
 
 			expect( spy ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
 	describe( 'Value', () => {
-		it( 'should update value onChange', () => {
+		it( 'should update value onChange', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			render( <InputControl value="Hello" onChange={ spy } /> );
-
+			render(
+				<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
+			);
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 'There' } } );
 
-			expect( input.value ).toBe( 'There' );
-			expect( spy ).toHaveBeenCalledTimes( 1 );
+			await user.type( input, ' there' );
+
+			expect( input ).toHaveValue( 'Hello there' );
+			expect( spy ).toHaveBeenCalledTimes( ' there'.length );
+			expect( spy ).toHaveBeenLastCalledWith( 'Hello there' );
 		} );
 
-		it( 'should work as a controlled component', () => {
+		it( 'should work as a controlled component', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			const { rerender } = render(
-				<InputControl value="one" onChange={ spy } />
-			);
-
+			const Example = () => {
+				const [ state, setState ] = useState( 'one' );
+				const onChange = ( value ) => {
+					setState( value );
+					spy( value );
+				};
+				const onKeyDown = ( { key } ) => {
+					if ( key === 'Escape' ) setState( 'three' );
+				};
+				return (
+					<InputControl
+						value={ state }
+						onChange={ onChange }
+						onKeyDown={ onKeyDown }
+					/>
+				);
+			};
+			render( <Example /> );
 			const input = getInput();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: 'two' } } );
-
-			// Ensuring <InputControl /> is controlled.
-			fireEvent.blur( input );
-
-			// Updating the value.
-			rerender( <InputControl value="three" onChange={ spy } /> );
-
-			expect( input.value ).toBe( 'three' );
+			await user.type( input, '2' );
+			// Make a controlled update.
+			await user.keyboard( '{Escape}' );
 
+			expect( input ).toHaveValue( 'three' );
 			/*
 			 * onChange called only once. onChange is not called when a
 			 * parent component explicitly passed a (new value) change down to
@@ -98,21 +126,68 @@ describe( 'InputControl', () => {
 			const { rerender } = render(
 				<InputControl value="Original" onChange={ spy } />
 			);
-
 			const input = getInput();
 
-			// Assuming <InputControl /> is controlled (not focused)
-
 			// Updating the value.
 			rerender( <InputControl value="New" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'New' );
+			expect( input ).toHaveValue( 'New' );
 
 			// Change it back to the original value.
 			rerender( <InputControl value="Original" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'Original' );
+			expect( input ).toHaveValue( 'Original' );
 			expect( spy ).toHaveBeenCalledTimes( 0 );
 		} );
+
+		it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
+			const user = setupUser();
+			const spy = jest.fn();
+			render(
+				<InputControl
+					value=""
+					onChange={ ( v ) => spy( v ) }
+					isPressEnterToChange
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, 'that was then' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( spy ).toHaveBeenCalledWith( 'that was then' );
+		} );
+
+		it( 'should commit value when blurred if value is invalid', async () => {
+			const user = setupUser();
+			const spyChange = jest.fn();
+			render(
+				<InputControl
+					value="this is"
+					onChange={ ( v ) => spyChange( v ) }
+					// If the value contains 'now' it is not valid.
+					pattern="(?!.*now)^.*$"
+					__unstableStateReducer={ ( state, action ) => {
+						let { value } = state;
+						if (
+							action.type === 'COMMIT' &&
+							action.payload.event.type === 'blur'
+						)
+							value = value.replace( /\bnow\b/, 'meow' );
+
+						return { ...state, value };
+					} }
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, ' now' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spyChange ).toHaveBeenLastCalledWith( 'this is meow' );
+		} );
 	} );
 } );