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