Block Editor: Refactor DefaultBlockAppender tests to @testing-library…

…/react (#43990)
WordPress · Sep 9, 2022 · 61456e8 · 61456e8
1 parent a598eb4
commit 61456e8
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 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
@@ -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
@@ -1,50 +1,64 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 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();
 	} );
 } );