diff --git a/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap b/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap index 235e0a782..31f7edf48 100644 --- a/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap +++ b/app/components/progressive_image/__snapshots__/progressive_image.test.js.snap @@ -1,12 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ProgressiveImage should match snapshot when just a image loads 1`] = ` - -`; - -exports[`ProgressiveImage should match snapshot when no thumbnail 1`] = ` +exports[`ProgressiveImage should match snapshot 1`] = ` diff --git a/app/components/progressive_image/progressive_image.test.js b/app/components/progressive_image/progressive_image.test.js index 6d51700cc..e6df42227 100644 --- a/app/components/progressive_image/progressive_image.test.js +++ b/app/components/progressive_image/progressive_image.test.js @@ -8,6 +8,8 @@ import Preferences from 'mattermost-redux/constants/preferences'; import ProgressiveImage from './progressive_image'; +jest.useFakeTimers(); + describe('ProgressiveImage', () => { const baseProps = { isBackgroundImage: false, @@ -22,22 +24,61 @@ describe('ProgressiveImage', () => { tintDefaultSource: false, }; - test('should match snapshot when just a image loads', () => { - const wrapper = shallow( - - ); + test('should match snapshot', () => { + const wrapper = shallow(); expect(wrapper.getElement()).toMatchSnapshot(); }); - test('should match snapshot when no thumbnail', () => { - const props = { - ...baseProps, - thumbnailUri: null, - }; + test('should load image', () => { + const wrapper = shallow(); + const instance = wrapper.instance(); + jest.spyOn(instance, 'load'); + // should load image on componentDidMount + instance.componentDidMount(); + expect(instance.load).toHaveBeenCalledTimes(1); + + // should not re-load image on componentDidUpdate with same props + instance.componentDidUpdate(baseProps); + expect(instance.load).toHaveBeenCalledTimes(1); + + // should re-load image on componentDidUpdate when props changed + wrapper.setProps({filename: 'newImage'}); + expect(instance.load).toHaveBeenCalledTimes(2); + + wrapper.setProps({imageUri: 'https://images.com/new_image.png'}); + expect(instance.load).toHaveBeenCalledTimes(3); + + wrapper.setProps({thumbnailUri: 'https://images.com/new_image.png'}); + expect(instance.load).toHaveBeenCalledTimes(4); + }); + + test('should set image when imageUri is set but not the thumbnailUri', () => { const wrapper = shallow( - + ); - expect(wrapper.getElement()).toMatchSnapshot(); + const instance = wrapper.instance(); + jest.spyOn(instance, 'setImage'); + + instance.componentDidMount(); + jest.runAllTimers(); + expect(instance.setImage).toHaveBeenCalledTimes(1); + }); + + test('should set thumbnail when thumbnailUri is set', () => { + const wrapper = shallow( + + ); + const instance = wrapper.instance(); + jest.spyOn(instance, 'setThumbnail'); + + jest.runAllTimers(); + expect(instance.setThumbnail).toHaveBeenCalledTimes(1); }); }); \ No newline at end of file