Components: Refactor withFocusReturn tests to RTL (#45012)

* Components: Refactor withFocusReturn tests to RTL * Add a CHANGELOG entry * Remove unnecessary fireEvent * Click into the textarea to focus it
WordPress · Oct 18, 2022 · 142620b · 142620b
1 parent 06ae775
commit 142620b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 27 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 -   `Sandbox`: Use `toString` to create observe and resize script string ([#42872](https://github.com/WordPress/gutenberg/pull/42872)).
 -   `Navigator`: refactor unit tests to TypeScript and to `user-event` ([#44970](https://github.com/WordPress/gutenberg/pull/44970)).
 -   `Navigator`: Refactor Storybook code to TypeScript and controls ([#44979](https://github.com/WordPress/gutenberg/pull/44979)).
+-   `withFocusReturn`: Refactor tests to `@testing-library/react` ([#45012](https://github.com/WordPress/gutenberg/pull/45012)).
 
 ## 21.2.0 (2022-10-05)
 

diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,14 @@ import withFocusReturn from '../';
 
 class Test extends Component {
 	render() {
+		const { className, focusHistory } = this.props;
 		return (
-			<div className="test">
-				<textarea />
+			<div
+				className={ className }
+				data-testid="test-element"
+				data-focus-history={ focusHistory }
+			>
+				<textarea aria-label="Textarea" />
 			</div>
 		);
 	}
@@ -41,32 +46,25 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should render a basic Test component inside the HOC', () => {
-			const renderedComposite = renderer.create( <Composite /> );
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			const wrappedElementShallow = wrappedElement.children[ 0 ];
-			expect( wrappedElementShallow.props.className ).toBe( 'test' );
-			expect( wrappedElementShallow.type ).toBe( 'div' );
-			expect( wrappedElementShallow.children[ 0 ].type ).toBe(
-				'textarea'
-			);
+			render( <Composite /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
 		} );
 
 		it( 'should pass own props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toHaveClass(
+				'test'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.test ).toBe( 'test' );
 		} );
 
 		it( 'should not pass any withFocusReturn context props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).not.toHaveAttribute(
+				'data-focus-history'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.focusHistory ).toBeUndefined();
 		} );
 
 		it( 'should not switch focus back to the bound focus element', () => {
@@ -85,17 +83,23 @@ describe( 'withFocusReturn()', () => {
 			expect( switchFocusTo ).toHaveFocus();
 		} );
 
-		it( 'should switch focus back when unmounted while having focus', () => {
+		it( 'should switch focus back when unmounted while having focus', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const { container, unmount } = render( <Composite />, {
 				container: document.body.appendChild(
 					document.createElement( 'div' )
 				),
 			} );
 
-			const textarea = container.querySelector( 'textarea' );
-			fireEvent.focusIn( textarea, { target: textarea } );
-			textarea.focus();
-			expect( textarea ).toHaveFocus();
+			// Click inside the textarea to focus it.
+			await user.click(
+				screen.getByRole( 'textbox', {
+					name: 'Textarea',
+				} )
+			);
 
 			// Should return to the activeElement saved with this component.
 			unmount();