@wordpress/compose 5.17.0 → 5.18.0

package/src/higher-order/with-state/test/index.js

@@ -1,31 +1,19 @@
 /**
  * External dependencies
  */
-import TestUtils from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import withState from '../';
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-// This is needed because TestUtils does not accept a stateless component.
-// anything run through a HOC ends up as a stateless component.
-const getTestComponent = ( WrappedComponent ) => {
-	class TestComponent extends Component {
-		render() {
-			return <WrappedComponent { ...this.props } />;
-		}
-	}
-	return <TestComponent />;
-};
-
 describe( 'withState', () => {
-	it( 'should pass initial state and allow updates', () => {
+	it( 'should pass initial state and allow updates', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const EnhancedComponent = withState( {
 			count: 0,
 		} )( ( { count, setState } ) => (
@@ -38,16 +26,15 @@ describe( 'withState', () => {
 			</button>
 		) );
 
-		const wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent )
-		);
+		render( <EnhancedComponent /> );
 
-		const buttonElement = () =>
-			TestUtils.findRenderedDOMComponentWithTag( wrapper, 'button' );
+		const button = screen.getByRole( 'button' );
 
 		expect( console ).toHaveWarned();
-		expect( buttonElement().outerHTML ).toBe( '<button>0</button>' );
-		TestUtils.Simulate.click( buttonElement() );
-		expect( buttonElement().outerHTML ).toBe( '<button>1</button>' );
+		expect( button ).toHaveTextContent( '0' );
+
+		await user.click( button );
+
+		expect( button ).toHaveTextContent( '1' );
 	} );
 } );

package/src/hooks/use-disabled/index.ts

@@ -0,0 +1,81 @@
+/**
+ * Internal dependencies
+ */
+import { debounce } from '../../utils/debounce';
+import useRefEffect from '../use-ref-effect';
+
+/**
+ * In some circumstances, such as block previews, all focusable DOM elements
+ * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
+ * behavior to disable nested DOM elements to the returned ref.
+ *
+ * If you can, prefer the use of the inert HTML attribute.
+ *
+ * @param {Object}   config            Configuration object.
+ * @param {boolean=} config.isDisabled Whether the element should be disabled.
+ * @return {import('react').RefCallback<HTMLElement>} Element Ref.
+ *
+ * @example
+ * ```js
+ * import { useDisabled } from '@wordpress/compose';
+ *
+ * const DisabledExample = () => {
+ * 	const disabledRef = useDisabled();
+ *	return (
+ *		<div ref={ disabledRef }>
+ *			<a href="#">This link will have tabindex set to -1</a>
+ *			<input placeholder="This input will have the disabled attribute added to it." type="text" />
+ *		</div>
+ *	);
+ * };
+ * ```
+ */
+export default function useDisabled( {
+	isDisabled: isDisabledProp = false,
+} = {} ) {
+	return useRefEffect(
+		( node ) => {
+			if ( isDisabledProp ) {
+				return;
+			}
+
+			/** A variable keeping track of the previous updates in order to restore them. */
+			const updates: Function[] = [];
+			const disable = () => {
+				node.childNodes.forEach( ( child ) => {
+					if ( ! ( child instanceof HTMLElement ) ) {
+						return;
+					}
+					if ( ! child.getAttribute( 'inert' ) ) {
+						child.setAttribute( 'inert', 'true' );
+						updates.push( () => {
+							child.removeAttribute( 'inert' );
+						} );
+					}
+				} );
+			};
+
+			// Debounce re-disable since disabling process itself will incur
+			// additional mutations which should be ignored.
+			const debouncedDisable = debounce( disable, 0, {
+				leading: true,
+			} );
+			disable();
+
+			/** @type {MutationObserver | undefined} */
+			const observer = new window.MutationObserver( debouncedDisable );
+			observer.observe( node, {
+				childList: true,
+			} );
+
+			return () => {
+				if ( observer ) {
+					observer.disconnect();
+				}
+				debouncedDisable.cancel();
+				updates.forEach( ( update ) => update() );
+			};
+		},
+		[ isDisabledProp ]
+	);
+}

package/src/hooks/use-disabled/test/index.js

@@ -13,36 +13,6 @@ import { forwardRef } from '@wordpress/element';
  */
 import useDisabled from '../';
 
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../../dom/src' ).focus;
-
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-									configurable: true,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( ...arguments );
-				},
-			},
-		},
-	};
-} );
-
 jest.useRealTimers();
 
 describe( 'useDisabled', () => {
@@ -69,11 +39,9 @@ describe( 'useDisabled', () => {
 		const link = screen.getByRole( 'link' );
 		const p = container.querySelector( 'p' );
 
-		expect( input.hasAttribute( 'disabled' ) ).toBe( true );
-		expect( link.getAttribute( 'tabindex' ) ).toBe( '-1' );
-		expect( p.getAttribute( 'contenteditable' ) ).toBe( 'false' );
-		expect( p.hasAttribute( 'tabindex' ) ).toBe( false );
-		expect( p.hasAttribute( 'disabled' ) ).toBe( false );
+		expect( input ).toHaveAttribute( 'inert', 'true' );
+		expect( link ).toHaveAttribute( 'inert', 'true' );
+		expect( p ).toHaveAttribute( 'inert', 'true' );
 	} );
 
 	it( 'will disable an element rendered in an update to the component', async () => {
@@ -86,7 +54,7 @@ describe( 'useDisabled', () => {
 
 		const button = screen.getByText( 'Button' );
 		await waitFor( () => {
-			expect( button.hasAttribute( 'disabled' ) ).toBe( true );
+			expect( button ).toHaveAttribute( 'inert', 'true' );
 		} );
 	} );
 } );

package/src/hooks/use-focus-outside/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import TestUtils from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -12,38 +13,24 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import useFocusOutside from '../';
-import ReactDOM from 'react-dom';
 
-let wrapper, onFocusOutside;
+let onFocusOutside;
 
 describe( 'useFocusOutside', () => {
 	let origHasFocus;
 
 	const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
 		<div { ...useFocusOutside( callback ) }>
-			<input />
+			<input type="text" />
 			<input type="button" />
 		</div>
 	);
 
-	// This is needed because TestUtils does not accept a stateless component.
-	// anything run through a HOC ends up as a stateless component.
-	const getTestComponent = ( WrappedComponent, props ) => {
-		class TestComponent extends Component {
-			render() {
-				return <WrappedComponent { ...props } />;
-			}
+	class TestComponent extends Component {
+		render() {
+			return <FocusOutsideComponent { ...this.props } />;
 		}
-		return <TestComponent />;
-	};
-
-	const simulateEvent = ( event, index = 0 ) => {
-		const element = TestUtils.scryRenderedDOMComponentsWithTag(
-			wrapper,
-			'input'
-		);
-		TestUtils.Simulate[ event ]( element[ index ] );
-	};
+	}
 
 	beforeEach( () => {
 		// Mock document.hasFocus() to always be true for testing
@@ -52,9 +39,6 @@ describe( 'useFocusOutside', () => {
 		document.hasFocus = () => true;
 
 		onFocusOutside = jest.fn();
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( FocusOutsideComponent, { onFocusOutside } )
-		);
 	} );
 
 	afterEach( () => {
@@ -62,24 +46,31 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus shifts to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
-		simulateEvent( 'focus', 1 );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		input.blur();
+		button.focus();
 
 		jest.runAllTimers();
 
 		expect( onFocusOutside ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should not call handler if focus transitions via click to button', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'mouseDown', 1 );
-		simulateEvent( 'blur' );
+	it( 'should not call handler if focus transitions via click to button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
 
-		// In most browsers, the input at index 1 would receive a focus event
-		// at this point, but this is not guaranteed, which is the intention of
-		// the normalization behavior tested here.
-		simulateEvent( 'mouseUp', 1 );
+		input.focus();
+		await user.click( button );
 
 		jest.runAllTimers();
 
@@ -87,8 +78,11 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
 
 		jest.runAllTimers();
 
@@ -96,12 +90,15 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
 		// Force document.hasFocus() to return false to simulate the window/document losing focus
 		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
 		document.hasFocus = () => false;
 
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
 
 		jest.runAllTimers();
 
@@ -109,14 +106,16 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should cancel check when unmounting while queued', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'input' );
-
-		ReactDOM.unmountComponentAtNode(
-			// eslint-disable-next-line react/no-find-dom-node
-			ReactDOM.findDOMNode( wrapper ).parentNode
+		const { rerender } = render(
+			<TestComponent onFocusOutside={ onFocusOutside } />
 		);
 
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
+
+		rerender( <div /> );
+
 		jest.runAllTimers();
 
 		expect( onFocusOutside ).not.toHaveBeenCalled();

package/src/hooks/use-instance-id/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -14,23 +14,16 @@ describe( 'useInstanceId', () => {
 	};
 
 	it( 'should manage ids', async () => {
-		let test0;
+		const { container, rerender } = render( <TestComponent /> );
 
-		await act( async () => {
-			test0 = create( <TestComponent /> );
-		} );
+		expect( container ).toHaveTextContent( '0' );
 
-		expect( test0.toJSON() ).toBe( '0' );
+		rerender(
+			<div>
+				<TestComponent />
+			</div>
+		);
 
-		let test1;
-
-		await act( async () => {
-			test1 = create( <TestComponent /> );
-		} );
-
-		expect( test1.toJSON() ).toBe( '1' );
-
-		test0.unmount();
-		test1.unmount();
+		expect( container ).toHaveTextContent( '1' );
 	} );
 } );

package/src/hooks/use-media-query/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render, act } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -33,18 +33,6 @@ describe( 'useMediaQuery', () => {
 		return `useMediaQuery: ${ queryResult }`;
 	};
 
-	it( 'should return true when query matches on the first render', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-
-		const root = create( <TestComponent query="(min-width: 782px)" /> );
-
-		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
-	} );
-
 	it( 'should return true when query matches', async () => {
 		global.matchMedia.mockReturnValue( {
 			addListener,
@@ -52,17 +40,14 @@ describe( 'useMediaQuery', () => {
 			matches: true,
 		} );
 
-		let root;
+		const { container, unmount } = render(
+			<TestComponent query="(min-width: 782px)" />
+		);
 
-		await act( async () => {
-			root = create( <TestComponent query="(min-width: 782px)" /> );
-		} );
+		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
-		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+		unmount();
 
-		await act( async () => {
-			root.unmount();
-		} );
 		expect( removeListener ).toHaveBeenCalled();
 	} );
 
@@ -90,24 +75,23 @@ describe( 'useMediaQuery', () => {
 			matches: false,
 		} );
 
-		let root, updateMatchFunction;
-		await act( async () => {
-			root = create( <TestComponent query="(min-width: 782px)" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+		const { container, unmount } = render(
+			<TestComponent query="(min-width: 782px)" />
+		);
+
+		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
+		let updateMatchFunction;
 		await act( async () => {
 			updateMatchFunction = addListener.mock.calls[ 0 ][ 0 ];
 			updateMatchFunction();
 		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
 
-		await act( async () => {
-			root.unmount();
-		} );
-		expect( removeListener.mock.calls ).toEqual( [
-			[ updateMatchFunction ],
-		] );
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+
+		unmount();
+
+		expect( removeListener ).toHaveBeenCalledWith( updateMatchFunction );
 	} );
 
 	it( 'should return false when the query does not matches', async () => {
@@ -116,15 +100,15 @@ describe( 'useMediaQuery', () => {
 			removeListener,
 			matches: false,
 		} );
-		let root;
-		await act( async () => {
-			root = create( <TestComponent query="(min-width: 782px)" /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
 
-		await act( async () => {
-			root.unmount();
-		} );
+		const { container, unmount } = render(
+			<TestComponent query="(min-width: 782px)" />
+		);
+
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+
+		unmount();
+
 		expect( removeListener ).toHaveBeenCalled();
 	} );
 
@@ -134,21 +118,17 @@ describe( 'useMediaQuery', () => {
 			removeListener,
 			matches: false,
 		} );
-		let root;
-		await act( async () => {
-			root = create( <TestComponent /> );
-		} );
+
+		const { container, rerender, unmount } = render( <TestComponent /> );
+
 		// Query will be case to a boolean to simplify the return type.
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
 
-		await act( async () => {
-			root.update( <TestComponent query={ false } /> );
-		} );
-		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
+		rerender( <TestComponent query={ false } /> );
 
-		await act( async () => {
-			root.unmount();
-		} );
+		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+
+		unmount();
 		expect( global.matchMedia ).not.toHaveBeenCalled();
 		expect( addListener ).not.toHaveBeenCalled();
 		expect( removeListener ).not.toHaveBeenCalled();

package/src/hooks/use-resize-observer/index.native.js

@@ -47,7 +47,11 @@ const useResizeObserver = () => {
 	}, [] );
 
 	const observer = (
-		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />
+		<View
+			testID="resize-observer"
+			style={ StyleSheet.absoluteFill }
+			onLayout={ onLayout }
+		/>
 	);
 
 	return [ observer, measurements ];

package/src/hooks/use-resize-observer/test/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render, fireEvent } from 'test/helpers';
 import { View } from 'react-native';
 
 /**
@@ -13,36 +13,32 @@ const TestComponent = ( { onLayout } ) => {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	return (
-		<View sizes={ sizes } onLayout={ onLayout }>
+		<View testID="test-component" sizes={ sizes } onLayout={ onLayout }>
 			{ resizeObserver }
 		</View>
 	);
 };
 
-const renderWithOnLayout = ( component ) => {
-	const testComponent = create( component );
-
-	const mockNativeEvent = {
-		nativeEvent: {
-			layout: {
-				width: 300,
-				height: 500,
+describe( 'useResizeObserver()', () => {
+	it( 'should return "{ width: 300, height: 500 }"', () => {
+		const mockNativeEvent = {
+			nativeEvent: {
+				layout: {
+					width: 300,
+					height: 500,
+				},
 			},
-		},
-	};
-
-	act( () => {
-		testComponent.toJSON().children[ 0 ].props.onLayout( mockNativeEvent );
-	} );
+		};
 
-	return testComponent.toJSON();
-};
+		const { getByTestId } = render(
+			<TestComponent onLayout={ mockNativeEvent } />
+		);
 
-describe( 'useResizeObserver()', () => {
-	it( 'should return "{ width: 300, height: 500 }"', () => {
-		const component = renderWithOnLayout( <TestComponent /> );
+		const resizeObserver = getByTestId( 'resize-observer' );
+		fireEvent( resizeObserver, 'layout', mockNativeEvent );
 
-		expect( component.props.sizes ).toMatchObject( {
+		const testComponent = getByTestId( 'test-component' );
+		expect( testComponent.props.sizes ).toMatchObject( {
 			width: 300,
 			height: 500,
 		} );