@wordpress/components 23.2.0 → 23.3.0

package/src/unit-control/test/index.tsx

@@ -16,8 +16,6 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
-jest.useFakeTimers();
-
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -87,15 +85,6 @@ const ControlledSyncUnits = () => {
 };
 
 describe( 'UnitControl', () => {
-	beforeEach( () => {
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
 			render( <UnitControl /> );
@@ -147,9 +136,7 @@ describe( 'UnitControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should update value on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '50px';
 			const setState = jest.fn( ( value ) => ( state = value ) );
@@ -169,9 +156,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '50px';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -186,9 +171,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '50px';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -203,9 +186,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -220,9 +201,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -237,9 +216,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -268,9 +245,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
@@ -303,9 +278,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onUnitChangeSpy = jest.fn();
 			const onChangeSpy = jest.fn();
@@ -348,9 +321,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			render(
@@ -384,9 +355,7 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '14rem';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -428,9 +397,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -461,9 +428,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not reset value on unit change, if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
@@ -494,9 +459,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should set correct unit if single units', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state: string | undefined = '50%';
 			const setState: UnitControlOnChangeCallback = ( value ) =>
@@ -518,9 +481,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should update unit value when a new raw value is passed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <ControlledSyncUnits /> );
 
@@ -550,9 +511,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should maintain the chosen non-default unit when value is cleared', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const units = [
 				{ value: 'pt', label: 'pt' },
@@ -571,9 +530,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when the unit select is blurred', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onUnitChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
@@ -604,9 +561,7 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should parse unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -629,9 +584,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse PX unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -654,9 +607,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse EM unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -679,9 +630,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse % unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
@@ -704,9 +653,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse REM unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );

package/src/utils/hooks/test/use-latest-ref.js

@@ -13,8 +13,6 @@ import { useState } from '@wordpress/element';
  */
 import { useLatestRef } from '..';
 
-jest.useFakeTimers();
-
 function debounce( callback, timeout = 0 ) {
 	let timeoutId = 0;
 	return ( ...args ) => {
@@ -47,12 +45,6 @@ function Example() {
 	);
 }
 
-function sleep( milliseconds ) {
-	return new Promise( ( resolve ) =>
-		window.setTimeout( resolve, milliseconds )
-	);
-}
-
 function getCount() {
 	return screen.getByText( /Count:/ ).innerHTML;
 }
@@ -76,47 +68,52 @@ describe( 'useLatestRef', () => {
 		// Prove the example works as expected.
 		it( 'should start at 0', () => {
 			render( <Example /> );
+
 			expect( getCount() ).toEqual( 'Count: 0' );
 		} );
 
 		it( 'should increment immediately', () => {
 			render( <Example /> );
+
 			incrementCount();
+
 			expect( getCount() ).toEqual( 'Count: 1' );
 		} );
 
 		it( 'should increment after debouncing', async () => {
 			render( <Example /> );
+
 			incrementCountDebounced();
-			expect( getCount() ).toEqual( 'Count: 0' );
 
-			await waitFor( () => sleep( 0 ) );
-			expect( getCount() ).toEqual( 'Count: 1' );
+			expect( getCount() ).toEqual( 'Count: 0' );
+			await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
 		} );
 
 		it( 'should increment after debouncing with latest ref', async () => {
 			render( <Example /> );
+
 			incrementCountDebouncedRef();
-			expect( getCount() ).toEqual( 'Count: 0' );
 
-			await waitFor( () => sleep( 0 ) );
-			expect( getCount() ).toEqual( 'Count: 1' );
+			expect( getCount() ).toEqual( 'Count: 0' );
+			await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
 		} );
 	} );
 
 	it( 'should increment to one', async () => {
 		render( <Example /> );
+
 		incrementCountDebounced();
 		incrementCount();
-		await waitFor( () => sleep( 0 ) );
-		expect( getCount() ).toEqual( 'Count: 1' );
+
+		await waitFor( () => expect( getCount() ).toEqual( 'Count: 1' ) );
 	} );
 
 	it( 'should increment to two', async () => {
 		render( <Example /> );
+
 		incrementCountDebouncedRef();
 		incrementCount();
-		await waitFor( () => sleep( 0 ) );
-		expect( getCount() ).toEqual( 'Count: 2' );
+
+		await waitFor( () => expect( getCount() ).toEqual( 'Count: 2' ) );
 	} );
 } );

package/tsconfig.json

@@ -24,6 +24,7 @@
 		{ "path": "../deprecated" },
 		{ "path": "../dom" },
 		{ "path": "../element" },
+		{ "path": "../html-entities" },
 		{ "path": "../hooks" },
 		{ "path": "../icons" },
 		{ "path": "../is-shallow-equal" },
@@ -43,7 +44,6 @@
 		"src/angle-picker-control",
 		"src/autocomplete",
 		"src/box-control",
-		"src/color-list-picker",
 		"src/combobox-control",
 		"src/custom-gradient-picker",
 		"src/dimension-control",
@@ -55,13 +55,10 @@
 		"src/higher-order/with-filters",
 		"src/higher-order/with-focus-return",
 		"src/higher-order/with-notices",
-		"src/keyboard-shortcuts",
 		"src/menu-items-choice",
 		"src/navigation",
-		"src/notice",
 		"src/palette-edit",
 		"src/panel",
-		"src/query-controls",
 		"src/toolbar",
 		"src/tree-grid"
 	]