Merge pull request #416 from openedx/knguyen2/ent-9458

fix: fix copy functionality on customer record card
openedx · Sep 11, 2024 · ca5bd94 · ca5bd94
2 parents c6ed509 + 0d5dba9
commit ca5bd94
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx
@@ -9,7 +9,7 @@ import CustomerDetailModal from './CustomerDetailModal';
 
 const CustomerCard = ({ enterpriseCustomer }) => {
   const { ADMIN_PORTAL_BASE_URL, DJANGO_ADMIN_LMS_BASE_URL } = getConfig();
-  const { showToast, copyToClipboard, setShowToast } = useCopyToClipboard();
+  const { showToast, copyToClipboard, setShowToast } = useCopyToClipboard(enterpriseCustomer.uuid);
   const [isDetailsOpen, openDetails, closeDetails] = useToggle(false);
 
   return (
@@ -64,7 +64,7 @@ const CustomerCard = ({ enterpriseCustomer }) => {
               key="ContentCopy"
               src={ContentCopy}
               data-testid="copy"
-              onClick={() => copyToClipboard(enterpriseCustomer.uuid)}
+              onClick={() => copyToClipboard()}
             />
           </div>
           <p className="small mb-1">

diff --git a/src/Configuration/Customers/CustomerDetailView/tests/CustomerCard.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/CustomerCard.test.jsx
@@ -1,9 +1,10 @@
 /* eslint-disable react/prop-types */
-import { screen, render } from '@testing-library/react';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { formatDate } from '../../data/utils';
+import { formatDate, useCopyToClipboard } from '../../data/utils';
 import CustomerCard from '../CustomerCard';
 
 jest.mock('../../data/utils', () => ({
@@ -25,7 +26,7 @@ const mockData = {
 };
 
 describe('CustomerCard', () => {
-  it('renders customer card data', () => {
+  it('renders customer card data', async () => {
     formatDate.mockReturnValue('July 23, 2024');
     render(
       <IntlProvider locale="en">
@@ -36,5 +37,9 @@ describe('CustomerCard', () => {
     expect(screen.getByText('/customer-6/')).toBeInTheDocument();
     expect(screen.getByText('Created July 23, 2024 • Last modified July 23, 2024')).toBeInTheDocument();
     expect(screen.getByText('Test Customer Name'));
+    const copy = screen.getByTestId('copy');
+    userEvent.click(copy);
+    await waitFor(() => expect(useCopyToClipboard).toHaveBeenCalledWith('test-id'));
+    await waitFor(() => expect(screen.getByText('Copied to clipboard')).toBeInTheDocument());
   });
 });