toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-34681 Validate OpenGraph Image before attempting to load (#5294) (#5299)

Browse source 
(cherry picked from commit 5156480220)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
This commit is contained in:
Mattermost Build 2021-04-10 17:56:47 +02:00 committed by GitHub
parent 95e0e45fc7
commit f0fb2abba4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap
View file

@ -298,3 +298,77 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
</TouchableWithFeedbackIOS>
</View>
`;
exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage 3`] = `
<View
style={
Object {
"borderColor": "rgba(61,60,64,0.2)",
"borderRadius": 3,
"borderWidth": 1,
"flex": 1,
"marginTop": 10,
"padding": 10,
}
}
>
<View
style={
Object {
"flex": 1,
}
}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "rgba(61,60,64,0.5)",
"fontSize": 12,
"marginBottom": 10,
}
}
>
Mattermost
</Text>
</View>
<View
style={
Object {
"flex": 1,
"flexDirection": "row",
}
}
>
<TouchableWithFeedbackIOS
onPress={[Function]}
style={
Object {
"flex": 1,
}
}
type="opacity"
>
<Text
ellipsizeMode="tail"
numberOfLines={3}
style={
Array [
Object {
"color": "#2389d7",
"fontSize": 14,
"marginBottom": 10,
},
Object {
"marginRight": 0,
},
]
}
>
Title
</Text>
</TouchableWithFeedbackIOS>
</View>
</View>
`;

4
app/components/post_attachment_opengraph/post_attachment_opengraph.js
View file

@ -15,7 +15,7 @@ import {generateId} from '@utils/file';
import {openGalleryAtIndex, calculateDimensions} from '@utils/images';
import {getNearestPoint} from '@utils/opengraph';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {tryOpenURL} from '@utils/url';
import {tryOpenURL, isValidUrl} from '@utils/url';
const MAX_IMAGE_HEIGHT = 150;
const VIEWPORT_IMAGE_OFFSET = 93;
@ -93,7 +93,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
}
return {
hasImage: true,
hasImage: Boolean(isValidUrl(imageUrl) && (ogImage.width && ogImage.height)),
...dimensions,
openGraphImageUrl: imageUrl,
};

16
app/components/post_attachment_opengraph/post_attachment_opengraph.test.js
View file

@ -104,6 +104,22 @@ describe('PostAttachmentOpenGraph', () => {
expect(wrapper.find(TouchableWithFeedback).exists()).toEqual(true);
});
test('should match state and snapshot, on renderImage', () => {
const images = [{height: 440, width: 1200, url: '%REACT_APP_WEBSITE_BANNER%'}];
const openGraphDataWithImage = {...openGraphData, images};
const wrapper = shallow(
<PostAttachmentOpenGraph
{...baseProps}
openGraphData={openGraphDataWithImage}
/>,
);
expect(wrapper.getElement()).toMatchSnapshot();
expect(wrapper.state('hasImage')).toEqual(false);
expect(wrapper.find(FastImage).exists()).toEqual(false);
expect(wrapper.find(TouchableWithFeedback).exists()).toEqual(true);
});
test('should match state and snapshot, on renderDescription', () => {
const wrapper = shallow(
<PostAttachmentOpenGraph