test: compute position

Author: gabrieljablonski

src/test/__snapshots__/utils.spec.js.snap

@@ -16,3 +16,41 @@ exports[`compute positions all reference elements 1`] = `
   },
 }
 `;
+
+exports[`compute positions all reference elements with border 1`] = `
+{
+  "place": "top",
+  "tooltipArrowStyles": {
+    "borderBottom": "1px solid red",
+    "borderRight": "1px solid red",
+    "bottom": "-5px",
+    "left": "-1px",
+    "right": "",
+    "top": "",
+  },
+  "tooltipStyles": {
+    "border": "1px solid red",
+    "left": "5px",
+    "top": "-10px",
+  },
+}
+`;
+
+exports[`compute positions all reference elements with non-px border 1`] = `
+{
+  "place": "top",
+  "tooltipArrowStyles": {
+    "borderBottom": "medium solid red",
+    "borderRight": "medium solid red",
+    "bottom": "-5px",
+    "left": "-1px",
+    "right": "",
+    "top": "",
+  },
+  "tooltipStyles": {
+    "border": "medium solid red",
+    "left": "5px",
+    "top": "-10px",
+  },
+}
+`;

src/test/utils.spec.js

@@ -58,6 +58,34 @@ describe('compute positions', () => {
 
     expect(value).toMatchSnapshot()
   })
+
+  test('all reference elements with border', async () => {
+    const element = document.createElement('div')
+    const elementTooltip = document.createElement('div')
+    const elementTooltipArrow = document.createElement('div')
+    const value = await computeTooltipPosition({
+      elementReference: element,
+      tooltipReference: elementTooltip,
+      tooltipArrowReference: elementTooltipArrow,
+      border: '1px solid red',
+    })
+
+    expect(value).toMatchSnapshot()
+  })
+
+  test('all reference elements with non-px border', async () => {
+    const element = document.createElement('div')
+    const elementTooltip = document.createElement('div')
+    const elementTooltipArrow = document.createElement('div')
+    const value = await computeTooltipPosition({
+      elementReference: element,
+      tooltipReference: elementTooltip,
+      tooltipArrowReference: elementTooltipArrow,
+      border: 'medium solid red',
+    })
+
+    expect(value).toMatchSnapshot()
+  })
 })
 
 describe('debounce', () => {

src/utils/compute-positions.ts

@@ -40,6 +40,7 @@ export const computeTooltipPosition = async ({
     }).then(({ x, y, placement, middlewareData }) => {
       const styles = { left: `${x}px`, top: `${y}px`, border }
 
+      /* c8 ignore start */
       const { x: arrowX, y: arrowY } = middlewareData.arrow ?? { x: 0, y: 0 }
 
       const staticSide =
@@ -49,6 +50,7 @@ export const computeTooltipPosition = async ({
           bottom: 'top',
           left: 'right',
         }[placement.split('-')[0]] ?? 'bottom'
+      /* c8 ignore end */
 
       const borderSide = border && {
         borderBottom: border,
@@ -62,12 +64,14 @@ export const computeTooltipPosition = async ({
           borderWidth = Number(match[1])
         } else {
           /**
-           * this means `border` was set without `width`, or non-px value
+           * this means `border` was set without `width`,
+           * or non-px value (such as `medium`, `thick`, ...)
            */
           borderWidth = 1
         }
       }
 
+      /* c8 ignore start */
       const arrowStyle = {
         left: arrowX != null ? `${arrowX}px` : '',
         top: arrowY != null ? `${arrowY}px` : '',
@@ -76,6 +80,7 @@ export const computeTooltipPosition = async ({
         ...borderSide,
         [staticSide]: `-${4 + borderWidth}px`,
       }
+      /* c8 ignore end */
 
       return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }
     })