From 22b35d3c2b5ab9114648f04e0e6acb8702b67f3a Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Fri, 25 Oct 2024 13:27:08 -0700
Subject: [PATCH] Fix Copyable tooltip spec (#2519)

* Fix Copyable tooltip spec

* Update test
---
 .../copyable/src/Copyable/Copyable.spec.tsx   | 20 ++++++-------------
 packages/copyable/src/Copyable/Copyable.tsx   |  3 ++-
 packages/copyable/src/Copyable/constants.ts   |  1 +
 3 files changed, 9 insertions(+), 15 deletions(-)
 create mode 100644 packages/copyable/src/Copyable/constants.ts

diff --git a/packages/copyable/src/Copyable/Copyable.spec.tsx b/packages/copyable/src/Copyable/Copyable.spec.tsx
index 2ab8ada253..9bccf9c2ce 100644
--- a/packages/copyable/src/Copyable/Copyable.spec.tsx
+++ b/packages/copyable/src/Copyable/Copyable.spec.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  act,
-  fireEvent,
-  render,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import ClipboardJS from 'clipboard';
 import { axe } from 'jest-axe';
 
@@ -113,14 +107,12 @@ describe('packages/copyable', () => {
             },
           );
 
-          await waitFor(() => expect(getByText('Copied!')).toBeVisible());
+          const tooltip = getByText('Copied!');
 
-          // Tooltip should remain visible for a while
-          await new Promise(resolve => setTimeout(resolve, 1000));
-          expect(getByText('Copied!')).toBeVisible();
-
-          // Tooltip should eventually disappear
-          await waitForElementToBeRemoved(() => queryByText('Copied!'));
+          await waitFor(() => expect(tooltip).toBeVisible());
+          await waitFor(() => expect(tooltip).not.toBeVisible(), {
+            timeout: 2000,
+          });
         },
       );
     });
diff --git a/packages/copyable/src/Copyable/Copyable.tsx b/packages/copyable/src/Copyable/Copyable.tsx
index 2034e638dd..e4ee78d205 100644
--- a/packages/copyable/src/Copyable/Copyable.tsx
+++ b/packages/copyable/src/Copyable/Copyable.tsx
@@ -23,6 +23,7 @@ import {
   useUpdatedBaseFontSize,
 } from '@leafygreen-ui/typography';
 
+import { TOOLTIP_VISIBLE_DURATION } from './constants';
 import {
   buttonContainerStyle,
   buttonStyle,
@@ -101,7 +102,7 @@ export default function Copyable({
     if (copied) {
       const timeoutId = setTimeout(() => {
         setCopied(false);
-      }, 1500);
+      }, TOOLTIP_VISIBLE_DURATION);
 
       return () => clearTimeout(timeoutId);
     }
diff --git a/packages/copyable/src/Copyable/constants.ts b/packages/copyable/src/Copyable/constants.ts
new file mode 100644
index 0000000000..921673e5bd
--- /dev/null
+++ b/packages/copyable/src/Copyable/constants.ts
@@ -0,0 +1 @@
+export const TOOLTIP_VISIBLE_DURATION = 1500;