Editor: Refactor PostSavedState tests to @testing-library/react (#43769)

WordPress · Sep 1, 2022 · d0362e1 · d0362e1
1 parent 4c30b5e
commit d0362e1
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 38 deletions.
diff --git a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
@@ -1,34 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PostSavedState returns a disabled button if the post is not saveable 1`] = `
-<ForwardRef(Button)
-  aria-disabled={true}
-  icon={
-    <SVG
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
-      />
-    </SVG>
-  }
-  label="Save draft"
-  shortcut="Ctrl+S"
-/>
+<button
+  aria-disabled="true"
+  aria-label="Save draft"
+  class="components-button has-text has-icon"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
+    />
+  </svg>
+</button>
 `;
 
-exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `<WithSelect(WithDispatch(PostSwitchToDraftButton)) />`;
+exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
+<button
+  class="components-button editor-post-switch-to-draft is-tertiary"
+  type="button"
+>
+  Switch to draft
+</button>
+`;
 
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
-<ForwardRef(Button)
-  aria-disabled={false}
-  className="editor-post-save-draft"
-  label="Save draft"
-  onClick={[Function]}
-  shortcut="Ctrl+S"
-  variant="tertiary"
+<button
+  aria-disabled="false"
+  aria-label="Save draft"
+  class="components-button editor-post-save-draft is-tertiary"
+  type="button"
 >
   Save draft
-</ForwardRef(Button)>
+</button>
 `;
diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { mount, shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -19,6 +20,7 @@ const mockSavePost = jest.fn();
 jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
 	return {
 		useDispatch: () => ( { savePost: mockSavePost } ),
+		useDispatchWithMap: jest.fn(),
 	};
 } );
 
@@ -34,6 +36,10 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => {
 	return mock;
 } );
 
+jest.mock( '@wordpress/icons/src/icon', () => () => (
+	<div data-testid="test-icon" />
+) );
+
 describe( 'PostSavedState', () => {
 	it( 'should display saving while save in progress, even if not saveable', () => {
 		useSelect.mockImplementation( () => ( {
@@ -43,9 +49,9 @@ describe( 'PostSavedState', () => {
 			isSaving: true,
 		} ) );
 
-		const wrapper = mount( <PostSavedState /> );
+		render( <PostSavedState /> );
 
-		expect( wrapper.text() ).toContain( 'Saving' );
+		expect( screen.getByText( 'Saving' ) ).toBeVisible();
 	} );
 
 	it( 'returns a disabled button if the post is not saveable', () => {
@@ -56,19 +62,19 @@ describe( 'PostSavedState', () => {
 			isSaving: false,
 		} ) );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
 	it( 'returns a switch to draft link if the post is published', () => {
 		useSelect.mockImplementation( () => ( {
 			isPublished: true,
 		} ) );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should return Saved text if not new and not dirty', () => {
@@ -79,13 +85,19 @@ describe( 'PostSavedState', () => {
 			isSaving: false,
 		} ) );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
+
+		const button = screen.getByRole( 'button' );
 
-		expect( wrapper.childAt( 0 ).name() ).toBe( 'Icon' );
-		expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
+		expect( within( button ).getByTestId( 'test-icon' ) ).toBeVisible();
+		expect( within( button ).getByText( 'Saved' ) ).toBeVisible();
 	} );
 
-	it( 'should return Save button if edits to be saved', () => {
+	it( 'should return Save button if edits to be saved', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		useSelect.mockImplementation( () => ( {
 			isDirty: true,
 			isNew: false,
@@ -96,11 +108,16 @@ describe( 'PostSavedState', () => {
 		// Simulate the viewport being considered large.
 		useViewportMatch.mockImplementation( () => true );
 
-		const wrapper = shallow( <PostSavedState /> );
+		render( <PostSavedState /> );
+
+		const button = screen.getByRole( 'button' );
+
+		expect( button ).toMatchSnapshot();
+
+		await user.click( button );
 
-		expect( wrapper ).toMatchSnapshot();
-		wrapper.simulate( 'click', {} );
 		expect( mockSavePost ).toHaveBeenCalled();
+
 		// Regression: Verify the event object is not passed to prop callback.
 		expect( mockSavePost.mock.calls[ 0 ] ).toEqual( [] );
 	} );