Block Editor: Refactor Warning tests to @testing-library/react (#43817)

WordPress · Sep 5, 2022 · bcce10c · bcce10c
1 parent f821819
commit bcce10c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
@@ -1,25 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Warning should match snapshot 1`] = `
-<div
-  style={
-    Object {
-      "all": "initial",
-      "display": "contents",
-    }
-  }
->
+<div>
   <div
-    className="block-editor-warning"
+    style="display: contents; all: initial;"
   >
     <div
-      className="block-editor-warning__contents"
+      class="block-editor-warning"
     >
-      <p
-        className="block-editor-warning__message"
+      <div
+        class="block-editor-warning__contents"
       >
-        error
-      </p>
+        <p
+          class="block-editor-warning__message"
+        >
+          error
+        </p>
+      </div>
     </div>
   </div>
 </div>

diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/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
@@ -10,47 +11,49 @@ import Warning from '../index';
 
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
-		const wrapper = shallow( <Warning>error</Warning> );
+		const { container } = render( <Warning>error</Warning> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should have valid class', () => {
-		const wrapper = shallow( <Warning /> );
-
-		expect( wrapper.find( '.block-editor-warning' ) ).toHaveLength( 1 );
-		expect( wrapper.find( '.block-editor-warning__actions' ) ).toHaveLength(
-			0
-		);
-		expect( wrapper.find( '.block-editor-warning__hidden' ) ).toHaveLength(
-			0
-		);
-	} );
-
-	it( 'should show child error message element', () => {
-		const wrapper = shallow(
-			<Warning actions={ <button /> }>Message</Warning>
+	it( 'should show primary actions', () => {
+		render(
+			<Warning actions={ <button>Click me</button> }>Message</Warning>
 		);
 
-		const actions = wrapper.find( '.block-editor-warning__actions' );
-		const action = actions.childAt( 0 );
+		expect(
+			screen.getByRole( 'button', { name: 'Click me' } )
+		).toBeVisible();
 
-		expect( actions ).toHaveLength( 1 );
-		expect( action.hasClass( 'block-editor-warning__action' ) ).toBe(
-			true
-		);
-		expect( action.childAt( 0 ).type() ).toBe( 'button' );
+		expect(
+			screen.queryByRole( 'button', { name: 'More options' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'should show hidden actions', () => {
-		const wrapper = shallow(
+	it( 'should show hidden secondary actions', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
 			<Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>
 				Message
 			</Warning>
 		);
 
-		const actions = wrapper.find( '.block-editor-warning__secondary' );
+		const secondaryActionsBtn = screen.getByRole( 'button', {
+			name: 'More options',
+		} );
+
+		expect( secondaryActionsBtn ).toBeVisible();
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'test' } )
+		).not.toBeInTheDocument();
+
+		await user.click( secondaryActionsBtn );
 
-		expect( actions ).toHaveLength( 1 );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'test' } )
+		).toBeInTheDocument();
 	} );
 } );