test: add tests for collection delete

src/library-authoring/components/CollectionCard.test.tsx

@@ -1,13 +1,19 @@
-import { initializeMocks, render, screen } from '../../testUtils';
+import { initializeMocks, render, screen, waitFor, waitForElementToBeRemoved, within } from '../../testUtils';
+import userEvent from '@testing-library/user-event';
+import type MockAdapter from 'axios-mock-adapter';
 
 import { type CollectionHit } from '../../search-manager';
 import CollectionCard from './CollectionCard';
+import messages from './messages';
+import { getLibraryCollectionApiUrl, getLibraryCollectionRestoreApiUrl } from '../data/api';
 
 const CollectionHitSample: CollectionHit = {
-  id: '1',
+  id: 'lib-collectionorg1democourse-collection-display-name',
   type: 'collection',
   contextKey: 'lb:org1:Demo_Course',
+  usageKey: 'lib-collection:org1:Demo_Course:collection-display-name',
   org: 'org1',
+  blockId: 'collection-display-name',
   breadcrumbs: [{ displayName: 'Demo Lib' }],
   displayName: 'Collection Display Name',
   description: 'Collection description',
@@ -21,9 +27,14 @@ const CollectionHitSample: CollectionHit = {
   tags: {},
 };
 
+let axiosMock: MockAdapter;
+let mockShowToast;
+
 describe('<CollectionCard />', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
   });
 
   afterEach(() => {
@@ -37,4 +48,80 @@ describe('<CollectionCard />', () => {
     expect(screen.queryByText('Collection description')).toBeInTheDocument();
     expect(screen.queryByText('Collection (2)')).toBeInTheDocument();
   });
+
+  it('should show confirmation box, delete collection and show toast to undo deletion', async () => {
+    const url = getLibraryCollectionApiUrl(CollectionHitSample.contextKey, CollectionHitSample.blockId);
+    axiosMock.onDelete(url).reply(204);
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    // Open menu
+    let menuBtn = await screen.findByRole('button', { name: messages.componentCardMenuAlt.defaultMessage });
+    userEvent.click(menuBtn);
+    // find and click delete menu option.
+    expect(screen.queryByText('Delete')).toBeInTheDocument();
+    let deleteBtn = await screen.findByRole('button', { name: 'Delete' });
+    userEvent.click(deleteBtn);
+    // verify confirmation dialog and click on cancel button
+    let dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
+    expect(dialog).toBeInTheDocument();
+    let cancelBtn = await screen.findByRole('button', { name: 'Cancel' });
+    userEvent.click(cancelBtn);
+    expect(axiosMock.history.delete.length).toEqual(0);
+    expect(cancelBtn).not.toBeInTheDocument();
+
+    // Open menu
+    menuBtn = await screen.findByRole('button', { name: messages.componentCardMenuAlt.defaultMessage });
+    userEvent.click(menuBtn);
+    // click on confirm button to delete
+    deleteBtn = await screen.findByRole('button', { name: 'Delete' });
+    userEvent.click(deleteBtn);
+    dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
+    const confirmBtn = await within(dialog).findByRole('button', { name: 'Delete' });
+    userEvent.click(confirmBtn);
+    await waitForElementToBeRemoved(() => {
+      return screen.queryByRole('dialog', { name: 'Delete this collection?' })
+    });
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalled();
+    });
+    // Get restore / undo func from the toast
+    const restoreFn = mockShowToast.mock.calls[0][1].onClick;
+
+    const restoreUrl = getLibraryCollectionRestoreApiUrl(CollectionHitSample.contextKey, CollectionHitSample.blockId);
+    axiosMock.onPost(restoreUrl).reply(200);
+    // restore collection
+    restoreFn();
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalledWith('Undo successful');
+    });
+  });
+
+  it('should show failed toast on delete collection failure', async () => {
+    const url = getLibraryCollectionApiUrl(CollectionHitSample.contextKey, CollectionHitSample.blockId);
+    axiosMock.onDelete(url).reply(404);
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    // Open menu
+    const menuBtn = await screen.findByRole('button', { name: messages.componentCardMenuAlt.defaultMessage });
+    userEvent.click(menuBtn);
+    // find and click delete menu option.
+    const deleteBtn = await screen.findByRole('button', { name: 'Delete' });
+    userEvent.click(deleteBtn);
+    const dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
+    const confirmBtn = await within(dialog).findByRole('button', { name: 'Delete' });
+    userEvent.click(confirmBtn);
+    await waitForElementToBeRemoved(() => {
+      return screen.queryByRole('dialog', { name: 'Delete this collection?' })
+    });
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalledWith('Failed to delete collection');
+    });
+  });
 });

src/testUtils.tsx

@@ -34,6 +34,7 @@ let axiosMock: MockAdapter;
 let mockToastContext: ToastContextData = {
   showToast: jest.fn(),
   closeToast: jest.fn(),
+  toastAction: undefined,
   toastMessage: null,
 };
 
@@ -172,12 +173,14 @@ export function initializeMocks({ user = defaultUser, initialState = undefined }
     showToast: jest.fn(),
     closeToast: jest.fn(),
     toastMessage: null,
+    toastAction: undefined,
   };
 
   return {
     reduxStore,
     axiosMock,
     mockShowToast: mockToastContext.showToast,
+    mockToastAction: mockToastContext.toastAction,
   };
 }