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.
This commit is contained in:
Vaidehi Joshi
GitHub
parent
e579914b1a
commit
db3e6128ac
3 changed files with 213 additions and 53 deletions
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 || '';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue