diff --git a/app/components/post_body_additional_content/post_body_additional_content.js b/app/components/post_body_additional_content/post_body_additional_content.js
index 9968f5b8e..0b0e36348 100644
--- a/app/components/post_body_additional_content/post_body_additional_content.js
+++ b/app/components/post_body_additional_content/post_body_additional_content.js
@@ -166,7 +166,8 @@ export default class PostBodyAdditionalContent extends ImageViewPort {
imageUrl = link;
} else if (isYoutubeLink(link)) {
const videoId = getYouTubeVideoId(link);
- imageUrl = Object.keys(this.props.metadata.images)[0] || `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+ const images = Object.keys(this.props.metadata?.images || {});
+ imageUrl = images[0] || `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
}
return imageUrl;
diff --git a/app/components/post_body_additional_content/post_body_additional_content.test.js b/app/components/post_body_additional_content/post_body_additional_content.test.js
index b296f790c..ee051854e 100644
--- a/app/components/post_body_additional_content/post_body_additional_content.test.js
+++ b/app/components/post_body_additional_content/post_body_additional_content.test.js
@@ -7,6 +7,7 @@ import {Preferences} from '@mm-redux/constants';
import {shallowWithIntl} from 'test/intl-test-helper';
+import * as Utils from '@utils/url';
import PostBodyAdditionalContent from './post_body_additional_content.js';
describe('PostBodyAdditionalContent', () => {
@@ -49,4 +50,56 @@ describe('PostBodyAdditionalContent', () => {
instance.load();
expect(baseProps.actions.getRedirectLocation).toHaveBeenCalledTimes(1);
});
+
+ test('getImageUrl should return passed URL if content is an image', () => {
+ const wrapper = shallowWithIntl();
+ const instance = wrapper.instance();
+ instance.isImage = jest.fn().mockReturnValueOnce(true);
+
+ const url = 'https://test.url';
+ const imageUrl = instance.getImageUrl(url);
+ expect(imageUrl).toEqual(url);
+ });
+
+ test('getImageUrl should return first metadata image URL if content is a YouTube link', () => {
+ const url1 = 'https://test.url1';
+ const url2 = 'https://test.url2';
+ const props = {
+ ...baseProps,
+ metadata: {
+ images: {
+ [url1]: 'URL 1',
+ [url2]: 'URL 2',
+ },
+ },
+ };
+ const wrapper = shallowWithIntl();
+ const instance = wrapper.instance();
+ instance.isImage = jest.fn().mockReturnValueOnce(false);
+ Utils.isYoutubeLink = jest.fn().mockReturnValueOnce(true); // eslint-disable-line no-import-assign
+
+ const imageUrl = instance.getImageUrl();
+ expect(imageUrl).toEqual(url1);
+ });
+
+ test('getImageUrl should return default URL if content is a YouTube link and there is no image metadata', () => {
+ const wrapper = shallowWithIntl();
+ const instance = wrapper.instance();
+ instance.isImage = jest.fn().mockReturnValueOnce(false);
+ Utils.isYoutubeLink = jest.fn().mockReturnValueOnce(true); // eslint-disable-line no-import-assign
+ Utils.getYouTubeVideoId = jest.fn().mockReturnValueOnce('videoId'); // eslint-disable-line no-import-assign
+
+ const imageUrl = instance.getImageUrl();
+ expect(imageUrl).toEqual('https://i.ytimg.com/vi/videoId/hqdefault.jpg');
+ });
+
+ test('getImageUrl should return undefined if content is not an image nor a YouTube link', () => {
+ const wrapper = shallowWithIntl();
+ const instance = wrapper.instance();
+ instance.isImage = jest.fn().mockReturnValueOnce(false);
+ Utils.isYoutubeLink = jest.fn().mockReturnValueOnce(false); // eslint-disable-line no-import-assign
+
+ const imageUrl = instance.getImageUrl();
+ expect(imageUrl).toBeUndefined();
+ });
});