@wordpress/components 19.9.0 → 19.10.0

package/src/unit-control/test/{index.js → index.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render as RTLrender, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -12,43 +12,52 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import UnitControl from '../';
+import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
+import type { UnitControlOnChangeCallback } from '../types';
 
-function render( jsx ) {
-	return {
-		user: userEvent.setup( {
-			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
-			delay: null,
-		} ),
-		...RTLrender( jsx ),
-	};
-}
+const user = userEvent.setup( {
+	advanceTimers: jest.advanceTimersByTime,
+} );
 
-const getComponent = () =>
-	document.body.querySelector( '.components-unit-control' );
-const getInput = () =>
-	document.body.querySelector( '.components-unit-control input' );
-const getSelect = () =>
-	document.body.querySelector( '.components-unit-control select' );
-const getUnitLabel = () =>
-	document.body.querySelector( '.components-unit-control__unit-label' );
+const getInput = ( {
+	isInputTypeText = false,
+}: {
+	isInputTypeText?: boolean;
+} = {} ) =>
+	screen.getByRole(
+		isInputTypeText ? 'textbox' : 'spinbutton'
+	) as HTMLInputElement;
+const getSelect = () => screen.getByRole( 'combobox' ) as HTMLSelectElement;
+const getSelectOptions = () =>
+	screen.getAllByRole( 'option' ) as HTMLOptionElement[];
 
 const ControlledSyncUnits = () => {
-	const [ state, setState ] = useState( { valueA: '', valueB: '' } );
+	const [ state, setState ] = useState( {
+		valueA: '',
+		valueB: '',
+	} );
 
 	// Keep the unit sync'd between the two `UnitControl` instances.
-	const onUnitControlChange = ( fieldName, newValue ) => {
-		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-		const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue(
+	const onUnitControlChange = (
+		fieldName: 'valueA' | 'valueB',
+		newValue?: string | number
+	) => {
+		const parsedQuantityAndUnit = parseQuantityAndUnitFromRawValue(
 			newValue
 		);
+		const quantity = parsedQuantityAndUnit[ 0 ];
 
 		if ( ! Number.isFinite( quantity ) ) {
 			return;
 		}
 
-		const nextState = { ...state, [ fieldName ]: newValue };
+		const newUnit = parsedQuantityAndUnit[ 1 ];
+
+		const nextState = {
+			...state,
+			[ fieldName ]: newValue,
+		};
 
 		Object.entries( state ).forEach( ( [ stateProp, stateValue ] ) => {
 			const [
@@ -57,7 +66,9 @@ const ControlledSyncUnits = () => {
 			] = parseQuantityAndUnitFromRawValue( stateValue );
 
 			if ( stateProp !== fieldName && stateUnit !== newUnit ) {
-				nextState[ stateProp ] = `${ stateQuantity }${ newUnit }`;
+				nextState[
+					stateProp as 'valueA' | 'valueB'
+				] = `${ stateQuantity }${ newUnit }`;
 			}
 		} );
 
@@ -81,41 +92,56 @@ const ControlledSyncUnits = () => {
 };
 
 describe( 'UnitControl', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	} );
+
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
 			render( <UnitControl /> );
 			const input = getInput();
 			const select = getSelect();
 
-			expect( input ).toBeTruthy();
-			expect( select ).toBeTruthy();
+			expect( input ).toBeInTheDocument();
+			expect( select ).toBeInTheDocument();
 		} );
 
 		it( 'should render custom className', () => {
-			render( <UnitControl className="hello" /> );
+			const { container: withoutClassName } = render( <UnitControl /> );
 
-			const el = getComponent();
+			const { container: withClassName } = render(
+				<UnitControl className="hello" />
+			);
 
-			expect( el.classList.contains( 'hello' ) ).toBe( true );
+			expect( withoutClassName.firstChild ).toMatchDiffSnapshot(
+				withClassName.firstChild
+			);
 		} );
 
 		it( 'should not render select, if units are disabled', () => {
 			render( <UnitControl value="3em" units={ [] } /> );
 			const input = getInput();
-			const select = getSelect();
+			// Using `queryByRole` instead of `getSelect` because we need to test
+			// for this element NOT to be in the document.
+			const select = screen.queryByRole( 'combobox' );
 
-			expect( input ).toBeTruthy();
-			expect( select ).toBeFalsy();
+			expect( input ).toBeInTheDocument();
+			expect( select ).not.toBeInTheDocument();
 		} );
 
 		it( 'should render label if single units', () => {
 			render( <UnitControl units={ [ { value: '%', label: '%' } ] } /> );
 
-			const select = getSelect();
-			const label = getUnitLabel();
+			const select = screen.queryByRole( 'combobox' );
+			const label = screen.getByText( '%' );
 
-			expect( select ).toBeFalsy();
-			expect( label ).toBeTruthy();
+			expect( select ).not.toBeInTheDocument();
+			expect( label ).toBeInTheDocument();
 		} );
 	} );
 
@@ -124,9 +150,7 @@ describe( 'UnitControl', () => {
 			let state = '50px';
 			const setState = jest.fn( ( value ) => ( state = value ) );
 
-			const { user } = render(
-				<UnitControl value={ state } onChange={ setState } />
-			);
+			render( <UnitControl value={ state } onChange={ setState } /> );
 
 			const input = getInput();
 			await user.clear( input );
@@ -141,12 +165,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP press', async () => {
-			let state = '50px';
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | undefined = '50px';
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
-			const { user } = render(
-				<UnitControl value={ state } onChange={ setState } />
-			);
+			render( <UnitControl value={ state } onChange={ setState } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
@@ -155,12 +178,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
-			let state = '50px';
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | undefined = '50px';
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
-			const { user } = render(
-				<UnitControl value={ state } onChange={ setState } />
-			);
+			render( <UnitControl value={ state } onChange={ setState } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
@@ -169,12 +191,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN press', async () => {
-			let state = 50;
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | number | undefined = 50;
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
-			const { user } = render(
-				<UnitControl value={ state } onChange={ setState } />
-			);
+			render( <UnitControl value={ state } onChange={ setState } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowDown}' );
@@ -183,12 +204,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
-			let state = 50;
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | number | undefined = 50;
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
-			const { user } = render(
-				<UnitControl value={ state } onChange={ setState } />
-			);
+			render( <UnitControl value={ state } onChange={ setState } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowDown}{/Shift}' );
@@ -197,10 +217,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
-			let state = 50;
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | number | undefined = 50;
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
-			const { user } = render(
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -208,95 +229,83 @@ describe( 'UnitControl', () => {
 				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '300px' );
 
 			expect( input.value ).toBe( '300px' );
 			expect( state ).toBe( 50 );
 
-			user.keyboard( '{Escape}' );
+			await user.keyboard( '{Escape}' );
 
 			expect( input.value ).toBe( '50' );
 			expect( state ).toBe( 50 );
 		} );
 
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
-			let state = '33%';
 			const onChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
-			const setState = ( nextState ) => {
+
+			let state: string | undefined = '33%';
+			const setState: UnitControlOnChangeCallback = ( nextState ) => {
 				onChangeSpy( nextState );
 				state = nextState;
 			};
 
-			const { user } = render(
-				<>
-					<button>Click me</button>
-					<UnitControl
-						value={ state }
-						onChange={ setState }
-						onBlur={ onBlurSpy }
-					/>
-				</>
+			render(
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onBlur={ onBlurSpy }
+				/>
 			);
 
 			const input = getInput();
 			await user.clear( input );
 			await user.type( input, '41' );
 
-			await waitFor( () =>
-				expect( onChangeSpy ).toHaveBeenCalledTimes( 3 )
-			);
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41%' );
 
-			// Clicking on the button should cause the `onBlur` callback to fire.
-			const button = screen.getByRole( 'button' );
-			await user.click( button );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
 
-			await waitFor( () =>
-				expect( onBlurSpy ).toHaveBeenCalledTimes( 1 )
-			);
+			expect( onBlurSpy ).toHaveBeenCalledTimes( 1 );
 		} );
 
 		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
-			let state = '15px';
-
 			const onUnitChangeSpy = jest.fn();
 			const onChangeSpy = jest.fn();
 
-			const setState = ( nextState ) => {
+			let state: string | undefined = '15px';
+			const setState: UnitControlOnChangeCallback = ( nextState ) => {
 				onChangeSpy( nextState );
 				state = nextState;
 			};
 
-			const { user } = render(
-				<>
-					<button>Click me</button>
-					<UnitControl
-						value={ state }
-						onChange={ setState }
-						onUnitChange={ onUnitChangeSpy }
-						isPressEnterToChange
-					/>
-				</>
+			render(
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onUnitChange={ onUnitChangeSpy }
+					isPressEnterToChange
+				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '41vh' );
 
 			// This is because `isPressEnterToChange` is `true`
 			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( onUnitChangeSpy ).not.toHaveBeenCalled();
 
-			// Clicking on the button should cause the `onBlur` callback to fire.
-			const button = screen.getByRole( 'button' );
-			await user.click( button );
-
-			await waitFor( () =>
-				expect( onChangeSpy ).toHaveBeenCalledTimes( 1 )
-			);
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
 
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41vh' );
 
 			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
@@ -305,16 +314,47 @@ describe( 'UnitControl', () => {
 				expect.anything()
 			);
 		} );
+
+		it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<>
+					<button>Click me</button>
+					<UnitControl
+						units={ [ { value: '%', label: '%' } ] }
+						onChange={ onChangeSpy }
+					/>
+				</>
+			);
+
+			const input = getInput();
+			await user.type( input, '62' );
+
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'62%',
+				expect.anything()
+			);
+
+			// Start counting again calls to `onChangeSpy`.
+			onChangeSpy.mockClear();
+
+			// Clicking on the button should cause the `onBlur` callback to fire.
+			const button = screen.getByRole( 'button' );
+			await user.click( button );
+
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+		} );
 	} );
 
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
-			let state = '14rem';
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | undefined = '14rem';
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
 			const spy = jest.fn();
 
