+
+
+
+ My Awesome Post
+
+
+ 
+
+
+ Guy Fieri
+
+
+
+
+
+
My Awesome Post! Not very long, but still very awesome.↵↵",
+ }
+ }
+ style={
+ Object {
+ "width": "90%",
+ }
+ }
+ />
+
+`;
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('
', () => {
- let previewResponse;
- let articleState;
+let previewResponse;
+let articleState;
+describe('
', () => {
+ const version = 'v1';
beforeEach(() => {
previewResponse = {
processed_html:
@@ -40,33 +41,22 @@ describe('
', () => {
};
});
- it('v1: renders properly', () => {
+ it('renders properly with an image', () => {
const tree = render(
,
);
expect(tree).toMatchSnapshot();
});
- it('v2: renders properly', () => {
- const tree = render(
-
,
- );
- 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(
,
);
@@ -75,39 +65,96 @@ describe('
', () => {
);
});
- 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(
+
,
+ );
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('does not show an image in preview if one does not exist', () => {
previewResponse.cover_image = null;
const container = shallow(
,
- );
- expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
- false,
- );
- });
-
- it('v2: shows a cover image in preview if one exists', () => {
- const container = shallow(
-
,
- );
- 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(
-
,
+ );
+ expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
+ false,
+ );
+ });
+});
+
+describe('
', () => {
+ const version = 'v2';
+ beforeEach(() => {
+ previewResponse = {
+ processed_html:
+ '
My Awesome Post! Not very long, but still very awesome.
↵↵',
+ };
+
+ 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(
+
,
+ );
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('shows an image in preview if one exists', () => {
+ const container = shallow(
+
,
+ );
+ expect(container.find('.articleform__mainimagepreview').exists()).toEqual(
+ true,
+ );
+ });
+
+ it('renders properly without an image', () => {
+ articleState.mainImage = null;
+ const tree = render(
+
,
+ );
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('does not show an image in preview if one does not exist', () => {
+ articleState.mainImage = null;
+ const container = shallow(
+
,
);
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 || '';