From db3e6128acb5dcae039d20e05204be90d192e63b Mon Sep 17 00:00:00 2001
From: Vaidehi Joshi <vaidehi.sj@gmail.com>
Date: Mon, 3 Feb 2020 16:58:11 -0500
Subject: [PATCH] Render main image in article preview for v2 editor (#5873)
 [deploy]

Previewing a main image on an article was broken in v2 of the editor :(
We had some tests for this (which I wrote), but the setup for the tests weren't quite right!
This commit fixes the bug, and also refactors and cleans up our tests quite a bit.
Also adds some snapshots for both v1 and v2 editors in a "no image" preview state.
---
 .../__snapshots__/bodyPreview.test.jsx.snap   | 120 ++++++++++++++-
 .../elements/__tests__/bodyPreview.test.jsx   | 141 ++++++++++++------
 .../article-form/elements/bodyPreview.jsx     |   5 +-
 3 files changed, 213 insertions(+), 53 deletions(-)

diff --git a/app/javascript/article-form/elements/__tests__/__snapshots__/bodyPreview.test.jsx.snap b/app/javascript/article-form/elements/__tests__/__snapshots__/bodyPreview.test.jsx.snap
index 5c8986c97..0c1b2a0dc 100644
--- a/app/javascript/article-form/elements/__tests__/__snapshots__/bodyPreview.test.jsx.snap
+++ b/app/javascript/article-form/elements/__tests__/__snapshots__/bodyPreview.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<bodyPreview /> v1: renders properly 1`] = `
+exports[`<bodyPreview version="v1" /> renders properly with an image 1`] = `
 <div
   class="container"
   style={
@@ -66,7 +66,65 @@ exports[`<bodyPreview /> v1: renders properly 1`] = `
 </div>
 `;
 
-exports[`<bodyPreview /> v2: renders properly 1`] = `
+exports[`<bodyPreview version="v1" /> renders properly without an image 1`] = `
+<div
+  class="container"
+  style={
+    Object {
+      "border": "0px",
+      "boxShadow": "0px 0px 0px #fff",
+      "marginTop": "10px",
+      "minHeight": "508px",
+      "overflow": "hidden",
+    }
+  }
+>
+  <div>
+    <div
+      class="title"
+      style={
+        Object {
+          "maxWidth": "1000px",
+          "width": "90%",
+        }
+      }
+    >
+      <h1>
+        My Awesome Post
+      </h1>
+      <h3>
+        <img
+          alt="profile"
+          class="profile-pic"
+          src="/uploads/user/profile_image/41/0841dbe2-208c-4daa-b498-b2f01f3d37b2.png"
+        />
+         
+        <span>
+          Guy Fieri
+        </span>
+      </h3>
+      <div
+        class="tags"
+      />
+    </div>
+  </div>
+  <div
+    class="body"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>My Awesome Post! Not very long, but still very awesome.</p>↵↵",
+      }
+    }
+    style={
+      Object {
+        "width": "90%",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`<bodyPreview version="v2" /> renders properly with an image 1`] = `
 <div
   class="container"
   style={
@@ -131,3 +189,61 @@ exports[`<bodyPreview /> v2: renders properly 1`] = `
   />
 </div>
 `;
+
+exports[`<bodyPreview version="v2" /> renders properly without an image 1`] = `
+<div
+  class="container"
+  style={
+    Object {
+      "border": "0px",
+      "boxShadow": "0px 0px 0px #fff",
+      "marginTop": "10px",
+      "minHeight": "508px",
+      "overflow": "hidden",
+    }
+  }
+>
+  <div>
+    <div
+      class="title"
+      style={
+        Object {
+          "maxWidth": "1000px",
+          "width": "90%",
+        }
+      }
+    >
+      <h1>
+        My Awesome Post
+      </h1>
+      <h3>
+        <img
+          alt="profile"
+          class="profile-pic"
+          src="/uploads/user/profile_image/41/0841dbe2-208c-4daa-b498-b2f01f3d37b2.png"
+        />
+         
+        <span>
+          Guy Fieri
+        </span>
+      </h3>
+      <div
+        class="tags"
+      />
+    </div>
+  </div>
+  <div
+    class="body"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>My Awesome Post! Not very long, but still very awesome.</p>↵↵",
+      }
+    }
+    style={
+      Object {
+        "width": "90%",
+      }
+    }
+  />
+</div>
+`;
diff --git a/app/javascript/article-form/elements/__tests__/bodyPreview.test.jsx b/app/javascript/article-form/elements/__tests__/bodyPreview.test.jsx
index 99406d2e6..d21427e13 100644
--- a/app/javascript/article-form/elements/__tests__/bodyPreview.test.jsx
+++ b/app/javascript/article-form/elements/__tests__/bodyPreview.test.jsx
@@ -15,10 +15,11 @@ global.window.currentUser = {
     '/uploads/user/profile_image/41/0841dbe2-208c-4daa-b498-b2f01f3d37b2.png',
 };
 
-describe('<bodyPreview />', () => {
-  let previewResponse;
-  let articleState;
+let previewResponse;
+let articleState;
 
+describe('<bodyPreview version="v1" />', () => {
+  const version = 'v1';
   beforeEach(() => {
     previewResponse = {
       processed_html:
@@ -40,33 +41,22 @@ describe('<bodyPreview />', () => {
     };
   });
 
-  it('v1: renders properly', () => {
+  it('renders properly with an image', () => {
     const tree = render(
       <BodyPreview
         previewResponse={previewResponse}
-        version="v1"
+        version={version}
         articleState={articleState}
       />,
     );
     expect(tree).toMatchSnapshot();
   });
 
-  it('v2: renders properly', () => {
-    const tree = render(
-      <BodyPreview
-        previewResponse={previewResponse}
-        version="v2"
-        articleState={articleState}
-      />,
-    );
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('v1: shows a cover image in preview if one exists', () => {
+  it('shows an image in preview if one exists', () => {
     const container = shallow(
       <BodyPreview
         previewResponse={previewResponse}
-        version="v1"
+        version={version}
         articleState={articleState}
       />,
     );
@@ -75,39 +65,96 @@ describe('<bodyPreview />', () => {
     );
   });
 
-  it('v1: does not show a cover image in preview if one does not exist', () => {
+  it('renders properly without an image', () => {
+    previewResponse.cover_image = null;
+    const tree = render(
+      <BodyPreview
+        previewResponse={previewResponse}
+        version={version}
+        articleState={articleState}
+      />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('does not show an image in preview if one does not exist', () => {
     previewResponse.cover_image = null;
     const container = shallow(
       <BodyPreview
         previewResponse={previewResponse}
-        version="v1"
-        articleState={articleState}
-      />,
-    );
-    expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
-      false,
-    );
-  });
-
-  it('v2: shows a cover image in preview if one exists', () => {
-    const container = shallow(
-      <BodyPreview
-        previewResponse={previewResponse}
-        version="v2"
-        articleState={articleState}
-      />,
-    );
-    expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
-      true,
-    );
-  });
-
-  it('v2: does not show a cover image in preview if one does not exist', () => {
-    previewResponse.cover_image = null;
-    const container = shallow(
-      <BodyPreview
-        previewResponse={previewResponse}
-        version="v2"
+        version={version}
+        articleState={articleState}
+      />,
+    );
+    expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
+      false,
+    );
+  });
+});
+
+describe('<bodyPreview version="v2" />', () => {
+  const version = 'v2';
+  beforeEach(() => {
+    previewResponse = {
+      processed_html:
+        '<p>My Awesome Post! Not very long, but still very awesome.</p>↵↵',
+    };
+
+    articleState = {
+      id: 1,
+      title: 'My Awesome Post',
+      tagList: '',
+      bodyMarkdown:
+        '---↵title: My Awesome Post↵published: false↵description: ↵tags: ↵---↵↵My Awesome Post Not very long, but still very awesome! ↵',
+      mainImage: 'http://lorempixel.com/400/200/',
+      published: false,
+      previewShowing: true,
+      previewResponse,
+    };
+  });
+
+  it('renders properly with an image', () => {
+    const tree = render(
+      <BodyPreview
+        previewResponse={previewResponse}
+        version={version}
+        articleState={articleState}
+      />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('shows an image in preview if one exists', () => {
+    const container = shallow(
+      <BodyPreview
+        previewResponse={previewResponse}
+        version={version}
+        articleState={articleState}
+      />,
+    );
+    expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
+      true,
+    );
+  });
+
+  it('renders properly without an image', () => {
+    articleState.mainImage = null;
+    const tree = render(
+      <BodyPreview
+        previewResponse={previewResponse}
+        version={version}
+        articleState={articleState}
+      />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('does not show an image in preview if one does not exist', () => {
+    articleState.mainImage = null;
+    const container = shallow(
+      <BodyPreview
+        previewResponse={previewResponse}
+        version={version}
         articleState={articleState}
       />,
     );
diff --git a/app/javascript/article-form/elements/bodyPreview.jsx b/app/javascript/article-form/elements/bodyPreview.jsx
index 29b5045c5..a85c8717e 100644
--- a/app/javascript/article-form/elements/bodyPreview.jsx
+++ b/app/javascript/article-form/elements/bodyPreview.jsx
@@ -29,15 +29,12 @@ function titleArea(previewResponse, version, articleState) {
     });
   }
 
-  let coverImage = '';
+  let coverImage = articleState.mainImage || '';
   if (articleState.previewShowing) {
     // In preview state, use the cover_image from previewResponse.
     if (previewResponse.cover_image && previewResponse.cover_image.length > 0) {
       coverImage = previewResponse.cover_image;
     }
-  } else if (articleState.mainImage) {
-    // Otherwise, use the mainImage from the article if it exists.
-    coverImage = articleState.mainImage;
   }
 
   const previewTitle = previewResponse.title || articleState.title || '';