From f0b892e701d57437767b887de69256de493793fb Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Wed, 4 Dec 2019 14:17:37 +1100
Subject: [PATCH] Updated unit tests.

---
 .../components/post-preview-button/index.js   |   3 +-
 .../test/__snapshots__/index.js.snap          | 138 ++++++++++++++----
 .../post-preview-button/test/index.js         |  95 +++++++-----
 3 files changed, 162 insertions(+), 74 deletions(-)

diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 0d75381af2c9b..8913aa4e1c213 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -190,7 +190,6 @@ export class PostPreviewButton extends Component {
 							className="editor-block-preview__new-tab"
 							href={ href }
 							target={ this.getWindowTarget() }
-							disabled={ ! isSaveable }
 							onClick={ this.openPreviewInNewTab }
 						>
 							{ _x( 'Open preview in new tab', 'imperative verb' ) }
@@ -200,7 +199,7 @@ export class PostPreviewButton extends Component {
 						<iframe
 							className="editor-block-preview__frame"
 							title={ __( 'Responsive preview frame' ) }
-							src={ previewLink }
+							src={ href }
 							style={
 								{
 									width: this.state.previewSize.width,
diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
index 587f30bf8a91b..d40c9abe2272d 100644
--- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
@@ -1,37 +1,111 @@
 // 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"
-  isLarge={true}
-  onClick={[Function]}
-  target="wp-preview-1"
->
-  Preview
-  <span
-    className="screen-reader-text"
+exports[`PostPreviewButton render() should render overlay when state is open 1`] = `
+<Fragment>
+  <ForwardRef(Button)
+    className="editor-post-preview"
+    disabled={true}
+    isLarge={true}
+    onClick={[Function]}
   >
-    (opens in a new tab)
-  </span>
-</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"
-  isLarge={true}
-  onClick={[Function]}
-  target="wp-preview-1"
->
-  Preview
-  <span
-    className="screen-reader-text"
+    Preview
+    <WithSelect(WithDispatch(DotTip))
+      tipId="core/editor.preview"
+    >
+      Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.
+    </WithSelect(WithDispatch(DotTip))>
+  </ForwardRef(Button)>
+  <WithInstanceId(Modal)
+    className="editor-block-preview"
+    onRequestClose={[Function]}
+    shouldCloseOnClickOutside={false}
+    title="Preview"
   >
-    (opens in a new tab)
-  </span>
-</ForwardRef(Button)>
+    <div
+      className="editor-block-preview__controls"
+    >
+      <ForwardRef(IconButton)
+        icon={
+          <SVG
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <Path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <Path
+              d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"
+            />
+          </SVG>
+        }
+        label="Preview desktop screen"
+        onClick={[Function]}
+      />
+      <ForwardRef(IconButton)
+        icon={
+          <SVG
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <Path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <Path
+              d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z"
+            />
+          </SVG>
+        }
+        label="Preview tablet screen"
+        onClick={[Function]}
+      />
+      <ForwardRef(IconButton)
+        icon={
+          <SVG
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <Path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <Path
+              d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"
+            />
+          </SVG>
+        }
+        label="Preview phone screen"
+        onClick={[Function]}
+      />
+      <ForwardRef(Button)
+        className="editor-block-preview__new-tab"
+        href="https://wordpress.org/?p=1"
+        isLarge={true}
+        onClick={[Function]}
+        target="wp-preview-1"
+      >
+        Open preview in new tab
+      </ForwardRef(Button)>
+    </div>
+    <div
+      className="editor-block-preview__frame-container"
+    >
+      <iframe
+        className="editor-block-preview__frame"
+        src="https://wordpress.org/?p=1"
+        style={
+          Object {
+            "height": "800px",
+            "width": "1200px",
+          }
+        }
+        title="Responsive preview frame"
+      />
+    </div>
+  </WithInstanceId(Modal)>
+</Fragment>
 `;
diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
index 7bd9856de05c7..89afee868ea0b 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -71,7 +71,40 @@ describe( 'PostPreviewButton', () => {
 		} );
 	} );
 
-	describe( 'openPreviewWindow()', () => {
+	describe( 'openPreviewOverlay()', () => {
+		it( 'behaves like a regular link if not autosaveable', () => {
+			const autosave = jest.fn();
+
+			const wrapper = shallow(
+				<PostPreviewButton
+					postId={ 1 }
+					autosave={ autosave }
+				/>
+			);
+
+			wrapper.instance().openPreviewOverlay();
+
+			expect( autosave ).not.toHaveBeenCalled();
+		} );
+
+		it( 'autosaves the post if autosaveable', () => {
+			const autosave = jest.fn();
+
+			const wrapper = shallow(
+				<PostPreviewButton
+					postId={ 1 }
+					autosave={ autosave }
+					isAutosaveable
+				/>
+			);
+
+			wrapper.instance().openPreviewOverlay();
+
+			expect( autosave ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'openPreviewInNewTab()', () => {
 		let windowOpen;
 		beforeEach( () => {
 			windowOpen = window.open;
@@ -80,9 +113,8 @@ describe( 'PostPreviewButton', () => {
 			window.open = windowOpen;
 		} );
 
-		it( 'behaves like a regular link if not autosaveable', () => {
+		it( 'opens preview in new tab', () => {
 			const preventDefault = jest.fn();
-			const autosave = jest.fn();
 			const setLocation = jest.fn();
 			window.open = jest.fn( () => ( {
 				focus: jest.fn(),
@@ -94,65 +126,47 @@ describe( 'PostPreviewButton', () => {
 			const wrapper = shallow(
 				<PostPreviewButton
 					postId={ 1 }
-					autosave={ autosave }
 				/>
 			);
 
-			wrapper.simulate( 'click', {
+			wrapper.instance().openPreviewInNewTab( {
 				preventDefault,
 				target: { href: 'https://wordpress.org/?p=1' },
 			} );
 
 			expect( preventDefault ).toHaveBeenCalled();
-			expect( window.open ).toHaveBeenCalledWith( '', 'wp-preview-1' );
+			expect( window.open ).toHaveBeenCalledWith( '', '_blank' );
 			expect( wrapper.instance().previewWindow.focus ).toHaveBeenCalled();
-			expect( autosave ).not.toHaveBeenCalled();
 			expect( setLocation ).toHaveBeenCalledWith( 'https://wordpress.org/?p=1' );
 		} );
+	} );
 
-		it( 'autosaves the post if autosaveable', () => {
-			const preventDefault = jest.fn();
-			const autosave = jest.fn();
-
-			window.open = jest.fn( () => ( {
-				focus: jest.fn(),
-				document: {
-					write: jest.fn(),
-					close: jest.fn(),
-				},
-			} ) );
-
+	describe( 'render()', () => {
+		const previewLink = 'https://wordpress.org/?p=1&preview=true';
+		const currentPostLink = 'https://wordpress.org/?p=1';
+		it( 'should render overlay when state is open', () => {
 			const wrapper = shallow(
 				<PostPreviewButton
 					postId={ 1 }
-					autosave={ autosave }
-					isAutosaveable
+					currentPostLink={ currentPostLink }
 				/>
-			);
-
-			wrapper.simulate( 'click', { preventDefault } );
+			).setState( { isPreviewOpen: true } );
 
-			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( wrapper ).toMatchSnapshot();
 		} );
-	} );
 
-	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"
+					previewLink={ previewLink }
+					currentPostLink={ currentPostLink }
 				/>
-			);
+			).setState( { isPreviewOpen: true } );
 
-			expect( wrapper ).toMatchSnapshot();
+			const frameSrc = wrapper.find( '.editor-block-preview__frame' ).prop( 'src' );
+			expect( frameSrc ).toEqual( previewLink );
 		} );
 
 		it( 'should render currentPostLink otherwise', () => {
@@ -160,11 +174,12 @@ describe( 'PostPreviewButton', () => {
 				<PostPreviewButton
 					postId={ 1 }
 					isSaveable
-					currentPostLink="https://wordpress.org/?p=1"
+					currentPostLink={ currentPostLink }
 				/>
-			);
+			).setState( { isPreviewOpen: true } );
 
-			expect( wrapper ).toMatchSnapshot();
+			const frameSrc = wrapper.find( '.editor-block-preview__frame' ).prop( 'src' );
+			expect( frameSrc ).toEqual( currentPostLink );
 		} );
 
 		it( 'should be disabled if post is not saveable', () => {
@@ -173,7 +188,7 @@ describe( 'PostPreviewButton', () => {
 					postId={ 1 }
 					currentPostLink="https://wordpress.org/?p=1"
 				/>
-			);
+			).find( '.editor-post-preview' );
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );