deconstruct id from props and add unit tests

Author: broccolinisoup

src/drafts/Tooltip/Tooltip.tsx

@@ -185,8 +185,8 @@ const isInteractive = (element: HTMLElement) => {
 export const TooltipContext = React.createContext<{tooltipId?: string}>({})
 
 export const Tooltip = React.forwardRef(
-  ({direction = 's', text, type = 'description', children, ...rest}: TooltipProps, forwardedRef) => {
-    const tooltipId = useId(rest.id)
+  ({direction = 's', text, type = 'description', children, id, ...rest}: TooltipProps, forwardedRef) => {
+    const tooltipId = useId(id)
     const child = Children.only(children)
     const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement>)
     const tooltipElRef = useRef<HTMLDivElement>(null)

src/drafts/Tooltip/__tests__/Tooltip.test.tsx

@@ -3,7 +3,8 @@ import {Tooltip, TooltipProps} from '../Tooltip'
 import {checkStoriesForAxeViolations} from '../../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import theme from '../../../theme'
-import {Button, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../../../'
+import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../../../'
+import {XIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
   <Tooltip text="Tooltip text" {...props}>
@@ -91,4 +92,22 @@ describe('Tooltip', () => {
     expect(menuButton).toHaveAttribute('aria-describedby', tooltip.id)
     expect(menuButton).toHaveAttribute('aria-haspopup', 'true')
   })
+  it('should use the custom tooltip id (if present) to label the trigger element', () => {
+    const {getByRole} = HTMLRender(
+      <Tooltip id="custom-tooltip-id" text="Close feedback form" direction="nw" type="label">
+        <IconButton aria-labelledby="custom-tooltip-id" icon={XIcon} variant="invisible" onClick={() => {}} />
+      </Tooltip>,
+    )
+    const triggerEL = getByRole('button')
+    expect(triggerEL).toHaveAttribute('aria-labelledby', 'custom-tooltip-id')
+  })
+  it('should use the custom tooltip id (if present) to described the trigger element', () => {
+    const {getByRole} = HTMLRender(
+      <Tooltip text="This operation cannot be reverted" id="custom-tooltip-id">
+        <Button>Delete</Button>
+      </Tooltip>,
+    )
+    const triggerEL = getByRole('button')
+    expect(triggerEL).toHaveAttribute('aria-describedby', 'custom-tooltip-id')
+  })
 })