Components: Refactor KeyboardShortcuts tests to `@testing-library/r…

…eact` (#44075) * Components: Refactor KeyboardShortcuts tests to @testing-library/react * Add CHANGELOG
WordPress · Sep 12, 2022 · a973742 · a973742
1 parent c011452
commit a973742
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 31 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -51,6 +51,7 @@
 -   `BorderControl` and `BorderBoxControl`: replace temporary types with `Popover`'s types ([#43823](https://github.com/WordPress/gutenberg/pull/43823/)).
 -   `DimensionControl`: Refactor tests to `@testing-library/react` ([#43916](https://github.com/WordPress/gutenberg/pull/43916)).
 -   `withFilters`: Refactor tests to `@testing-library/react` ([#44017](https://github.com/WordPress/gutenberg/pull/44017)).
+-   `KeyboardShortcuts`: Refactor tests to `@testing-library/react` ([#44075](https://github.com/WordPress/gutenberg/pull/44075)).
 
 ## 20.0.0 (2022-08-24)
 

diff --git a/packages/components/src/keyboard-shortcuts/test/index.js b/packages/components/src/keyboard-shortcuts/test/index.js
@@ -1,32 +1,27 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcuts from '../';
 
 describe( 'KeyboardShortcuts', () => {
-	afterEach( () => {
-		while ( document.body.firstChild ) {
-			document.body.removeChild( document.body.firstChild );
-		}
-	} );
-
 	function keyPress( which, target ) {
 		[ 'keydown', 'keypress', 'keyup' ].forEach( ( eventName ) => {
 			const event = new window.Event( eventName, { bubbles: true } );
 			event.keyCode = which;
 			event.which = which;
-			target.dispatchEvent( event );
+			fireEvent( target, event );
 		} );
 	}
 
-	it( 'should capture key events', () => {
+	it( 'should capture key events', async () => {
 		const spy = jest.fn();
-		mount(
+
+		render(
 			<KeyboardShortcuts
 				shortcuts={ {
 					d: spy,
@@ -41,10 +36,8 @@ describe( 'KeyboardShortcuts', () => {
 
 	it( 'should capture key events globally', () => {
 		const spy = jest.fn();
-		const attachNode = document.createElement( 'div' );
-		document.body.appendChild( attachNode );
 
-		const wrapper = mount(
+		render(
 			<div>
 				<KeyboardShortcuts
 					bindGlobal
@@ -53,21 +46,18 @@ describe( 'KeyboardShortcuts', () => {
 					} }
 				/>
 				<textarea></textarea>
-			</div>,
-			{ attachTo: attachNode }
+			</div>
 		);
 
-		keyPress( 68, wrapper.find( 'textarea' ).getDOMNode() );
+		keyPress( 68, screen.getByRole( 'textbox' ) );
 
 		expect( spy ).toHaveBeenCalled();
 	} );
 
 	it( 'should capture key events on specific event', () => {
 		const spy = jest.fn();
-		const attachNode = document.createElement( 'div' );
-		document.body.appendChild( attachNode );
 
-		const wrapper = mount(
+		render(
 			<div>
 				<KeyboardShortcuts
 					eventName="keyup"
@@ -76,22 +66,18 @@ describe( 'KeyboardShortcuts', () => {
 					} }
 				/>
 				<textarea></textarea>
-			</div>,
-			{ attachTo: attachNode }
+			</div>
 		);
 
-		keyPress( 68, wrapper.find( 'textarea' ).getDOMNode() );
+		keyPress( 68, screen.getByRole( 'textbox' ) );
 
-		expect( spy ).toHaveBeenCalled();
 		expect( spy.mock.calls[ 0 ][ 0 ].type ).toBe( 'keyup' );
 	} );
 
 	it( 'should capture key events on children', () => {
 		const spy = jest.fn();
-		const attachNode = document.createElement( 'div' );
-		document.body.appendChild( attachNode );
 
-		const wrapper = mount(
+		render(
 			<div>
 				<KeyboardShortcuts
 					shortcuts={ {
@@ -101,18 +87,17 @@ describe( 'KeyboardShortcuts', () => {
 					<textarea></textarea>
 				</KeyboardShortcuts>
 				<textarea></textarea>
-			</div>,
-			{ attachTo: attachNode }
+			</div>
 		);
 
-		const textareas = wrapper.find( 'textarea' );
+		const textareas = screen.getAllByRole( 'textbox' );
 
 		// Outside scope
-		keyPress( 68, textareas.at( 1 ).getDOMNode() );
+		keyPress( 68, textareas[ 1 ] );
 		expect( spy ).not.toHaveBeenCalled();
 
 		// Inside scope
-		keyPress( 68, textareas.at( 0 ).getDOMNode() );
+		keyPress( 68, textareas[ 0 ] );
 		expect( spy ).toHaveBeenCalled();
 	} );
 } );