Merge pull request #25 from imagekit-developer/feature/lazy-load-tests

Code Coverage for lazyload and LQIP features

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",
@@ -25,6 +25,9 @@
     "verbose": true,
     "setupFilesAfterEnv": [
       "<rootDir>/src/test/setupTests.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/src/test/mocks"
     ]
   },
   "author": "ImageKit",

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