From a9737421c0a4de7f60ed131b1637ef540e3316c9 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Mon, 12 Sep 2022 13:40:47 +0300
Subject: [PATCH] Components: Refactor `KeyboardShortcuts` tests to
 `@testing-library/react` (#44075)

* Components: Refactor KeyboardShortcuts tests to @testing-library/react

* Add CHANGELOG
---
 packages/components/CHANGELOG.md              |  1 +
 .../src/keyboard-shortcuts/test/index.js      | 47 +++++++------------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 19cc64a73aaa9..e4bac1d2dbac8 100644
--- 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
index 774ac4a1ba4b2..bb63535f36c41 100644
--- a/packages/components/src/keyboard-shortcuts/test/index.js
+++ b/packages/components/src/keyboard-shortcuts/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,24 +9,19 @@ import { mount } from 'enzyme';
 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();
 	} );
 } );