test(ui): Convert clipboard tooltip component to RTL (#28930)

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<React.ComponentProps<typeof Tooltip>, 'isHoverable' | 'title'> & {
@@ -25,7 +26,7 @@ function ClipboardTooltip({title, onSuccess, ...props}: Props) {
           <TextOverflow>{title}</TextOverflow>
           <Clipboard value={title} onSuccess={onSuccess}>
             <TooltipClipboardIconWrapper>
-              <IconCopy size="xs" color="white" />
+              <IconCopy size="xs" color="white" aria-label={t('Copy to clipboard')} />
             </TooltipClipboardIconWrapper>
           </Clipboard>
         </TooltipClipboardWrapper>

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(
       <ClipboardTooltip title={title}>
-        <span>This text displays a tooltip when hovering</span>
+        <span>{content}</span>
       </ClipboardTooltip>
     );
 
-    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);
   });
 });