From b906f4a83969d1d6fab508838b92250af6f632e3 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Thu, 8 Sep 2022 19:24:47 +0300
Subject: [PATCH] Block Editor: Refactor DefaultBlockAppender tests to
 @testing-library/react

---
 .../test/__snapshots__/index.js.snap          | 96 ++++++++-----------
 .../default-block-appender/test/index.js      | 50 ++++++----
 2 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
index 344bb95ea044b2..3a0a98578a2a5e 100644
--- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -1,73 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
-<div
-  className="block-editor-default-block-appender has-visible-prompt"
-  data-root-client-id=""
->
-  <p
-    aria-label="Add default block"
-    className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex="0"
+<div>
+  <div
+    class="block-editor-default-block-appender has-visible-prompt"
+    data-root-client-id=""
   >
-    Type / to choose a block
-  </p>
-  <WithSelect(WithDispatch(IfCondition(Inserter)))
-    __experimentalIsQuick={true}
-    isAppender={true}
-    position="bottom right"
-  />
+    <p
+      aria-label="Add default block"
+      class="block-editor-default-block-appender__content"
+      role="button"
+      tabindex="0"
+    >
+      Type / to choose a block
+    </p>
+  </div>
 </div>
 `;
 
 exports[`DefaultBlockAppender should match snapshot 1`] = `
-<div
-  className="block-editor-default-block-appender has-visible-prompt"
-  data-root-client-id=""
->
-  <p
-    aria-label="Add default block"
-    className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex="0"
+<div>
+  <div
+    class="block-editor-default-block-appender has-visible-prompt"
+    data-root-client-id=""
   >
-    Type / to choose a block
-  </p>
-  <WithSelect(WithDispatch(IfCondition(Inserter)))
-    __experimentalIsQuick={true}
-    isAppender={true}
-    position="bottom right"
-  />
+    <p
+      aria-label="Add default block"
+      class="block-editor-default-block-appender__content"
+      role="button"
+      tabindex="0"
+    >
+      Type / to choose a block
+    </p>
+  </div>
 </div>
 `;
 
 exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
-<div
-  className="block-editor-default-block-appender"
-  data-root-client-id=""
->
-  <p
-    aria-label="Add default block"
-    className="block-editor-default-block-appender__content"
-    onClick={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex="0"
+<div>
+  <div
+    class="block-editor-default-block-appender"
+    data-root-client-id=""
   >
-    
-  </p>
-  <WithSelect(WithDispatch(IfCondition(Inserter)))
-    __experimentalIsQuick={true}
-    isAppender={true}
-    position="bottom right"
-  />
+    <p
+      aria-label="Add default block"
+      class="block-editor-default-block-appender__content"
+      role="button"
+      tabindex="0"
+    >
+      
+    </p>
+  </div>
 </div>
 `;
diff --git a/packages/block-editor/src/components/default-block-appender/test/index.js b/packages/block-editor/src/components/default-block-appender/test/index.js
index b14463d3351635..0a00a00d5d881f 100644
--- a/packages/block-editor/src/components/default-block-appender/test/index.js
+++ b/packages/block-editor/src/components/default-block-appender/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,42 +10,55 @@ import { shallow } from 'enzyme';
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
 describe( 'DefaultBlockAppender', () => {
-	const expectOnAppendCalled = ( onAppend ) => {
-		expect( onAppend ).toHaveBeenCalledTimes( 1 );
-		expect( onAppend ).toHaveBeenCalledWith();
-	};
-
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should append a default block when input focused', () => {
+	it( 'should append a default block when input focused', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'click' );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Add default block' } )
+		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
-		expectOnAppendCalled( onAppend );
+		// Called once for focusing and once for clicking.
+		expect( onAppend ).toHaveBeenCalledTimes( 2 );
+		expect( onAppend ).toHaveBeenCalledWith();
 	} );
 
-	it( 'should optionally show without prompt', () => {
+	it( 'should optionally show without prompt', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
 		);
-		const input = wrapper.find( 'p' );
 
-		expect( input.prop( 'children' ) ).toEqual( ZWNBSP );
+		const appender = screen.getByRole( 'button', {
+			name: 'Add default block',
+		} );
+
+		await user.click( appender );
+
+		expect( appender ).toContainHTML( ZWNBSP );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );