Add tests for delay prop

Author: brybrophy

__tests__/index.js

@@ -1,25 +1,26 @@
-import "raf/polyfill";
-import React from "react";
-import { configure, mount } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-import ProgressiveImage from "../src";
+import 'raf/polyfill';
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import ProgressiveImage from '../src';
 
 configure({ adapter: new Adapter() });
 
-const src = "https://image.xyz/source";
-const placeholder = "https://image.xyz/placeholder";
+const src = 'https://image.xyz/source';
+const placeholder = 'https://image.xyz/placeholder';
 const srcSetData = {
-  srcSet: "srcSet",
-  sizes: "sizes"
+  srcSet: 'srcSet',
+  sizes: 'sizes'
 };
 
-const mountProgressiveImage = renderFn => {
+const mountProgressiveImage = (renderFn, delay) => {
   const defaultRender = image => {
     return <img src={image} />;
   };
   const render = renderFn || defaultRender;
   return mount(
     <ProgressiveImage
+      delay={delay}
       src={src}
       placeholder={placeholder}
       srcSetData={srcSetData}
@@ -29,14 +30,14 @@ const mountProgressiveImage = renderFn => {
   );
 };
 
-describe("react-progressive-image", () => {
+describe('react-progressive-image', () => {
   beforeEach(() => {
     global.Image = Image;
   });
-  it("exports a React component", () => {
-    expect(typeof ProgressiveImage).toBe("function");
+  it('exports a React component', () => {
+    expect(typeof ProgressiveImage).toBe('function');
   });
-  it("throws if not provided a function as a child", () => {
+  it('throws if not provided a function as a child', () => {
     /* eslint-disable no-console */
     const _error = console.error;
     console.error = jest.fn(() => {});
@@ -53,54 +54,72 @@ describe("react-progressive-image", () => {
     }
     /* eslint-enable no-console */
   });
-  it("creates an instance of Image when mounted", () => {
+  it('creates an instance of Image when mounted', () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.constructor).toBe(HTMLImageElement);
   });
-  it("sets the onload property on the Image instance", () => {
+  it('sets the onload property on the Image instance', () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.onload).toEqual(instance.onLoad);
   });
-  it("sets the onerror property on the Image instance", () => {
+  it('sets the onerror property on the Image instance', () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.onerror).toEqual(instance.onError);
   });
-  it("sets the src property on the Image instance", () => {
+  it('sets the src property on the Image instance', () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.src).toEqual(src);
   });
-  it("sets the srcSet property on the Image instance", () => {
+  it('sets the srcSet property on the Image instance', () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.srcset).toEqual(srcSetData.srcSet);
   });
-  it("sets the sizes property on the Image instance", () => {
+  it('sets the sizes property on the Image instance', () => {
     const wrapper = mountProgressiveImage();
     const instance = wrapper.instance();
     expect(instance.image.sizes).toEqual(srcSetData.sizes);
   });
-  it("renders placeholder image on initial render", () => {
+  it('renders placeholder image on initial render', () => {
     const render = jest.fn(src => <img src={src} alt="an image" />);
     const wrapper = mountProgressiveImage(render);
     expect(render.mock.calls[0][0]).toEqual(placeholder);
   });
-  it("renders src image on second render", () => {
+  it('renders src image on second render', () => {
     const render = jest.fn(src => <img src={src} alt="an image" />);
     const wrapper = mountProgressiveImage(render);
     wrapper.instance().loadImage(src);
     wrapper.instance().onLoad();
     expect(render.mock.calls[1][0]).toEqual(src);
   });
-  it("sets loading to false after src image is loaded", () => {
+  it('sets loading to false after src image is loaded', () => {
     const render = jest.fn(src => <img src={src} alt="an image" />);
     const wrapper = mountProgressiveImage(render);
     expect(render.mock.calls[0][1]).toEqual(true);
     wrapper.instance().loadImage(src);
     wrapper.instance().onLoad();
     expect(render.mock.calls[1][1]).toEqual(false);
   });
+  it('does not immediately set image if delay prop exists', () => {
+    const delay = 3000;
+    const render = jest.fn(src => <img src={src} alt="an image" />);
+    const wrapper = mountProgressiveImage(render, delay);
+    wrapper.instance().loadImage(src);
+    wrapper.instance().onLoad();
+    expect(wrapper.instance().state.image).toEqual(placeholder);
+  });
+  it('sets image after delay passes if delay prop exists', () => {
+    const delay = 3000;
+    const render = jest.fn(src => <img src={src} alt="an image" />);
+    const wrapper = mountProgressiveImage(render, delay);
+    wrapper.instance().loadImage(src);
+    wrapper.instance().onLoad();
+    setTimeout(() => {
+      expect(wrapper.instance().state.image).toEqual(src);
+    }, delay + 1);
+  });
 });

demo/inline.js

@@ -1,18 +1,18 @@
 module.exports = {
   mode: 'development',
   context: __dirname,
-  entry: [
-    './app.js'
-  ],
+  entry: ['./app.js'],
   output: {
     path: __dirname,
     filename: 'bundle.js'
   },
   module: {
-    rules: [{
-      test: /\.js$/,
-      exclude: /node_modules/,
-      loader: 'babel-loader'
-    }]
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }
+    ]
   }
 };

demo/webpack.config.js

@@ -79,16 +79,29 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     // avoid the possibility of props being updated and the
     // new image loading before the new props are available as
     // this.props.
+
+    if (this.props.delay) {
+      this.setImageWithDelay();
+    } else {
+      this.setImage();
+    }
+  };
+
+  setImageWithDelay = () => {
     setTimeout(() => {
-      this.setState({
-        image: this.image.src,
-        loading: false,
-        srcSetData: {
-          srcSet: this.image.srcset || '',
-          sizes: this.image.sizes || ''
-        }
-      });
-    }, this.props.delay || 0);
+      this.setImage();
+    }, this.props.delay);
+  };
+
+  setImage = () => {
+    this.setState({
+      image: this.image.src,
+      loading: false,
+      srcSetData: {
+        srcSet: this.image.srcset || '',
+        sizes: this.image.sizes || ''
+      }
+    });
   };
 
   onError = (errorEvent: Event) => {