Fix calculatePosition types and tests (#4729)

Author: snowystinger

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -393,7 +393,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     offset,
     crossOffset,
     maxHeight,
-    arrowSize,
+    arrowSize = 0,
     arrowBoundaryOffset = 0
   } = opts;
 

packages/@react-aria/overlays/test/calculatePosition.test.js renamed to packages/@react-aria/overlays/test/calculatePosition.test.ts

@@ -38,10 +38,9 @@ const containerDimensions = {
 };
 
 // Reset JSDom's default margin on the body
-document.body.style.margin = 0;
+document.body.style.margin = '0';
 
-function createElementWithDimensions(elemName, dimensions, margins) {
-  margins = margins || {};
+function createElementWithDimensions(elemName, dimensions, margins = {}) {
   let elem = document.createElement(elemName);
 
   Object.assign(elem.style, {
@@ -103,7 +102,7 @@ describe('calculatePosition', function () {
     const placementAxis = placement.split(' ')[0];
 
     // The tests are all based on top/left positioning. Convert to bottom/right positioning if needed.
-    let pos = {};
+    let pos: {right?: number, top?: number, left?: number, bottom?: number} = {};
     if ((placementAxis === 'left' && !flip) || (placementAxis === 'right' && flip)) {
       pos.right = boundaryDimensions.width - (expected[0] + overlaySize.width);
       pos.top = expected[1];
@@ -164,7 +163,7 @@ describe('calculatePosition', function () {
     });
   }
 
-  function checkPosition(placement, targetDimension, expected, offset = 0, crossOffset = 0, flip = false, providerOffset, arrowSize, arrowBoundaryOffset) {
+  function checkPosition(placement, targetDimension, expected, offset = 0, crossOffset = 0, flip = false, providerOffset = undefined, arrowSize = undefined, arrowBoundaryOffset = undefined) {
     checkPositionCommon(
       'Should calculate the correct position',
       expected,
@@ -396,7 +395,7 @@ describe('calculatePosition', function () {
       const overlayNode = document.createElement('div');
       const container = document.createElement('div');
 
-      target.style = 'margin:20px';
+      target.style.margin = '20px';
       document.body.appendChild(target);
 
       let {position: {top: positionTop}} = calculatePosition({
@@ -408,7 +407,8 @@ describe('calculatePosition', function () {
         shouldFlip: false,
         boundaryElement: container,
         offset: 0,
-        crossOffset: 0
+        crossOffset: 0,
+        arrowSize: 0
       });
       expect(positionTop).toBe(0);
 

packages/@react-aria/overlays/test/useOverlayPosition.test.js renamed to packages/@react-aria/overlays/test/useOverlayPosition.test.tsx

@@ -18,7 +18,7 @@ function Example({triggerTop = 250, ...props}) {
   let targetRef = useRef();
   let containerRef = useRef();
   let overlayRef = useRef();
-  let {overlayProps, placement, arrowProps} = useOverlayPosition({targetRef, containerRef, overlayRef, arrowSize: 8, ...props});
+  let {overlayProps, placement, arrowProps} = useOverlayPosition({targetRef, overlayRef, arrowSize: 8, ...props});
   let style = {width: 300, height: 200, ...overlayProps.style};
   return (
     <React.Fragment>
@@ -33,12 +33,15 @@ function Example({triggerTop = 250, ...props}) {
   );
 }
 
+// @ts-ignore
 HTMLElement.prototype.getBoundingClientRect = function () {
   return {
     left: parseInt(this.style.left, 10) || 0,
     top: parseInt(this.style.top, 10) || 0,
+    right: parseInt(this.style.right, 10) || 0,
+    bottom: parseInt(this.style.bottom, 10) || 0,
     width: parseInt(this.style.width, 10) || 0,
-    height: parseInt(this.style.width, 10) || 0
+    height: parseInt(this.style.height, 10) || 0
   };
 };