From 98ed478a5340b605aa04fc6a0d0c83989c6da875 Mon Sep 17 00:00:00 2001
From: nikniv <niveditn@gmail.com>
Date: Wed, 28 Oct 2020 23:53:31 +0530
Subject: [PATCH 1/5] lqip and lazyload coverage

---
 package-lock.json                          |   2 +-
 package.json                               |   5 +-
 src/test/IKImage.test.js                   | 173 ++++++++++++++++++---
 src/test/mocks/IntersectionObserverMock.js |  40 +++++
 4 files changed, 196 insertions(+), 24 deletions(-)
 create mode 100644 src/test/mocks/IntersectionObserverMock.js

diff --git a/package-lock.json b/package-lock.json
index 3c74f8d..3e09ad1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8523446..1701ba0 100755
--- a/package.json
+++ b/package.json
@@ -25,6 +25,9 @@
     "verbose": true,
     "setupFilesAfterEnv": [
       "<rootDir>/src/test/setupTests.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/src/test/mocks"
     ]
   },
   "author": "ImageKit",
@@ -65,4 +68,4 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/test/IKImage.test.js b/src/test/IKImage.test.js
index 3ee856d..64184c1 100644
--- a/src/test/IKImage.test.js
+++ b/src/test/IKImage.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 import IKImage from '../components/IKImage';
+import IntersectionObserverMock from './mocks/IntersectionObserverMock';
 
 const urlEndpoint = 'http://ik.imagekit.io/test_imagekit_id';
 const relativePath = 'default-image.jpg';
