Fix testing and minor refactorings

jest.config.ts

@@ -20,7 +20,14 @@ export default {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: undefined,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx,js,jsx,css}',
+    // dev stuff
+    '!src/*',
+    '!src/**/*.d.ts',
+    // deprecated
+    '!src/components/TooltipProvider/*',
+  ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',

src/components/Tooltip/Tooltip.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState, useRef, useCallback, useImperativeHandle } from 'react'
 import { autoUpdate } from '@floating-ui/dom'
 import classNames from 'classnames'
-import debounce from 'utils/debounce'
+import {
+  debounce,
+  deepEqual,
+  useIsomorphicLayoutEffect,
+  getScrollParent,
+  computeTooltipPosition,
+  cssTimeToMs,
+} from 'utils'
+import type { IComputedPosition } from 'utils'
 import { useTooltip } from 'components/TooltipProvider'
-import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
-import { getScrollParent } from 'utils/get-scroll-parent'
-import { computeTooltipPosition } from 'utils/compute-positions'
-import type { IComputedPosition } from 'utils/compute-positions-types'
-import { cssTimeToMs } from 'utils/css-time-to-ms'
-import { deepEqual } from 'utils/deep-equal'
 import coreStyles from './core-styles.module.css'
 import styles from './styles.module.css'
 import type {

src/components/TooltipController/TooltipController.tsx

@@ -13,7 +13,7 @@ import type {
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
 import { TooltipContent } from 'components/TooltipContent'
-import cssSupports from 'utils/css-supports'
+import { cssSupports } from 'utils'
 import classNames from 'classnames'
 import type { ITooltipController } from './TooltipControllerTypes'
 
@@ -194,10 +194,12 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       if (styleInjectionRef.current === disableStyleInjection) {
         return
       }
+      /* c8 ignore start */
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.')
       }
+      /* c8 ignore end */
     }, [disableStyleInjection])
 
     useEffect(() => {
@@ -227,10 +229,12 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
             elementRefs.add({ current: anchor })
           })
         } catch {
+          /* c8 ignore start */
           if (!process.env.NODE_ENV || process.env.NODE_ENV !== 'production') {
             // eslint-disable-next-line no-console
             console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`)
           }
+          /* c8 ignore end */
         }
       }
 
@@ -281,9 +285,11 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
     }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
 
     useEffect(() => {
+      /* c8 ignore start */
       if (process.env.NODE_ENV === 'production') {
         return
       }
+      /* c8 ignore end */
       if (style?.border) {
         // eslint-disable-next-line no-console
         console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.')

src/test/__snapshots__/tooltip-attributes.spec.js.snap

@@ -4,12 +4,13 @@ exports[`tooltip attributes basic tooltip 1`] = `
 <div>
   <span
     data-tooltip-content="Hello World!"
-    id="basic-example-attr"
+    data-tooltip-id="basic-example-attr"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="basic-example-attr"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -27,12 +28,13 @@ exports[`tooltip attributes tooltip with class name 1`] = `
   <span
     data-tooltip-class-name="tooltip-class-name"
     data-tooltip-content="Hello World!"
-    id="example-class-name-attr"
+    data-tooltip-id="example-class-name-attr"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip tooltip-class-name react-tooltip__place-top react-tooltip__show"
+    id="example-class-name-attr"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -49,13 +51,14 @@ exports[`tooltip attributes tooltip with place 1`] = `
 <div>
   <span
     data-tooltip-content="Hello World!"
+    data-tooltip-id="example-place-attr"
     data-tooltip-place="right"
-    id="example-place-attr"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-right react-tooltip__show"
+    id="example-place-attr"
     role="tooltip"
     style="left: 10px; top: 5px;"
   >

src/test/__snapshots__/tooltip-props.spec.js.snap

@@ -3,12 +3,13 @@
 exports[`tooltip props basic tooltip 1`] = `
 <div>
   <span
-    id="basic-example"
+    data-tooltip-id="basic-example"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="basic-example"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -24,12 +25,13 @@ exports[`tooltip props basic tooltip 1`] = `
 exports[`tooltip props clickable tooltip 1`] = `
 <div>
   <span
-    id="example-clickable"
+    data-tooltip-id="example-clickable"
   >
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip react-tooltip__place-top react-tooltip__show undefined"
+    class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="example-clickable"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -47,12 +49,13 @@ exports[`tooltip props clickable tooltip 1`] = `
 exports[`tooltip props tooltip with custom position 1`] = `
 <div>
   <span
-    id="example-place"
+    data-tooltip-id="example-place"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="example-place"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -68,7 +71,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
 exports[`tooltip props tooltip with delay hide 1`] = `
 <div>
   <span
-    id="example-delay-hide"
+    data-tooltip-id="example-delay-hide"
   >
     Lorem Ipsum
   </span>
@@ -78,12 +81,13 @@ exports[`tooltip props tooltip with delay hide 1`] = `
 exports[`tooltip props tooltip with delay show 1`] = `
 <div>
   <span
-    id="example-delay-show"
+    data-tooltip-id="example-delay-show"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="example-delay-show"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -99,12 +103,13 @@ exports[`tooltip props tooltip with delay show 1`] = `
 exports[`tooltip props tooltip with float 1`] = `
 <div>
   <span
-    id="example-float"
+    data-tooltip-id="example-float"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="example-float"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -120,12 +125,13 @@ exports[`tooltip props tooltip with float 1`] = `
 exports[`tooltip props tooltip with html 1`] = `
 <div>
   <span
-    id="example-html"
+    data-tooltip-id="example-html"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-top react-tooltip__show"
+    id="example-html"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -146,12 +152,13 @@ exports[`tooltip props tooltip with html 1`] = `
 exports[`tooltip props tooltip with place 1`] = `
 <div>
   <span
-    id="example-place"
+    data-tooltip-id="example-place"
   >
     Lorem Ipsum
   </span>
   <div
     class="react-tooltip react-tooltip__place-right react-tooltip__show"
+    id="example-place"
     role="tooltip"
     style="left: 10px; top: 5px;"
   >

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/tooltip-attributes.spec.js

@@ -9,10 +9,10 @@ jest.useRealTimers()
 // eslint-disable-next-line react/prop-types
 const TooltipAttrs = ({ id, ...anchorParams }) => (
   <>
-    <span id={id} {...anchorParams}>
+    <span data-tooltip-id={id} {...anchorParams}>
       Lorem Ipsum
     </span>
-    <Tooltip anchorId={id} />
+    <Tooltip id={id} />
   </>
 )
 
@@ -39,12 +39,8 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(anchorElement).toHaveAttribute('data-tooltip-content')
     expect(tooltip).toBeInTheDocument()
@@ -63,12 +59,8 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveAttribute('style')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveAttribute('style')
 
     expect(anchorElement).toHaveAttribute('data-tooltip-place')
     expect(anchorElement).toHaveAttribute('data-tooltip-content')
@@ -88,12 +80,8 @@ describe('tooltip attributes', () => {
 
     await userEvent.hover(anchorElement)
 
-    let tooltip = null
-
-    await waitFor(() => {
-      tooltip = screen.getByRole('tooltip')
-      expect(tooltip).toHaveClass('tooltip-class-name')
-    })
+    const tooltip = await screen.findByRole('tooltip')
+    expect(tooltip).toHaveClass('tooltip-class-name')
 
     expect(anchorElement).toHaveAttribute('data-tooltip-class-name')
     expect(tooltip).toBeInTheDocument()