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(); + }); });