fix(componentpositions): fixed returning size for invisible element

preprocess.js

@@ -6,8 +6,8 @@ module.exports = {
     if (filename.endsWith('.js') || filename.endsWith('.jsx')) {
       return babel.transform(src, {
         filename,
-        presets: ['react'],
-        plugins: ['transform-es2015-modules-commonjs'],
+        presets: ['@babel/preset-react'],
+        plugins: ['@babel/plugin-transform-modules-commonjs'],
         retainLines: true
       }).code;
     }

src/ComponentPositions.js

@@ -162,14 +162,24 @@ export default class ComponentPositions {
       );
     }
 
-    let clientRect = element.getBoundingClientRect();
+    const clientRect = element.getBoundingClientRect();
+    const isInvisibleElement =
+      clientRect.top === 0 &&
+      clientRect.left === 0 &&
+      clientRect.width === 0 &&
+      clientRect.height === 0;
+
+    if (isInvisibleElement) {
+      const { top, left, width, height } = clientRect;
+
+      return { top, left, width, height };
+    }
+
     let elmRectStyle = {
       top: clientRect.top - extended,
       left: clientRect.left - extended,
       width: clientRect.width + 2 * extended,
-      height:
-        (clientRect.height || height || 0 / width || 0 * clientRect.width) +
-        2 * extended
+      height: (clientRect.height || height || 0 / width || 0) + 2 * extended
     };
 
     return elmRectStyle;

src/__tests__/ComponentPositionsSpec.js

@@ -87,7 +87,7 @@ describe('ComponentPositions', () => {
       }).toThrow();
     });
 
-    it('should returns expanded size for element', () => {
+    it('should return expanded size for element', () => {
       let element = {
         getBoundingClientRect: () => elmRect
       };
@@ -100,10 +100,27 @@ describe('ComponentPositions', () => {
         width: 700,
         height: 700
       });
+    });
 
-      expect(function() {
-        componentPositions.getBoundingClientRect({});
-      }).toThrow();
+    it('should return zero size for invisible element', () => {
+      let element = {
+        getBoundingClientRect: () => {
+          return { top: 0, left: 0, width: 0, height: 0 };
+        }
+      };
+
+      expect(
+        componentPositions.getBoundingClientRect(
+          element,
+          { width: 100, height: 100 },
+          300
+        )
+      ).toEqual({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      });
     });
   });
 });