-			const { user } = render(
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -337,8 +377,7 @@ describe( 'UnitControl', () => {
 
 			render( <UnitControl units={ units } /> );
 
-			const select = getSelect();
-			const options = select.querySelectorAll( 'option' );
+			const options = getSelectOptions();
 
 			expect( options.length ).toBe( 2 );
 
@@ -349,15 +388,16 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
-			let state = 50;
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | number | undefined = 50;
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
 				{ value: 'vmax', label: 'vmax', default: 75 },
 			];
 
-			const { user } = render(
+			render(
 				<UnitControl
 					isResetValueOnUnitChange
 					units={ units }
@@ -377,15 +417,16 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not reset value on unit change, if disabled', async () => {
-			let state = 50;
-			const setState = ( nextState ) => ( state = nextState );
+			let state: string | number | undefined = 50;
+			const setState: UnitControlOnChangeCallback = ( nextState ) =>
+				( state = nextState );
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
 				{ value: 'vmax', label: 'vmax', default: 75 },
 			];
 
-			const { user } = render(
+			render(
 				<UnitControl
 					isResetValueOnUnitChange={ false }
 					value={ state }
@@ -405,10 +446,11 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should set correct unit if single units', async () => {
-			let state = '50%';
-			const setState = ( value ) => ( state = value );
+			let state: string | undefined = '50%';
+			const setState: UnitControlOnChangeCallback = ( value ) =>
+				( state = value );
 
-			const { user } = render(
+			render(
 				<UnitControl
 					value={ state }
 					units={ [ { value: '%', label: '%' } ] }
@@ -420,11 +462,11 @@ describe( 'UnitControl', () => {
 			await user.clear( input );
 			await user.type( input, '62' );
 
-			await waitFor( () => expect( state ).toBe( '62%' ) );
+			expect( state ).toBe( '62%' );
 		} );
 
 		it( 'should update unit value when a new raw value is passed', async () => {
-			const { user } = render( <ControlledSyncUnits /> );
+			render( <ControlledSyncUnits /> );
 
 			const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' );
 			const [ selectA, selectB ] = screen.getAllByRole( 'combobox' );
@@ -442,12 +484,12 @@ describe( 'UnitControl', () => {
 
 			await user.selectOptions( selectA, remOptionA );
 
-			await waitFor( () => expect( selectB ).toHaveValue( 'rem' ) );
+			expect( selectB ).toHaveValue( 'rem' );
 			expect( selectA ).toHaveValue( 'rem' );
 
 			await user.selectOptions( selectB, vwOptionB );
 
-			await waitFor( () => expect( selectA ).toHaveValue( 'vw' ) );
+			expect( selectA ).toHaveValue( 'vw' );
 			expect( selectB ).toHaveValue( 'vw' );
 		} );
 
@@ -457,9 +499,7 @@ describe( 'UnitControl', () => {
 				{ value: 'vmax', label: 'vmax' },
 			];
 
-			const { user } = render(
-				<UnitControl units={ units } value="5" />
-			);
+			render( <UnitControl units={ units } value="5" /> );
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
@@ -474,44 +514,36 @@ describe( 'UnitControl', () => {
 			const onUnitChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
 
-			const { user } = render(
-				<>
-					<button>Click me</button>
-					<UnitControl
-						value="15px"
-						onUnitChange={ onUnitChangeSpy }
-						onBlur={ onBlurSpy }
-					/>
-				</>
+			render(
+				<UnitControl
+					value="15px"
+					onUnitChange={ onUnitChangeSpy }
+					onBlur={ onBlurSpy }
+				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'em' ] );
 
-			await waitFor( () =>
-				expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 )
-			);
+			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
 			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
 				'em',
 				expect.anything()
 			);
 
-			// Clicking on the button should cause the `onBlur` callback to fire.
-			const button = screen.getByRole( 'button' );
-			await user.click( button );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
 
-			await waitFor( () =>
-				expect( onBlurSpy ).toHaveBeenCalledTimes( 1 )
-			);
+			expect( onBlurSpy ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
 	describe( 'Unit Parser', () => {
-		let state = '10px';
-		const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
 		it( 'should parse unit from input', async () => {
-			const { user } = render(
+			let state = '10px';
+			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
+
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -519,16 +551,20 @@ describe( 'UnitControl', () => {
 				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '55 em' );
-			user.keyboard( '{Enter}' );
+			await user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '55em' );
 		} );
 
 		it( 'should parse PX unit from input', async () => {
-			const { user } = render(
+			let state = '10px';
+			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
+
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -536,16 +572,20 @@ describe( 'UnitControl', () => {
 				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '61   PX' );
-			user.keyboard( '{Enter}' );
+			await user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '61px' );
 		} );
 
 		it( 'should parse EM unit from input', async () => {
-			const { user } = render(
+			let state = '10px';
+			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
+
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -553,16 +593,20 @@ describe( 'UnitControl', () => {
 				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '55 em' );
-			user.keyboard( '{Enter}' );
+			await user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '55em' );
 		} );
 
 		it( 'should parse % unit from input', async () => {
-			const { user } = render(
+			let state = '10px';
+			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
+
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -570,16 +614,20 @@ describe( 'UnitControl', () => {
 				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '-10  %' );
-			user.keyboard( '{Enter}' );
+			await user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '-10%' );
 		} );
 
 		it( 'should parse REM unit from input', async () => {
-			const { user } = render(
+			let state = '10px';
+			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
+
+			render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -587,10 +635,11 @@ describe( 'UnitControl', () => {
 				/>
 			);
 
-			const input = getInput();
+			// Input type is `text` when the `isPressEnterToChange` prop is passed
+			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
 			await user.type( input, '123       rEm  ' );
-			user.keyboard( '{Enter}' );
+			await user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '123rem' );
 		} );
@@ -604,7 +653,7 @@ describe( 'UnitControl', () => {
 
 			rerender( <UnitControl value={ '20vh' } /> );
 
-			await waitFor( () => expect( select.value ).toBe( 'vh' ) );
+			expect( select.value ).toBe( 'vh' );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {
@@ -625,7 +674,7 @@ describe( 'UnitControl', () => {
 			);
 
 			const select = getSelect();
-			const options = select.querySelectorAll( 'option' );
+			const options = getSelectOptions();
 
 			expect( select.value ).toBe( '%' );
 			expect( options.length ).toBe( 3 );