diff --git a/static/app/components/clipboardTooltip.tsx b/static/app/components/clipboardTooltip.tsx index 8cfe4725a24dc3..a74fe0adc9d764 100644 --- a/static/app/components/clipboardTooltip.tsx +++ b/static/app/components/clipboardTooltip.tsx @@ -5,6 +5,7 @@ import Clipboard from 'app/components/clipboard'; import TextOverflow from 'app/components/textOverflow'; import Tooltip from 'app/components/tooltip'; import {IconCopy} from 'app/icons'; +import {t} from 'app/locale'; import space from 'app/styles/space'; type Props = Omit, 'isHoverable' | 'title'> & { @@ -25,7 +26,7 @@ function ClipboardTooltip({title, onSuccess, ...props}: Props) { {title} - + diff --git a/tests/js/spec/components/clipboardTooltip.spec.tsx b/tests/js/spec/components/clipboardTooltip.spec.tsx index 8c1b7f4eeac43e..bffeb3a3ea6916 100644 --- a/tests/js/spec/components/clipboardTooltip.spec.tsx +++ b/tests/js/spec/components/clipboardTooltip.spec.tsx @@ -1,36 +1,30 @@ -import {mountWithTheme} from 'sentry-test/enzyme'; +import copy from 'copy-text-to-clipboard'; + +import {fireEvent, mountWithTheme} from 'sentry-test/reactTestingLibrary'; import ClipboardTooltip from 'app/components/clipboardTooltip'; -import {OPEN_DELAY} from 'app/components/tooltip'; + +jest.mock('copy-text-to-clipboard'); describe('ClipboardTooltip', function () { - it('renders', function () { + it('renders', async function () { const title = 'tooltip content'; + const content = 'This text displays a tooltip when hovering'; const wrapper = mountWithTheme( - This text displays a tooltip when hovering + {content} ); - jest.useFakeTimers(); - - const trigger = wrapper.find('span'); - trigger.simulate('mouseEnter'); - - jest.advanceTimersByTime(OPEN_DELAY); - wrapper.update(); - - const tooltipClipboardWrapper = wrapper.find('TooltipClipboardWrapper'); - expect(tooltipClipboardWrapper.length).toEqual(1); + expect(wrapper.getByText(content)).toBeInTheDocument(); + fireEvent.mouseEnter(wrapper.getByText(content)); - const tooltipTextContent = tooltipClipboardWrapper.find('TextOverflow'); - expect(tooltipTextContent.length).toEqual(1); + await wrapper.findByText(title); - const clipboardContent = tooltipClipboardWrapper.find('Clipboard'); - expect(clipboardContent.length).toEqual(1); - expect(clipboardContent.props().value).toEqual(title); + const clipboardContent = wrapper.getByLabelText('Copy to clipboard'); + expect(clipboardContent).toBeInTheDocument(); + fireEvent.click(clipboardContent); - const iconCopy = clipboardContent.find('IconCopy'); - expect(iconCopy.length).toEqual(1); + expect(copy).toHaveBeenCalledWith(title); }); });