bugfix: async issue when updating src after state change + tests

Author: niveditn

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

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