@wordpress/editor 12.17.0 → 12.18.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 12.18.0 (2022-10-05)
+
 ## 12.17.0 (2022-09-21)
 
 ## 12.16.0 (2022-09-13)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.17.0",
+	"version": "12.18.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,32 +31,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.18.0",
-		"@wordpress/api-fetch": "^6.15.0",
-		"@wordpress/blob": "^3.18.0",
-		"@wordpress/block-editor": "^10.1.0",
-		"@wordpress/blocks": "^11.17.0",
-		"@wordpress/components": "^21.1.0",
-		"@wordpress/compose": "^5.16.0",
-		"@wordpress/core-data": "^5.1.0",
-		"@wordpress/data": "^7.2.0",
-		"@wordpress/date": "^4.18.0",
-		"@wordpress/deprecated": "^3.18.0",
-		"@wordpress/element": "^4.16.0",
-		"@wordpress/hooks": "^3.18.0",
-		"@wordpress/html-entities": "^3.18.0",
-		"@wordpress/i18n": "^4.18.0",
-		"@wordpress/icons": "^9.9.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.0",
-		"@wordpress/keycodes": "^3.18.0",
-		"@wordpress/media-utils": "^4.9.0",
-		"@wordpress/notices": "^3.18.0",
-		"@wordpress/preferences": "^2.10.0",
-		"@wordpress/reusable-blocks": "^3.16.0",
-		"@wordpress/rich-text": "^5.16.0",
-		"@wordpress/server-side-render": "^3.16.0",
-		"@wordpress/url": "^3.19.0",
-		"@wordpress/wordcount": "^3.18.0",
+		"@wordpress/a11y": "^3.19.0",
+		"@wordpress/api-fetch": "^6.16.0",
+		"@wordpress/blob": "^3.19.0",
+		"@wordpress/block-editor": "^10.2.0",
+		"@wordpress/blocks": "^11.18.0",
+		"@wordpress/components": "^21.2.0",
+		"@wordpress/compose": "^5.17.0",
+		"@wordpress/core-data": "^5.2.0",
+		"@wordpress/data": "^7.3.0",
+		"@wordpress/date": "^4.19.0",
+		"@wordpress/deprecated": "^3.19.0",
+		"@wordpress/element": "^4.17.0",
+		"@wordpress/hooks": "^3.19.0",
+		"@wordpress/html-entities": "^3.19.0",
+		"@wordpress/i18n": "^4.19.0",
+		"@wordpress/icons": "^9.10.0",
+		"@wordpress/keyboard-shortcuts": "^3.17.0",
+		"@wordpress/keycodes": "^3.19.0",
+		"@wordpress/media-utils": "^4.10.0",
+		"@wordpress/notices": "^3.19.0",
+		"@wordpress/preferences": "^2.11.0",
+		"@wordpress/reusable-blocks": "^3.17.0",
+		"@wordpress/rich-text": "^5.17.0",
+		"@wordpress/server-side-render": "^3.17.0",
+		"@wordpress/url": "^3.20.0",
+		"@wordpress/wordcount": "^3.19.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

