diff --git a/src/components/ui/Tooltip/fragments/TooltipContent.tsx b/src/components/ui/Tooltip/fragments/TooltipContent.tsx index 5f06904ae..e962b07af 100644 --- a/src/components/ui/Tooltip/fragments/TooltipContent.tsx +++ b/src/components/ui/Tooltip/fragments/TooltipContent.tsx @@ -33,11 +33,9 @@ const TooltipContent = React.forwardRef diff --git a/src/components/ui/Tooltip/tests/Tooltip.portal.test.tsx b/src/components/ui/Tooltip/tests/Tooltip.portal.test.tsx new file mode 100644 index 000000000..fe0c21c0e --- /dev/null +++ b/src/components/ui/Tooltip/tests/Tooltip.portal.test.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Tooltip from '../Tooltip'; +import ThemeContext from '../../Theme/ThemeContext'; + +describe('Tooltip portal', () => { + test('portals content into Theme portalRootRef when provided', async() => { + const portalRoot = document.createElement('div'); + document.body.appendChild(portalRoot); + + render( + + + Hover me + Tooltip label + + + ); + + await userEvent.hover(screen.getByText('Hover me')); + expect(screen.getByText('Tooltip label')).toBeInTheDocument(); + expect(portalRoot).toContainElement(screen.getByText('Tooltip label')); + + portalRoot.remove(); + }); + + test('falls back to Theme containerRef when portalRootRef is unset', async() => { + const themeContainer = document.createElement('div'); + document.body.appendChild(themeContainer); + + render( + + + Hover me + Theme container tooltip + + + ); + + await userEvent.hover(screen.getByText('Hover me')); + expect(themeContainer).toContainElement(screen.getByText('Theme container tooltip')); + + themeContainer.remove(); + }); + + test('uses explicit container prop over Theme refs', async() => { + const explicitContainer = document.createElement('div'); + document.body.appendChild(explicitContainer); + const portalRoot = document.createElement('div'); + document.body.appendChild(portalRoot); + + render( + + + Hover me + Explicit container tooltip + + + ); + + await userEvent.hover(screen.getByText('Hover me')); + expect(explicitContainer).toContainElement(screen.getByText('Explicit container tooltip')); + expect(portalRoot).not.toContainElement(screen.getByText('Explicit container tooltip')); + + explicitContainer.remove(); + portalRoot.remove(); + }); +});