fix: getOuterSizes returning NaN for virtual elements (#711)

When the element is not attach at the DOM the `getComputedStyle` returns
a empty string making the convertion to float `parseFloat(styles.marginTop)`
return NaN.

packages/popper/src/utils/getOuterSizes.js

@@ -8,8 +8,8 @@
 export default function getOuterSizes(element) {
   const window = element.ownerDocument.defaultView;
   const styles = window.getComputedStyle(element);
-  const x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
-  const y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+  const x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
+  const y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
   const result = {
     width: element.offsetWidth + y,
     height: element.offsetHeight + x,

packages/popper/tests/unit/getOuterSizes.js

@@ -0,0 +1,47 @@
+import chai from 'chai';
+const { expect } = chai;
+import getOuterSizes from '../../src/utils/getOuterSizes';
+
+describe('utils/getOuterSizes', () => {
+  let node;
+
+  beforeEach(() => {
+    node = document.createElement('div');
+  });
+
+  describe('when the element is not attach on the DOM', () => {
+    it('should returns 0 width and height for empty elements', () => {
+      expect(getOuterSizes(node)).to.deep.equal({
+        width: 0,
+        height: 0,
+      });
+    });
+  });
+
+  describe('when the element is attach on the DOM', () => {
+    it('should returns width and height for elements without margins', () => {
+      node.style.width = '20px';
+      node.style.height = '20px';
+      document.body.appendChild(node);
+      node.style.position = 'relative';
+
+      expect(getOuterSizes(node)).to.deep.equal({
+        width: 20,
+        height: 20,
+      });
+    });
+
+    it('should returns width and height for elements with margins', () => {
+      node.style.width = '20px';
+      node.style.height = '20px';
+      node.style.margin = '10px';
+      document.body.appendChild(node);
+      node.style.position = 'relative';
+
+      expect(getOuterSizes(node)).to.deep.equal({
+        width: 40,
+        height: 40,
+      });
+    });
+  });
+});