package/src/components/autosave-monitor/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,6 @@ import { shallow } from 'enzyme';
 import { AutosaveMonitor } from '../';
 
 describe( 'AutosaveMonitor', () => {
-	let wrapper;
 	let setAutosaveTimerSpy;
 	beforeEach( () => {
 		jest.useFakeTimers( 'legacy' );
@@ -17,9 +16,6 @@ describe( 'AutosaveMonitor', () => {
 			AutosaveMonitor.prototype,
 			'setAutosaveTimer'
 		);
-		wrapper = shallow( <AutosaveMonitor isDirty />, {
-			lifecycleExperimental: true,
-		} );
 	} );
 
 	afterEach( () => {
@@ -29,128 +25,167 @@ describe( 'AutosaveMonitor', () => {
 		setAutosaveTimerSpy.mockClear();
 	} );
 
+	it( 'should render nothing', () => {
+		const { container } = render( <AutosaveMonitor isDirty /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
 	it( 'should start autosave timer after being mounted', () => {
+		render( <AutosaveMonitor isDirty /> );
+
 		expect( setAutosaveTimerSpy ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the autosave timer after being unmounted', () => {
-		wrapper.unmount();
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender( <div /> );
+
+		expect( clearTimeout ).toHaveBeenCalled();
+	} );
+
+	it( 'should clear and restart autosave timer when the interval changes', () => {
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender( <AutosaveMonitor isDirty interval={ 999 } /> );
+
 		expect( clearTimeout ).toHaveBeenCalled();
+		expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
 	} );
 
-	describe( '#componentDidUpdate()', () => {
-		it( 'should clear and restart autosave timer when the interval changes', () => {
-			wrapper.setProps( { interval: 999 } );
-			expect( clearTimeout ).toHaveBeenCalled();
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
-		} );
-
-		it( 'should set needsAutosave=true when editReference changes', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( true );
-		} );
-
-		it( 'should set needsAutosave=true when editReference changes and the post becomes dirty', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isDirty: true,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( true );
-		} );
-
-		it( 'should not set needsAutosave=true when editReference changes and the post is not dirty anymore', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isDirty: true,
-				editsReference: [],
-			} );
-			wrapper.setProps( {
-				isDirty: false,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-		} );
-
-		it( 'should set needsAutosave=true when editReference changes and the post is not autosaving', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isAutosaving: false,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( true );
-		} );
-
-		it( 'should not set needsAutosave=true when editReference changes and the post started autosaving', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isAutosaving: false,
-				editsReference: [],
-			} );
-			wrapper.setProps( {
-				isAutosaving: true,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-		} );
+	it( 'should autosave when `editReference` changes', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isDirty
+				isAutosaveable
+				autosave={ autosave }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	describe( '#autosaveTimerHandler()', () => {
-		it( 'should schedule itself in another {interval} ms', () => {
-			wrapper.setProps( {
-				isAutosaveable: true,
-				interval: 5,
-			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
-			expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
-		} );
-
-		it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
-			wrapper.setProps( {
-				isAutosaveable: false,
-				interval: 5,
-			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
-			expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
-		} );
-
-		it( 'should call autosave if needsAutosave=true', () => {
-			const autosave = jest.fn();
-			wrapper.setProps( {
-				isAutosaveable: true,
-				interval: 5,
-				autosave,
-			} );
-			wrapper.instance().needsAutosave = true;
-			expect( autosave ).toHaveBeenCalledTimes( 0 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( autosave ).toHaveBeenCalledTimes( 1 );
-		} );
-
-		it( 'should not call autosave if needsAutosave is not true', () => {
-			const autosave = jest.fn();
-			wrapper.setProps( {
-				isAutosaveable: true,
-				interval: 5,
-				autosave,
-			} );
-			wrapper.instance().needsAutosave = false;
-			expect( autosave ).toHaveBeenCalledTimes( 0 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( autosave ).toHaveBeenCalledTimes( 0 );
-		} );
+	it( 'should autosave when `editReference` changes and the post becomes dirty', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isDirty
+				isAutosaveable
+				autosave={ autosave }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	describe( '#render()', () => {
-		it( 'should render nothing', () => {
-			expect( wrapper.type() ).toBe( null );
-		} );
+	it( 'should not autosave when `editReference` changes and the post is not dirty anymore', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not autosave when `editReference` changes and the post is not autosaving', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				isAutosaving={ false }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not autosave when `editReference` changes and the post started autosaving', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				isAutosaving={ false }
+			/>
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				isAutosaving
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should schedule itself in another {interval} ms', () => {
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender( <AutosaveMonitor isDirty isAutosaveable interval={ 5 } /> );
+
+		jest.runOnlyPendingTimers();
+
+		expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
+	} );
+
+	it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender(
+			<AutosaveMonitor isDirty isAutosaveable={ false } interval={ 5 } />
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
 	} );
 } );

package/src/components/post-preview-button/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,180 +10,310 @@ import { shallow } from 'enzyme';
 import { PostPreviewButton } from '../';
 
 describe( 'PostPreviewButton', () => {
-	describe( 'setPreviewWindowLink()', () => {
-		it( 'should do nothing if there is no preview window', () => {
-			const url = 'https://wordpress.org';
-			const setter = jest.fn();
-			const wrapper = shallow( <PostPreviewButton /> );
+	const documentWrite = jest.fn();
+	const documentTitle = jest.fn();
+	const documentClose = jest.fn();
+	const setLocation = jest.fn();
 
-			wrapper.instance().setPreviewWindowLink( url );
+	beforeEach( () => {
+		global.open = jest.fn( () => ( {
+			focus: jest.fn(),
+			document: {
+				write: documentWrite,
+				close: documentClose,
+				get title() {},
+				set title( value ) {
+					documentTitle( value );
+				},
+			},
+			get location() {},
+			set location( value ) {
+				setLocation( value );
+			},
+		} ) );
+	} );
 
-			expect( setter ).not.toHaveBeenCalled();
-		} );
+	afterEach( () => {
+		global.open.mockRestore();
+		documentWrite.mockReset();
+		documentTitle.mockReset();
+		documentClose.mockReset();
+		setLocation.mockReset();
+	} );
 
-		it( 'set preview window location to url', () => {
-			const url = 'https://wordpress.org';
-			const setter = jest.fn();
-			const wrapper = shallow( <PostPreviewButton /> );
-			wrapper.instance().previewWindow = {
-				get location() {
-					return {
-						href: 'about:blank',
-					};
-				},
-				set location( value ) {
-					setter( value );
-				},
-			};
+	it( 'should render with `editor-post-preview` class if no `className` is specified.', () => {
+		render( <PostPreviewButton /> );
 
-			wrapper.instance().setPreviewWindowLink( url );
+		expect( screen.getByRole( 'button' ) ).toHaveClass(
+			'editor-post-preview'
+		);
+	} );
 
-			expect( setter ).toHaveBeenCalledWith( url );
-		} );
+	it( 'should render with a custom class and not `editor-post-preview` if `className` is specified.', () => {
+		render( <PostPreviewButton className="foo-bar" /> );
+
+		const button = screen.getByRole( 'button' );
+
+		expect( button ).toHaveClass( 'foo-bar' );
+		expect( button ).not.toHaveClass( 'editor-post-preview' );
 	} );
 
-	describe( 'getWindowTarget()', () => {
-		it( 'returns a string unique to the post id', () => {
-			const instance = new PostPreviewButton( {
-				postId: 1,
-			} );
+	it( 'should render a tertiary button if no classname is specified.', () => {
+		render( <PostPreviewButton /> );
 
-			expect( instance.getWindowTarget() ).toBe( 'wp-preview-1' );
-		} );
+		expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
 	} );
 
-	describe( 'componentDidUpdate()', () => {
-		it( 'should change popup location if preview link is available', () => {
-			const wrapper = shallow(
-				<PostPreviewButton
-					postId={ 1 }
-					currentPostLink="https://wordpress.org/?p=1"
-					isSaveable
-					modified="2017-08-03T15:05:50"
-				/>
-			);
+	it( 'should render the button in its default variant if a custom classname is specified.', () => {
+		render( <PostPreviewButton className="foo-bar" /> );
+
+		const button = screen.getByRole( 'button' );
 
-			const previewWindow = { location: {} };
+		expect( button ).not.toHaveClass( 'is-primary' );
+		expect( button ).not.toHaveClass( 'is-secondary' );
+		expect( button ).not.toHaveClass( 'is-tertiary' );
+		expect( button ).not.toHaveClass( 'is-link' );
+	} );
 
-			wrapper.instance().previewWindow = previewWindow;
+	it( 'should render `textContent` if specified.', () => {
+		const textContent = 'Foo bar';
 
-			wrapper.setProps( { previewLink: 'https://wordpress.org/?p=1' } );
+		render( <PostPreviewButton textContent={ textContent } /> );
 
-			expect( previewWindow.location ).toBe(
-				'https://wordpress.org/?p=1'
-			);
-		} );
+		const button = screen.getByRole( 'button' );
+
+		expect( button ).toHaveTextContent( textContent );
+		expect(
+			within( button ).queryByText( 'Preview' )
+		).not.toBeInTheDocument();
+		expect(
+			within( button ).queryByText( '(opens in a new tab)' )
+		).not.toBeInTheDocument();
 	} );
 
-	describe( 'openPreviewWindow()', () => {
-		let windowOpen;
-		beforeEach( () => {
-			windowOpen = window.open;
-		} );
-		afterEach( () => {
-			window.open = windowOpen;
-		} );
+	it( 'should render `Preview` with accessibility text if `textContent` not specified.', () => {
+		render( <PostPreviewButton /> );
 
-		it( 'behaves like a regular link if not autosaveable', () => {
-			const preventDefault = jest.fn();
-			const autosave = jest.fn();
-			const setLocation = jest.fn();
-			window.open = jest.fn( () => ( {
-				focus: jest.fn(),
-				set location( url ) {
-					setLocation( url );
-				},
-			} ) );
-
-			const wrapper = shallow(
-				<PostPreviewButton postId={ 1 } autosave={ autosave } />
-			);
-
-			wrapper.simulate( 'click', {
-				preventDefault,
-				target: { href: 'https://wordpress.org/?p=1' },
-			} );
-
-			expect( preventDefault ).toHaveBeenCalled();
-			expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
-			expect( wrapper.instance().previewWindow.focus ).toHaveBeenCalled();
-			expect( autosave ).not.toHaveBeenCalled();
-			expect( setLocation ).toHaveBeenCalledWith(
-				'https://wordpress.org/?p=1'
-			);
-		} );
+		const button = screen.getByRole( 'button' );
+
+		expect( within( button ).getByText( 'Preview' ) ).toBeVisible();
+		expect(
+			within( button ).getByText( '(opens in a new tab)' )
+		).toBeInTheDocument();
+	} );
 
-		it( 'autosaves the post if autosaveable', () => {
-			const preventDefault = jest.fn();
-			const autosave = jest.fn();
+	it( 'should be disabled if post is not saveable.', async () => {
+		render( <PostPreviewButton isSaveable={ false } postId={ 123 } /> );
 
-			window.open = jest.fn( () => ( {
-				focus: jest.fn(),
-				document: {
-					write: jest.fn(),
-					close: jest.fn(),
-				},
-			} ) );
-
-			const wrapper = shallow(
-				<PostPreviewButton
-					postId={ 1 }
-					autosave={ autosave }
-					isAutosaveable
-				/>
-			);
-
-			wrapper.simulate( 'click', { preventDefault } );
-
-			expect( preventDefault ).toHaveBeenCalled();
-			expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
-			expect( wrapper.instance().previewWindow.focus ).toHaveBeenCalled();
-			expect( autosave ).toHaveBeenCalled();
-			expect(
-				wrapper.instance().previewWindow.document.write.mock
-					.calls[ 0 ][ 0 ]
-			).toContain( 'Generating preview…' );
-			expect(
-				wrapper.instance().previewWindow.document.close
-			).toHaveBeenCalled();
+		expect( screen.getByRole( 'button' ) ).toBeDisabled();
+	} );
+
+	it( 'should not be disabled if post is saveable.', async () => {
+		render( <PostPreviewButton isSaveable postId={ 123 } /> );
+
+		expect( screen.getByRole( 'button' ) ).not.toBeDisabled();
+	} );
+
+	it( 'should set `href` to `previewLink` if `previewLink` is specified.', async () => {
+		const url = 'https://wordpress.org';
+
+		render(
+			<PostPreviewButton isSaveable postId={ 123 } previewLink={ url } />
+		);
+
+		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url );
+	} );
+
+	it( 'should set `href` to `currentPostLink` if `currentPostLink` is specified.', async () => {
+		const url = 'https://wordpress.org';
+
+		render(
+			<PostPreviewButton
+				isSaveable
+				postId={ 123 }
+				currentPostLink={ url }
+			/>
+		);
+
+		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url );
+	} );
+
+	it( 'should prioritize `previewLink` if both `previewLink` and `currentPostLink` are specified.', async () => {
+		const url1 = 'https://wordpress.org';
+		const url2 = 'https://wordpress.com';
+
+		render(
+			<PostPreviewButton
+				isSaveable
+				postId={ 123 }
+				previewLink={ url1 }
+				currentPostLink={ url2 }
+			/>
+		);
+
+		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url1 );
+	} );
+
+	it( 'should properly set target to `wp-preview-${ postId }`.', async () => {
+		const postId = 123;
+		const url = 'https://wordpress.org';
+
+		render(
+			<PostPreviewButton
+				isSaveable
+				postId={ postId }
+				previewLink={ url }
+			/>
+		);
+
+		expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+			'target',
+			`wp-preview-${ postId }`
+		);
+	} );
+
+	it( 'should save post if `isDraft` is `true`', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const url = 'https://wordpress.org';
+		const savePost = jest.fn();
+		const autosave = jest.fn();
+
+		render(
+			<PostPreviewButton
+				isAutosaveable
+				isSaveable
+				isDraft
+				postId={ 123 }
+				previewLink={ url }
+				savePost={ savePost }
+				autosave={ autosave }
+			/>
+		);
+
+		await user.click( screen.getByRole( 'link' ) );
+
+		expect( savePost ).toHaveBeenCalledWith(
+			expect.objectContaining( { isPreview: true } )
+		);
+		expect( autosave ).not.toHaveBeenCalled();
 	} );
 
-	describe( 'render()', () => {
-		it( 'should render previewLink if provided', () => {
-			const wrapper = shallow(
-				<PostPreviewButton
-					postId={ 1 }
-					isSaveable
-					previewLink="https://wordpress.org/?p=1&preview=true"
-					currentPostLink="https://wordpress.org/?p=1"
-				/>
-			);
+	it( 'should autosave post if `isDraft` is `false`', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const url = 'https://wordpress.org';
+		const savePost = jest.fn();
+		const autosave = jest.fn();
 
-			expect( wrapper ).toMatchSnapshot();
+		render(
+			<PostPreviewButton
+				isAutosaveable
+				isSaveable
+				isDraft={ false }
+				postId={ 123 }
+				previewLink={ url }
+				savePost={ savePost }
+				autosave={ autosave }
+			/>
+		);
+
+		await user.click( screen.getByRole( 'link' ) );
+
+		expect( savePost ).not.toHaveBeenCalled();
+		expect( autosave ).toHaveBeenCalledWith(
+			expect.objectContaining( { isPreview: true } )
+		);
+	} );
+
+	it( 'should open a window with the specified target', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const postId = 123;
+		const url = 'https://wordpress.org';
 
-		it( 'should render currentPostLink otherwise', () => {
-			const wrapper = shallow(
-				<PostPreviewButton
-					postId={ 1 }
-					isSaveable
-					currentPostLink="https://wordpress.org/?p=1"
-				/>
-			);
+		render(
+			<PostPreviewButton
+				isAutosaveable
+				isSaveable
+				postId={ postId }
+				previewLink={ url }
+				savePost={ jest.fn() }
+				autosave={ jest.fn() }
+			/>
+		);
 
-			expect( wrapper ).toMatchSnapshot();
+		await user.click( screen.getByRole( 'link' ) );
+
+		expect( global.open ).toHaveBeenCalledWith(
+			'',
+			`wp-preview-${ postId }`
+		);
+	} );
+
+	it( 'should set the location in the window properly', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const postId = 123;
+		const url = 'https://wordpress.org';
+
+		const { rerender } = render(
+			<PostPreviewButton
+				isSaveable
+				postId={ postId }
+				savePost={ jest.fn() }
+				autosave={ jest.fn() }
+			/>
+		);
 
-		it( 'should be disabled if post is not saveable', () => {
-			const wrapper = shallow(
-				<PostPreviewButton
-					postId={ 1 }
-					currentPostLink="https://wordpress.org/?p=1"
-				/>
-			);
+		await user.click( screen.getByRole( 'button' ) );
 
-			expect( wrapper.prop( 'disabled' ) ).toBe( true );
+		expect( setLocation ).toHaveBeenCalledWith( undefined );
+
+		rerender(
+			<PostPreviewButton
+				isSaveable
+				postId={ postId }
+				previewLink={ url }
+				savePost={ jest.fn() }
+				autosave={ jest.fn() }
+			/>
+		);
+
+		expect( setLocation ).toHaveBeenCalledWith( url );
+	} );
+
+	it( 'should display a `Generating preview` message while waiting for autosaving', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const previewText = 'Generating preview…';
+		const url = 'https://wordpress.org';
+		const savePost = jest.fn();
+		const autosave = jest.fn();
+
+		render(
+			<PostPreviewButton
+				isAutosaveable
+				isSaveable
+				isDraft={ false }
+				postId={ 123 }
+				previewLink={ url }
+				savePost={ savePost }
+				autosave={ autosave }
+			/>
+		);
+
+		await user.click( screen.getByRole( 'link' ) );
+
+		expect( documentWrite ).toHaveBeenCalledWith(
+			expect.stringContaining( previewText )
+		);
+		expect( documentTitle ).toHaveBeenCalledWith( previewText );
+		expect( documentClose ).toHaveBeenCalled();
 	} );
 } );

package/src/components/post-preview-button/test/__snapshots__/index.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PostPreviewButton render() should render currentPostLink otherwise 1`] = `
-<ForwardRef(Button)
-  className="editor-post-preview"
-  disabled={false}
-  href="https://wordpress.org/?p=1"
-  onClick={[Function]}
-  target="wp-preview-1"
-  variant="tertiary"
->
-  Preview
-  <VisuallyHidden
-    as="span"
-  >
-    (opens in a new tab)
-  </VisuallyHidden>
-</ForwardRef(Button)>
-`;
-
-exports[`PostPreviewButton render() should render previewLink if provided 1`] = `
-<ForwardRef(Button)
-  className="editor-post-preview"
-  disabled={false}
-  href="https://wordpress.org/?p=1&preview=true"
-  onClick={[Function]}
-  target="wp-preview-1"
-  variant="tertiary"
->
-  Preview
-  <VisuallyHidden
-    as="span"
-  >
-    (opens in a new tab)
-  </VisuallyHidden>
-</ForwardRef(Button)>
-`;