fix: nits and improving coverage

Author: rpenido

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -394,7 +394,7 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
 
-  it('should open component sidebar, showing manage tab on clicking add to collection menu item', async () => {
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item (component)', async () => {
     const mockResult0 = { ...mockResult }.results[0].hits[0];
     const displayName = 'Introduction to Testing';
     expect(mockResult0.display_name).toStrictEqual(displayName);
@@ -419,6 +419,29 @@ describe('<LibraryAuthoringPage />', () => {
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
 
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item (unit)', async () => {
+    const displayName = 'Test Unit';
+    await renderLibraryPage();
+
+    waitFor(() => expect(screen.getAllByTestId('container-card-menu-toggle').length).toBeGreaterThan(0));
+
+    // Open menu
+    fireEvent.click((await screen.findAllByTestId('container-card-menu-toggle'))[0]);
+    // Click add to collection
+    fireEvent.click(screen.getByRole('button', { name: 'Add to collection' }));
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, queryByText } = within(sidebar);
+
+    await waitFor(() => expect(queryByText(displayName)).toBeInTheDocument());
+    expect(getByRole('tab', { selected: true })).toHaveTextContent('Organize');
+    const closeButton = getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
   it('should open and close the collection sidebar', async () => {
     await renderLibraryPage();
 
@@ -734,7 +757,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.click(cancelButton);
     expect(unitModalHeading).not.toBeInTheDocument();
 
-    // Open new unit modal again and create a collection
+    // Open new unit modal again and create a unit
     fireEvent.click(newUnitButton);
     const createButton = screen.getByRole('button', { name: /create/i });
     const nameField = screen.getByRole('textbox', { name: /name your unit/i });
@@ -802,7 +825,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.click(newButton);
     expect(screen.getByText(/add content/i)).toBeInTheDocument();
 
-    // Open New collection Modal
+    // Open New Unit Modal
     const sidebar = screen.getByTestId('library-sidebar');
     const newUnitButton = within(sidebar).getAllByRole('button', { name: /unit/i })[0];
     fireEvent.click(newUnitButton);

src/library-authoring/__mocks__/collection-search.json

@@ -218,8 +218,45 @@
           "org": "OpenedX",
           "access_id": 16,
           "num_children": 1
+        },
+        {
+          "display_name": "Test Unit",
+          "block_id": "test-unit-9284e2",
+          "id": "lctAximTESTunittest-unit-9284e2-a9a4386e",
+          "type": "library_container",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1742221203.895054,
+          "modified": 1742221203.895054,
+          "usage_key": "lct:Axim:TEST:unit:test-unit-9284e2",
+          "block_type": "unit",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "num_children": 0,
+          "_formatted": {
+            "display_name": "Test Unit",
+            "block_id": "test-unit-9284e2",
+            "id": "lctAximTESTunittest-unit-9284e2-a9a4386e",
+            "type": "library_container",
+            "breadcrumbs": [
+              {
+                "display_name": "Test Library"
+              }
+            ],
+            "created": "1742221203.895054",
+            "modified": "1742221203.895054",
+            "usage_key": "lct:Axim:TEST:unit:test-unit-9284e2",
+            "block_type": "unit",
+            "context_key": "lib:Axim:TEST",
+            "org": "Axim",
+            "access_id": "15",
+            "num_children": "0"
+          }
         }
-      
       ],
       "query": "",
       "processingTimeMs": 1,

src/library-authoring/collections/LibraryCollectionPage.test.tsx

@@ -15,6 +15,7 @@ import {
   mockContentLibrary,
   mockXBlockFields,
   mockGetCollectionMetadata,
+  mockGetContainerMetadata,
 } from '../data/api.mocks';
 import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
 import { mockBroadcastChannel, mockClipboardEmpty } from '../../generic/data/api.mock';
@@ -31,6 +32,7 @@ mockContentSearchConfig.applyMock();
 mockGetBlockTypes.applyMock();
 mockContentLibrary.applyMock();
 mockXBlockFields.applyMock();
+mockGetContainerMetadata.applyMock();
 mockBroadcastChannel();
 
 const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
@@ -375,4 +377,34 @@ describe('<LibraryCollectionPage />', () => {
     // Should close sidebar as component was removed
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
   });
+
+  it('should remove unit from collection and hides sidebar', async () => {
+    const url = getLibraryCollectionItemsApiUrl(
+      mockContentLibrary.libraryId,
+      mockCollection.collectionId,
+    );
+    axiosMock.onDelete(url).reply(204);
+    const displayName = 'Test Unit';
+    await renderLibraryCollectionPage();
+
+    // Wait for the unit cards to load
+    waitFor(() => expect(screen.getAllByTestId('container-card-menu-toggle').length).toBeGreaterThan(0));
+
+    // open sidebar
+    fireEvent.click(await screen.findByText(displayName));
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).toBeInTheDocument());
+
+    // Open menu
+    fireEvent.click((await screen.findAllByTestId('container-card-menu-toggle'))[0]);
+
+    // Click remove to collection
+    fireEvent.click(screen.getByRole('button', { name: 'Remove from collection' }));
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+    });
+    expect(mockShowToast).toHaveBeenCalledWith('Item successfully removed');
+    // Should close sidebar as component was removed
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
 });

src/library-authoring/components/ContainerCard.tsx

@@ -32,7 +32,6 @@ const ContainerMenu = ({ hit } : ContainerMenuProps) => {
   const intl = useIntl();
   const {
     contextKey,
-    blockId,
     usageKey: containerId,
     displayName,
   } = hit;
@@ -74,14 +73,13 @@ const ContainerMenu = ({ hit } : ContainerMenuProps) => {
           src={MoreVert}
           iconAs={Icon}
           variant="primary"
-          alt={intl.formatMessage(messages.collectionCardMenuAlt)}
+          alt={intl.formatMessage(messages.containerCardMenuAlt)}
           data-testid="container-card-menu-toggle"
         />
         <Dropdown.Menu>
           <Dropdown.Item
             as={Link}
-            to={`/library/${contextKey}/container/${blockId}`}
-            disabled
+            to={`/library/${contextKey}/unit/${containerId}`}
           >
             <FormattedMessage {...messages.menuOpen} />
           </Dropdown.Item>