@wordpress/editor 12.17.0 → 12.17.1-next.4d3b314fd5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.17.0",
+	"version": "12.17.1-next.4d3b314fd5.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.18.1-next.4d3b314fd5.0",
+		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
+		"@wordpress/blob": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/block-editor": "^10.1.1-next.4d3b314fd5.0",
+		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
+		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
+		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/core-data": "^5.1.1-next.4d3b314fd5.0",
+		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
+		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
+		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/media-utils": "^4.9.1-next.4d3b314fd5.0",
+		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/preferences": "^2.10.1-next.4d3b314fd5.0",
+		"@wordpress/reusable-blocks": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/server-side-render": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
+		"@wordpress/wordcount": "^3.18.1-next.4d3b314fd5.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
 }

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)>
-`;