fixup! feat: add copy to clipboard feature to library authoring

openedx · Aug 2, 2024 · e2004d5 · e2004d5
1 parent 0dae5ae
commit e2004d5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 35 deletions.
diff --git a/src/library-authoring/components/ComponentCard.test.tsx b/src/library-authoring/components/ComponentCard.test.tsx
@@ -3,11 +3,12 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import type { Store } from 'redux';
 
 import { ToastProvider } from '../../generic/toast-context';
+import { getClipboardUrl } from '../../generic/data/api';
 import { ContentHit } from '../../search-manager';
 import initializeStore from '../../store';
 import ComponentCard from './ComponentCard';
@@ -68,7 +69,7 @@ describe('<ComponentCard />', () => {
   });
 
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
     axiosMock.restore();
   });
 
@@ -79,14 +80,47 @@ describe('<ComponentCard />', () => {
     expect(getByText('This is a text: ID=1')).toBeInTheDocument();
   });
 
-  it('should call the updateClipboard function when the copy button is clicked', () => {
-    axiosMock.onPost('/api/clipboard/').reply(200, {});
-    const { getByTestId } = render(<RootWrapper />);
+  it('should call the updateClipboard function when the copy button is clicked', async () => {
+    axiosMock.onPost(getClipboardUrl()).reply(200, {});
+    const { getByRole, getByTestId, getByText } = render(<RootWrapper />);
 
     // Open menu
+    expect(getByTestId('component-card-menu-toggle')).toBeInTheDocument();
     fireEvent.click(getByTestId('component-card-menu-toggle'));
-    fireEvent.click(getByTestId('component-card-menu-copy-clipboard'));
 
-    screen.logTestingPlaygroundURL();
+    // Click copy to clipboard
+    expect(getByRole('button', { name: 'Copy to clipboard' })).toBeInTheDocument();
+    fireEvent.click(getByRole('button', { name: 'Copy to clipboard' }));
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(
+      JSON.stringify({ usage_key: contentHit.usageKey }),
+    );
+
+    await waitFor(() => {
+      expect(getByText('Component copied to clipboard')).toBeInTheDocument();
+    });
+  });
+
+  it('should show error message if the api call fails', async () => {
+    axiosMock.onPost(getClipboardUrl()).reply(400);
+    const { getByRole, getByTestId, getByText } = render(<RootWrapper />);
+
+    // Open menu
+    expect(getByTestId('component-card-menu-toggle')).toBeInTheDocument();
+    fireEvent.click(getByTestId('component-card-menu-toggle'));
+
+    // Click copy to clipboard
+    expect(getByRole('button', { name: 'Copy to clipboard' })).toBeInTheDocument();
+    fireEvent.click(getByRole('button', { name: 'Copy to clipboard' }));
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(
+      JSON.stringify({ usage_key: contentHit.usageKey }),
+    );
+
+    await waitFor(() => {
+      expect(getByText('Failed to copy component to clipboard')).toBeInTheDocument();
+    });
   });
 });
diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
@@ -23,30 +23,6 @@ type ComponentCardProps = {
   blockTypeDisplayName: string,
 };
 
-const TestComponentCardMenu = () => (
-  <Dropdown id="component-card-dropdown">
-    <Dropdown.Toggle
-      id="component-card-menu-toggle"
-      variant="primary"
-      alt="component-card-menu-toggle"
-      data-testid="component-card-menu-toggle"
-    >
-      Test
-    </Dropdown.Toggle>
-    <Dropdown.Menu>
-      <Dropdown.Item disabled>
-        Edit
-      </Dropdown.Item>
-      <Dropdown.Item data-testid="component-card-menu-copy-clipboard">
-        Copy to clipboard
-      </Dropdown.Item>
-      <Dropdown.Item disabled>
-        Add to collection
-      </Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
-);
-
 const ComponentCardMenu = ({ usageKey }: { usageKey: string }) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
@@ -111,8 +87,7 @@ const ComponentCard = ({ contentHit, blockTypeDisplayName } : ComponentCardProps
           }
           actions={(
             <ActionRow>
-              <TestComponentCardMenu />
-              { /* <ComponentCardMenu usageKey={usageKey} /> */ }
+              <ComponentCardMenu usageKey={usageKey} />
             </ActionRow>
           )}
         />

diff --git a/src/library-authoring/components/messages.ts b/src/library-authoring/components/messages.ts
@@ -13,12 +13,12 @@ const messages = defineMessages({
   },
   menuCopyToClipboard: {
     id: 'course-authoring.library-authoring.component.menu.copy',
-    defaultMessage: 'Copy to Clipboard',
+    defaultMessage: 'Copy to clipboard',
     description: 'Menu item for copy a component.',
   },
   menuAddToCollection: {
     id: 'course-authoring.library-authoring.component.menu.add',
-    defaultMessage: 'Add to Collection',
+    defaultMessage: 'Add to collection',
     description: 'Menu item for add a component to collection.',
   },
   copyToClipboardSuccess: {