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 index f585a6ae18399e..87f462a63817b5 100644 --- 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`] = ` - - - - } - label="Save draft" - shortcut="Ctrl+S" -/> + `; -exports[`PostSavedState returns a switch to draft link if the post is published 1`] = ``; +exports[`PostSavedState returns a switch to draft link if the post is published 1`] = ` + +`; exports[`PostSavedState should return Save button if edits to be saved 1`] = ` - Save draft - + `; diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js index 7c8515086e7a35..c684f0011acedd 100644 --- 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', () => () => ( +
+) ); + 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( ); + render( ); - expect( wrapper.text() ).toContain( 'Saving' ); + expect( screen.getByText( 'Saving' ) ).toBeVisible(); } ); it( 'returns a disabled button if the post is not saveable', () => { @@ -56,9 +62,9 @@ describe( 'PostSavedState', () => { isSaving: false, } ) ); - const wrapper = shallow( ); + render( ); - expect( wrapper ).toMatchSnapshot(); + expect( screen.getByRole( 'button' ) ).toMatchSnapshot(); } ); it( 'returns a switch to draft link if the post is published', () => { @@ -66,9 +72,9 @@ describe( 'PostSavedState', () => { isPublished: true, } ) ); - const wrapper = shallow( ); + render( ); - 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( ); + render( ); + + 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( ); + render( ); + + 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( [] ); } );