@wordpress/compose 5.17.0 → 5.19.0

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

@@ -1,124 +1,152 @@
 /**
  * External dependencies
  */
-import TestUtils from 'react-dom/test-utils';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import useFocusOutside from '../';
-import ReactDOM from 'react-dom';
-
-let wrapper, onFocusOutside;
 
-describe( 'useFocusOutside', () => {
-	let origHasFocus;
-
-	const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
+const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
+	<div>
+		{ /* Wrapper */ }
 		<div { ...useFocusOutside( callback ) }>
-			<input />
-			<input type="button" />
+			<input type="text" />
+			<button>Button inside the wrapper</button>
+			<iframe title="test-iframe">
+				<button>Inside the iframe</button>
+			</iframe>
 		</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 } />;
-			}
-		}
-		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
-		// note: we overide this for some tests.
-		origHasFocus = document.hasFocus;
-		document.hasFocus = () => true;
-
-		onFocusOutside = jest.fn();
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( FocusOutsideComponent, { onFocusOutside } )
-		);
-	} );
 
-	afterEach( () => {
-		document.hasFocus = origHasFocus;
-	} );
+		<button>Button outside the wrapper</button>
+	</div>
+);
 
-	it( 'should not call handler if focus shifts to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
-		simulateEvent( 'focus', 1 );
+describe( 'useFocusOutside', () => {
+	it( 'should not call handler if focus shifts to element within component', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		jest.runAllTimers();
+		// Tab through the interactive elements inside the wrapper,
+		// causing multiple focus/blur events.
+		await user.tab();
+		expect( screen.getByRole( 'textbox' ) ).toHaveFocus();
+
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		).toHaveFocus();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).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 mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		// 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 );
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		jest.runAllTimers();
+		// Click the input and the button, causing multiple focus/blur events.
+		await user.click( screen.getByRole( 'textbox' ) );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+	it( 'should call handler if focus shifts to element outside component', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		jest.runAllTimers();
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		expect( onFocusOutside ).toHaveBeenCalled();
+		// Click and focus button inside the wrapper
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
+
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
+
+		// Click and focus button outside the wrapper
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button outside the wrapper' } )
+		);
+
+		expect( mockOnFocusOutside ).toHaveBeenCalled();
 	} );
 
-	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
+	it( 'should not call handler if focus shifts outside the component when the document does not have focus', async () => {
 		// 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;
+		const mockedDocumentHasFocus = jest
+			.spyOn( document, 'hasFocus' )
+			.mockImplementation( () => false );
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		// Click and focus button inside the wrapper, then click and focus
+		// a button outside the wrapper.
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button outside the wrapper' } )
+		);
 
-		jest.runAllTimers();
+		// The handler is not called thanks to the mocked return value of
+		// `document.hasFocus()`
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		// Restore the `document.hasFocus()` function to its original implementation.
+		mockedDocumentHasFocus.mockRestore();
 	} );
 
-	it( 'should cancel check when unmounting while queued', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'input' );
+	it( 'should cancel check when unmounting while queued', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		ReactDOM.unmountComponentAtNode(
-			// eslint-disable-next-line react/no-find-dom-node
-			ReactDOM.findDOMNode( wrapper ).parentNode
+		const { unmount } = render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
 		);
 
+		// Click and focus button inside the wrapper.
+		const button = screen.getByRole( 'button', {
+			name: 'Button inside the wrapper',
+		} );
+		await user.click( button );
+
+		// Simulate a blur event and the wrapper unmounting while the blur event
+		// handler is queued
+		button.blur();
+		unmount();
+
 		jest.runAllTimers();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 } );

package/src/hooks/use-focusable-iframe/{index.js → index.ts}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { RefCallback } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -7,9 +12,9 @@ import useRefEffect from '../use-ref-effect';
  * Dispatches a bubbling focus event when the iframe receives focus. Use
  * `onFocus` as usual on the iframe or a parent element.
  *
- * @return {Object} Ref to pass to the iframe.
+ * @return Ref to pass to the iframe.
  */
-export default function useFocusableIframe() {
+export default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {
 	return useRefEffect( ( element ) => {
 		const { ownerDocument } = element;
 		if ( ! ownerDocument ) return;
@@ -22,7 +27,7 @@ export default function useFocusableIframe() {
 		 */
 		function checkFocus() {
 			if ( ownerDocument && ownerDocument.activeElement === element ) {
-				/** @type {HTMLElement} */ ( element ).focus();
+				( element as HTMLElement ).focus();
 			}
 		}
 

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,
 		} );