@@ -14,7 +15,7 @@ describe('IKImage', () => {
     describe('Absolute image path', () => {
       test("src with alt attribute", () => {
         const ikImage = shallow(<IKImage urlEndpoint={urlEndpoint} src={absolutePath} alt={'some text here'} />);
-        
+
         expect(ikImage.find('img').prop('src')).toEqual(`${absolutePath}?${global.SDK_VERSION}`);
         expect(ikImage.find('img').prop('alt')).toEqual('some text here');
 
@@ -28,7 +29,7 @@ describe('IKImage', () => {
             queryParameters={{ version: 5, name: 'check' }}
           />
         );
-        
+
         const transformURL = `${absolutePathWithQuery}&${global.SDK_VERSION}&version=5&name=check`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -43,7 +44,7 @@ describe('IKImage', () => {
               width: 400
             }]} />
         );
-       
+
         const transformURL = `${absolutePath}?${global.SDK_VERSION}&tr=h-300%2Cw-400`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -52,7 +53,7 @@ describe('IKImage', () => {
         const ikImage = shallow(
           <IKImage urlEndpoint={urlEndpoint} lqip={{ active: true, quality: 20 }} src={absolutePath} id="lqip" />
         );
-        
+
         const transformURL = `${absolutePath}?${global.SDK_VERSION}&tr=q-20%2Cbl-6`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -70,7 +71,7 @@ describe('IKImage', () => {
             id="lqip"
           />
         );
-        
+
         const transformURL = `${absolutePath}?${global.SDK_VERSION}&tr=h-300%2Cw-400%3Aq-20%2Cbl-6`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -79,7 +80,7 @@ describe('IKImage', () => {
     describe('Relative image path', () => {
       test("path with alt attribute", () => {
         const ikImage = shallow(<IKImage urlEndpoint={urlEndpoint} path={relativePath} alt={'some text here'} />);
-        
+
         expect(ikImage.find('img').prop('src')).toEqual(`${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`);
         expect(ikImage.find('img').prop('alt')).toEqual('some text here');
       });
@@ -88,14 +89,14 @@ describe('IKImage', () => {
         const ikImage = shallow(
           <IKImage urlEndpoint={urlEndpoint} path={relativePath} queryParameters={{ version: 5, name: 'check' }} />
         );
-        
+
         const transformURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}&version=5&name=check`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
 
       test("path having leading slashes", () => {
         const ikImage = shallow(<IKImage urlEndpoint={urlEndpoint} path="////default-image.jpg" />);
-        
+
         expect(ikImage.find('img').prop('src')).toEqual(`${urlEndpoint}/default-image.jpg?${global.SDK_VERSION}`);
       });
 
@@ -103,7 +104,7 @@ describe('IKImage', () => {
         const ikImage = shallow(
           <IKImage urlEndpoint="http://ik.imagekit.io/test_imagekit_id////" path={relativePath} />
         );
-        
+
         expect(ikImage.find('img').prop('src')).toEqual(`http://ik.imagekit.io/test_imagekit_id/${relativePath}?${global.SDK_VERSION}`);
       });
 
@@ -111,7 +112,7 @@ describe('IKImage', () => {
         const ikImage = shallow(
           <IKImage urlEndpoint={urlEndpoint} lqip={{ active: true, quality: 20 }} path={relativePath} id="lqip" />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:q-20,bl-6/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
         expect(ikImage.find('img').prop('id')).toEqual('lqip');
@@ -124,7 +125,7 @@ describe('IKImage', () => {
             width: 400
           }]} />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:h-300,w-400/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -142,7 +143,7 @@ describe('IKImage', () => {
             id="lqip"
           />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:h-300,w-400:q-20,bl-6/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
         expect(ikImage.find('img').prop('id')).toEqual('lqip');
@@ -161,7 +162,7 @@ describe('IKImage', () => {
             id="lqip"
           />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:h-300,w-400:q-50,bl-25${nestedImagePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
         expect(ikImage.find('img').prop('id')).toEqual('lqip');
@@ -175,7 +176,7 @@ describe('IKImage', () => {
             height: 300
           }]} />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:h-300/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -187,7 +188,7 @@ describe('IKImage', () => {
             width: 400
           }]} transformationPosition="query" />
         );
-        
+
         const transformURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}&tr=h-300%2Cw-400`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -199,7 +200,7 @@ describe('IKImage', () => {
             width: 400
           }]} transformationPosition="path" />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:h-300,w-400/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -211,7 +212,7 @@ describe('IKImage', () => {
             width: 400
           }]} transformationPosition="path" />
         );
-        
+
         const transformURL = `${absolutePath}?${global.SDK_VERSION}&tr=h-300%2Cw-400`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -225,7 +226,7 @@ describe('IKImage', () => {
             'rotation': 90
           }]} />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:h-300,w-400:rt-90/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -236,7 +237,7 @@ describe('IKImage', () => {
             'foo': 'bar',
           }]} />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:foo-bar/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -248,7 +249,7 @@ describe('IKImage', () => {
             height: 300
           }]} />
         );
-        
+
         const transformURL = `${urlEndpoint}/tr:foo-bar,h-300/${relativePath}?${global.SDK_VERSION}`;
         expect(ikImage.find('img').prop('src')).toEqual(transformURL);
       });
@@ -257,6 +258,20 @@ describe('IKImage', () => {
 
   describe('Component lifecycle', () => {
     describe('Lazy loading', () => {
+      // spies
+      const observeSpy = sinon.spy();
+      let intersectionObserverSpy;
+
+      beforeEach(() => {
+        IntersectionObserverMock({ observe: observeSpy });
+        intersectionObserverSpy = sinon.spy(window, 'IntersectionObserver');
+      });
+
+      afterEach(() => {
+        intersectionObserverSpy.restore();
+        observeSpy.resetHistory();
+      });
+
       test('image should have empty src initially when marked for lazy loading', () => {
         const ikImage = mount(
           <IKImage
@@ -265,10 +280,35 @@ describe('IKImage', () => {
             loading="lazy"
           />
         );
-        
+
         expect(ikImage.find('img').prop('src')).toEqual('');
       });
 
+      test('image should have actual src when element is intersected', () => {
+        const ikImage = mount(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            loading="lazy"
+          />
+        );
+
+        // verify that src is blank initially
+        expect(ikImage.find('img').prop('src')).toEqual('');
+
+        // verify mocks were called
+        expect(observeSpy.calledOnce).toEqual(true);
+        expect(intersectionObserverSpy.calledOnce).toEqual(true);
+
+        // trigger element intersection callback
+        intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
+        // update wrapper
+        ikImage.update();
+
+        const lazyLoadedURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(lazyLoadedURL);
+      });
+
       test('intersection observer should disconnect when component unmounts', () => {
         const ikImage = shallow(
           <IKImage
@@ -292,5 +332,94 @@ describe('IKImage', () => {
         spy.restore();
       });
     });
-  });
+
+    describe('LQIP', () => {
+      // spies
+      const observeSpy = sinon.spy();
+      let intersectionObserverSpy;
+
+      let originalImageSrcProto;
+      let imageOnload = null;
+
+      const stubImagePrototype = () => {
+        Object.defineProperty(global.Image.prototype, 'onload', {
+          get: function () {
+            return this._onload;
+          },
+          set: function (fn) {
+            imageOnload = fn;
+            this._onload = fn;
+          },
+          configurable: true
+        });
+      };
+
+      beforeEach(() => {
+        IntersectionObserverMock({ observe: observeSpy });
+        intersectionObserverSpy = sinon.spy(window, 'IntersectionObserver');
+
+        // backup the original Image.prototype.src
+        originalImageSrcProto = Object.getOwnPropertyDescriptor(
+          global.Image.prototype,
+          'src'
+        );
+
+        stubImagePrototype();
+      });
+
+      afterEach(() => {
+        intersectionObserverSpy.restore();
+        observeSpy.resetHistory();
+
+        // restore the original Image.prototype.src
+        Object.defineProperty(global.Image.prototype, 'src', originalImageSrcProto);
+      });
+
+      test('image with lqip should have actual src when element is loaded', () => {
+        const ikImage = shallow(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            lqip={{ active: true }}
+          />
+        );
+
+        const initialURL = `${urlEndpoint}/tr:q-20,bl-6/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(initialURL);
+
+        imageOnload();
+
+        const expectedURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(expectedURL);
+      });
+
+      test('image with lqip and lazy loading should have actual src when element is intersected and loaded', () => {
+        const ikImage = mount(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            loading="lazy"
+            lqip={{ active: true }}
+          />
+        );
+
+        expect(observeSpy.calledOnce).toEqual(true);
+        expect(intersectionObserverSpy.calledOnce).toEqual(true);
+
+        // trigger element intersection callback
+        intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
+        ikImage.update();
+
+        const lazyLoadedURL = `${urlEndpoint}/tr:q-20,bl-6/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(lazyLoadedURL);
+
+        // simulate image onload
+        imageOnload();
+        ikImage.update();
+
+        const fullyLoadedURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(fullyLoadedURL);
+      });
+    });
+  })
 });
diff --git a/src/test/mocks/IntersectionObserverMock.js b/src/test/mocks/IntersectionObserverMock.js
new file mode 100644
index 0000000..cf726b4
--- /dev/null
+++ b/src/test/mocks/IntersectionObserverMock.js
@@ -0,0 +1,40 @@
+/**
+ * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
+ * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
+ * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the intersection observer, but its methods.
+ */
+export default function IntersectionObserverMock({
+  root = null,
+  rootMargin = '',
+  thresholds = [],
+  disconnect = () => null,
+  observe = () => null,
+  takeRecords = () => null,
+  unobserve = () => null,
+} = {}) {
+  class MockIntersectionObserver {
+    constructor() {
+      this.root = root;
+      this.rootMargin = rootMargin;
+      this.thresholds = thresholds;
+      this.disconnect = disconnect;
+      this.observe = observe;
+      this.takeRecords = takeRecords;
+      this.unobserve = unobserve;
+    }
+  }
+
+  Object.defineProperty(window, 'IntersectionObserver', {
+    writable: true,
+    configurable: true,
+    value: MockIntersectionObserver
+  });
+
+  Object.defineProperty(global, 'IntersectionObserver', {
+    writable: true,
+    configurable: true,
+    value: MockIntersectionObserver
+  });
+}

From 0385640c0421255d660b948a6955425a81bfb200 Mon Sep 17 00:00:00 2001
From: nikniv <niveditn@gmail.com>
Date: Thu, 29 Oct 2020 05:32:21 +0530
Subject: [PATCH 2/5] 100% coverage

---
 src/test/IKImage.test.js | 146 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 139 insertions(+), 7 deletions(-)

diff --git a/src/test/IKImage.test.js b/src/test/IKImage.test.js
index 64184c1..07b6c15 100644
--- a/src/test/IKImage.test.js
+++ b/src/test/IKImage.test.js
@@ -261,6 +261,29 @@ describe('IKImage', () => {
       // spies
       const observeSpy = sinon.spy();
       let intersectionObserverSpy;
+      let originalNavigatorPrototype;
+
+      const mockNavigator = (effectiveType = '4g') => {
+        // backup original connection value
+        originalNavigatorPrototype = Object.getOwnPropertyDescriptor(global.Navigator.prototype, 'connection');
+
+        // mock connection
+        Object.defineProperty(global.Navigator.prototype, 'connection', {
+          get: function () {
+            return { effectiveType };
+          },
+          configurable: true
+        });
+      };
+
+      const restoreNavigator = () => {
+        const navigatorConnection = originalNavigatorPrototype || {
+          get: function () { },
+          configurable: true
+        };
+
+        Object.defineProperty(global.Navigator.prototype, 'connection', navigatorConnection);
+      }
 
       beforeEach(() => {
         IntersectionObserverMock({ observe: observeSpy });
@@ -331,6 +354,72 @@ describe('IKImage', () => {
         expect(observerStub.observe.disconnect.called).toEqual(true);
         spy.restore();
       });
+
+      test('should set smaller threshold margin for fast connections', () => {
+        // mock fast network connection
+        mockNavigator('4g');
+
+        const ikImage = mount(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            loading="lazy"
+          />
+        );
+
+        // verify that src is blank initially
+        expect(ikImage.find('img').prop('src')).toEqual('')
+
+        // verify mocks were called
+        expect(observeSpy.calledOnce).toEqual(true);
+        expect(intersectionObserverSpy.calledOnce).toEqual(true);
+
+        // check rootMargin
+        expect(intersectionObserverSpy.args[0][1].rootMargin).toEqual('1250px 0px 1250px 0px')
+
+        // trigger element intersection callback
+        intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
+        // update wrapper
+        ikImage.update();
+
+        const lazyLoadedURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(lazyLoadedURL);
+
+        restoreNavigator();
+      });
+
+      test('should set larger threshold margin for slower connections', () => {
+        // mock slow network connection
+        mockNavigator('2g');
+
+        const ikImage = mount(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            loading="lazy"
+          />
+        );
+
+        // verify that src is blank initially
+        expect(ikImage.find('img').prop('src')).toEqual('')
+
+        // verify mocks were called
+        expect(observeSpy.calledOnce).toEqual(true);
+        expect(intersectionObserverSpy.calledOnce).toEqual(true);
+
+        // check rootMargin
+        expect(intersectionObserverSpy.args[0][1].rootMargin).toEqual('2500px 0px 2500px 0px')
+
+        // trigger element intersection callback
+        intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
+        // update wrapper
+        ikImage.update();
+
+        const lazyLoadedURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(lazyLoadedURL);
+
+        restoreNavigator();
+      });
     });
 
     describe('LQIP', () => {
@@ -338,7 +427,7 @@ describe('IKImage', () => {
       const observeSpy = sinon.spy();
       let intersectionObserverSpy;
 
-      let originalImageSrcProto;
+      let originalImagePrototype;
       let imageOnload = null;
 
       const stubImagePrototype = () => {
@@ -359,10 +448,7 @@ describe('IKImage', () => {
         intersectionObserverSpy = sinon.spy(window, 'IntersectionObserver');
 
         // backup the original Image.prototype.src
-        originalImageSrcProto = Object.getOwnPropertyDescriptor(
-          global.Image.prototype,
-          'src'
-        );
+        originalImagePrototype = Object.getOwnPropertyDescriptor(global.Image.prototype, 'src');
 
         stubImagePrototype();
       });
@@ -372,7 +458,7 @@ describe('IKImage', () => {
         observeSpy.resetHistory();
 
         // restore the original Image.prototype.src
-        Object.defineProperty(global.Image.prototype, 'src', originalImageSrcProto);
+        Object.defineProperty(global.Image.prototype, 'src', originalImagePrototype);
       });
 
       test('image with lqip should have actual src when element is loaded', () => {
@@ -420,6 +506,52 @@ describe('IKImage', () => {
         const fullyLoadedURL = `${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`
         expect(ikImage.find('img').prop('src')).toEqual(fullyLoadedURL);
       });
+
+      test('should not work for image with lqip active key set to false and lazy loading enabled', () => {
+        const ikImage = mount(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            loading="lazy"
+            lqip={{ active: false }}
+          />
+        );
+
+        expect(observeSpy.calledOnce).toEqual(true);
+        expect(intersectionObserverSpy.calledOnce).toEqual(true);
+
+        expect(ikImage.find('img').prop('src')).toBeUndefined();
+
+        // trigger element intersection callback
+        intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
+        ikImage.update();
+
+        expect(ikImage.find('img').prop('src')).toBeUndefined();
+      });
     });
-  })
+
+    describe('Miscellaneous', () => {
+      // covers 'else' condition for observer disconnection in non-lazyload cases
+      test('IKImage should unmount properly', () => {
+        const ikImage = shallow(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+          />
+        );
+        // spies
+        const spy = sinon.spy(ikImage.instance(), 'componentWillUnmount');
+        expect(spy.called).toEqual(false);
+
+        // trigger unmount
+        ikImage.unmount();
+
+        // verify spies
+        expect(spy.calledOnce).toEqual(true);
+        spy.restore();
+
+        expect(ikImage.find('img').length).toEqual(0);
+      });
+    });
+  });
 });

From 930575501fc2999af2a16d196f3250a424c24d79 Mon Sep 17 00:00:00 2001
From: nikniv <niveditn@gmail.com>
Date: Thu, 29 Oct 2020 05:34:14 +0530
Subject: [PATCH 3/5] add newline

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1701ba0..5e759ed 100755
--- a/package.json
+++ b/package.json
@@ -68,4 +68,4 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   }
-}
\ No newline at end of file
+}

From bf66ae992d3c92c20934a093d653316886a9d42b Mon Sep 17 00:00:00 2001
From: nikniv <niveditn@gmail.com>
Date: Thu, 29 Oct 2020 07:39:55 +0530
Subject: [PATCH 4/5] bugfix: async issue when updating src after state change
 + tests

---
 src/components/IKImage/index.js | 21 ++++++----
 src/test/IKImage.test.js        | 73 ++++++++++++++++++++++-----------
 2 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/src/components/IKImage/index.js b/src/components/IKImage/index.js
index 7c33e93..a4c3880 100755
--- a/src/components/IKImage/index.js
+++ b/src/components/IKImage/index.js
@@ -117,8 +117,9 @@ class IKImage extends ImageKitComponent {
   triggerOriginalImageLoad() {
     var img = new Image();
     img.onload = () => {
-      this.setState({ originalSrcLoaded: true });
-      this.updateImageUrl();
+      this.setState({ originalSrcLoaded: true }, () => {
+        this.updateImageUrl();
+      });
     }
     img.src = this.state.originalSrc;
   }
@@ -136,10 +137,11 @@ class IKImage extends ImageKitComponent {
       const imageObserver = new IntersectionObserver(entries => {
         const el = entries[0];
         if (el && el.isIntersecting) {
-          this.setState({ intersected: true });
-          if (lqip && lqip.active) this.triggerOriginalImageLoad();
-          imageObserver.disconnect();
-          this.updateImageUrl();
+          this.setState({ intersected: true }, () => {
+            if (lqip && lqip.active) this.triggerOriginalImageLoad();
+            imageObserver.disconnect();
+            this.updateImageUrl();
+          });
         }
       }, {
         rootMargin: `${rootMargin} 0px ${rootMargin} 0px`
@@ -150,9 +152,10 @@ class IKImage extends ImageKitComponent {
       })
     } else {
       // Load original image right away
-      this.setState({ intersected: true });
-      if (lqip && lqip.active) this.triggerOriginalImageLoad();
-      this.updateImageUrl();
+      this.setState({ intersected: true }, () => {
+        if (lqip && lqip.active) this.triggerOriginalImageLoad();
+        this.updateImageUrl();
+      });
     }
   }
 
diff --git a/src/test/IKImage.test.js b/src/test/IKImage.test.js
index 07b6c15..35f336e 100644
--- a/src/test/IKImage.test.js
+++ b/src/test/IKImage.test.js
@@ -262,6 +262,7 @@ describe('IKImage', () => {
       const observeSpy = sinon.spy();
       let intersectionObserverSpy;
       let originalNavigatorPrototype;
+      let originalWindowPrototype;
 
       const mockNavigator = (effectiveType = '4g') => {
         // backup original connection value
@@ -285,6 +286,15 @@ describe('IKImage', () => {
         Object.defineProperty(global.Navigator.prototype, 'connection', navigatorConnection);
       }
 
+      const removeIntersectionObserverMock = () => {
+        originalWindowPrototype = Object.getOwnPropertyDescriptor(window, 'IntersectionObserver');
+        delete window['IntersectionObserver'];
+      };
+
+      const restoreIntersectionObserverMock = () => {
+        Object.defineProperty(window, 'IntersectionObserver', originalWindowPrototype);
+      };
+
       beforeEach(() => {
         IntersectionObserverMock({ observe: observeSpy });
         intersectionObserverSpy = sinon.spy(window, 'IntersectionObserver');
@@ -420,6 +430,45 @@ describe('IKImage', () => {
 
         restoreNavigator();
       });
+
+      // covers 'else' condition when checking for presence of IntersectionObserver in 'window'
+      test('should set original src if IntersectionObserver is not present', () => {
+        removeIntersectionObserverMock();
+
+        const ikImage = mount(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+            loading="lazy"
+          />
+        );
+
+        expect(ikImage.find('img').prop('src')).toEqual(`${urlEndpoint}/${relativePath}?${global.SDK_VERSION}`);
+
+        restoreIntersectionObserverMock();
+      });
+
+      // covers 'else' condition for observer disconnection in non-lazyload cases
+      test('should unmount properly when lazyload is not enabled', () => {
+        const ikImage = shallow(
+          <IKImage
+            urlEndpoint={urlEndpoint}
+            path={relativePath}
+          />
+        );
+        // spies
+        const spy = sinon.spy(ikImage.instance(), 'componentWillUnmount');
+        expect(spy.called).toEqual(false);
+
+        // trigger unmount
+        ikImage.unmount();
+
+        // verify spies
+        expect(spy.calledOnce).toEqual(true);
+        spy.restore();
+
+        expect(ikImage.find('img').length).toEqual(0);
+      });
     });
 
     describe('LQIP', () => {
@@ -529,29 +578,5 @@ describe('IKImage', () => {
         expect(ikImage.find('img').prop('src')).toBeUndefined();
       });
     });
-
-    describe('Miscellaneous', () => {
-      // covers 'else' condition for observer disconnection in non-lazyload cases
-      test('IKImage should unmount properly', () => {
-        const ikImage = shallow(
-          <IKImage
-            urlEndpoint={urlEndpoint}
-            path={relativePath}
-          />
-        );
-        // spies
-        const spy = sinon.spy(ikImage.instance(), 'componentWillUnmount');
-        expect(spy.called).toEqual(false);
-
-        // trigger unmount
-        ikImage.unmount();
-
-        // verify spies
-        expect(spy.calledOnce).toEqual(true);
-        spy.restore();
-
-        expect(ikImage.find('img').length).toEqual(0);
-      });
-    });
   });
 });

From b4f8a8c9d64c341c408cf47c0d345f8db44cdfd6 Mon Sep 17 00:00:00 2001
From: nikniv <niveditn@gmail.com>
Date: Fri, 30 Oct 2020 18:09:27 +0530
Subject: [PATCH 5/5] bump package version and change order of events in lqip
 with lazyload

---
 package-lock.json        | 2 +-
 package.json             | 2 +-
 src/test/IKImage.test.js | 9 +++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3e09ad1..49ca010 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 5e759ed..eeaa8be 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "imagekitio-react",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build": "rm -rf dist*;rollup -c",
diff --git a/src/test/IKImage.test.js b/src/test/IKImage.test.js
index 35f336e..626d670 100644
--- a/src/test/IKImage.test.js
+++ b/src/test/IKImage.test.js
@@ -538,14 +538,15 @@ describe('IKImage', () => {
           />
         );
 
+        const lazyLoadedURL = `${urlEndpoint}/tr:q-20,bl-6/${relativePath}?${global.SDK_VERSION}`
+        expect(ikImage.find('img').prop('src')).toEqual(lazyLoadedURL);
+
         expect(observeSpy.calledOnce).toEqual(true);
         expect(intersectionObserverSpy.calledOnce).toEqual(true);
 
         // trigger element intersection callback
         intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
         ikImage.update();
-
-        const lazyLoadedURL = `${urlEndpoint}/tr:q-20,bl-6/${relativePath}?${global.SDK_VERSION}`
         expect(ikImage.find('img').prop('src')).toEqual(lazyLoadedURL);
 
         // simulate image onload
@@ -566,11 +567,11 @@ describe('IKImage', () => {
           />
         );
 
+        expect(ikImage.find('img').prop('src')).toBeUndefined();
+        
         expect(observeSpy.calledOnce).toEqual(true);
         expect(intersectionObserverSpy.calledOnce).toEqual(true);
 
-        expect(ikImage.find('img').prop('src')).toBeUndefined();
-
         // trigger element intersection callback
         intersectionObserverSpy.args[0][0]([{ isIntersecting: true }]);
         ikImage.update();