SONAR-22429 Fix inline copy button

diff --git a/server/sonar-web/design-system/src/components/__tests__/clipboard-test.tsx b/server/sonar-web/design-system/src/components/__tests__/clipboard-test.tsx
index 0a5983a9765ee49f3446c5958938b7f65722ee97..027b990fff6cce3f63dc5c7812f57f51bd93c5aa 100644 (file)
--- a/server/sonar-web/design-system/src/components/__tests__/clipboard-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/clipboard-test.tsx
@@ -32,7 +32,7 @@ afterEach(() => {
 });
 
 describe('ClipboardButton', () => {
-  it('should display correctly', async () => {
+  it('should display and function correctly', async () => {
     /* Delay: null is necessary to play well with fake timers
      * https://github.com/testing-library/user-event/issues/833
      */
@@ -60,10 +60,23 @@ describe('ClipboardButton', () => {
 });
 
 describe('ClipboardIconButton', () => {
-  it('should display correctly', () => {
+  it('should display and function correctly', async () => {
+    /* Delay: null is necessary to play well with fake timers
+     * https://github.com/testing-library/user-event/issues/833
+     */
+    const user = userEvent.setup({ delay: null });
     renderWithContext(<ClipboardIconButton copyValue="foo" />);
 
     const copyButton = screen.getByRole('button', { name: 'Copy to clipboard' });
     expect(copyButton).toBeInTheDocument();
+
+    expect(screen.getByRole('button', { name: 'Copy to clipboard' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Copy to clipboard' }));
+
+    expect(await screen.findByText('Copied')).toBeVisible();
+
+    await waitForElementToBeRemoved(() => screen.queryByText('Copied'));
+    jest.runAllTimers();
   });
 });

diff --git a/server/sonar-web/design-system/src/components/clipboard.tsx b/server/sonar-web/design-system/src/components/clipboard.tsx
index ffe88b4a0452fb0e4844d3786a5f2b90e5769636..b84de731144ffdee959569e3968b055edcf84fd4 100644 (file)
--- a/server/sonar-web/design-system/src/components/clipboard.tsx
+++ b/server/sonar-web/design-system/src/components/clipboard.tsx
@@ -172,7 +172,7 @@ export function ClipboardIconButton(props: IconButtonProps) {
               aria-label={props['aria-label'] ?? copyLabel}
               className={className}
               data-clipboard-text={copyValue}
-              innerRef={setCopyButton}
+              ref={setCopyButton}
               size={size}
             />
           </Tooltip>