fixup! feat: improve collection sidebar

Author: rpenido

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

@@ -7,27 +7,30 @@ import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/
 import { type CollectionHit, formatSearchHit } from '../../search-manager/data/api';
 import {
   initializeMocks,
+  fireEvent,
   render,
   screen,
   waitFor,
   within,
 } from '../../testUtils';
 import mockResult from '../__mocks__/collection-search.json';
+import * as api from '../data/api';
 import { mockContentLibrary } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
 
 const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
 
 let axiosMock: MockAdapter;
-// let mockShowToast: (message: string) => void;
+let mockShowToast: (message: string) => void;
 
 mockContentSearchConfig.applyMock();
+const library = mockContentLibrary.libraryData;
 
 describe('<CollectionDetails />', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
     axiosMock = mocks.axiosMock;
-    // mockShowToast = mocks.mockShowToast;
+    mockShowToast = mocks.mockShowToast;
   });
 
   afterEach(() => {
@@ -38,7 +41,6 @@ describe('<CollectionDetails />', () => {
 
   const renderCollectionDetails = async () => {
     const collectionData: CollectionHit = formatSearchHit(mockResult.results[2].hits[0]) as CollectionHit;
-    const library = mockContentLibrary.libraryData;
 
     render((
       <SearchContextProvider>
@@ -49,7 +51,7 @@ describe('<CollectionDetails />', () => {
     await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
   };
 
-  it('should render Collection Detail', async () => {
+  it('should render Collection Details', async () => {
     mockSearchResult(mockResult);
     await renderCollectionDetails();
 
@@ -66,6 +68,76 @@ describe('<CollectionDetails />', () => {
     expect(screen.getByText('September 19, 2024')).toBeInTheDocument();
   });
 
+  it('should allow modifying the description', async () => {
+    mockSearchResult(mockResult);
+    await renderCollectionDetails();
+
+    const {
+      description: originalDescription,
+      block_id: blockId,
+      context_key: contextKey,
+    } = mockResult.results[2].hits[0];
+
+    expect(screen.getByText(originalDescription)).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(contextKey, blockId);
+    axiosMock.onPatch(url).reply(200);
+
+    const textArea = screen.getByRole('textbox');
+
+    // Change the description to the same value
+    fireEvent.focus(textArea);
+    fireEvent.change(textArea, { target: { value: originalDescription } });
+    fireEvent.blur(textArea);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch).toHaveLength(0);
+      expect(mockShowToast).not.toHaveBeenCalled();
+    });
+
+    // Change the description to a new value
+    fireEvent.focus(textArea);
+    fireEvent.change(textArea, { target: { value: 'New description' } });
+    fireEvent.blur(textArea);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch).toHaveLength(1);
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ description: 'New description' }));
+      expect(mockShowToast).toHaveBeenCalledWith('Collection updated successfully.');
+    });
+  });
+
+  it('should show error while modifing the description', async () => {
+    mockSearchResult(mockResult);
+    await renderCollectionDetails();
+
+    const {
+      description: originalDescription,
+      block_id: blockId,
+      context_key: contextKey,
+    } = mockResult.results[2].hits[0];
+
+    expect(screen.getByText(originalDescription)).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(contextKey, blockId);
+    axiosMock.onPatch(url).reply(500);
+
+    const textArea = screen.getByRole('textbox');
+
+    // Change the description to a new value
+    fireEvent.focus(textArea);
+    fireEvent.change(textArea, { target: { value: 'New description' } });
+    fireEvent.blur(textArea);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch).toHaveLength(1);
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ description: 'New description' }));
+      expect(mockShowToast).toHaveBeenCalledWith('Failed to update collection.');
+    });
+  });
+
   it('should render Collection stats', async () => {
     mockSearchResult(mockResult);
     await renderCollectionDetails();

src/library-authoring/collections/CollectionDetails.tsx

@@ -93,7 +93,7 @@ const CollectionDetails = ({ library, collection }: CollectionDetailsProps) => {
 
   const [description, setDescription] = useState(collection.description);
 
-  const updateMutation = useUpdateCollection(library.id, collection.blockId);
+  const updateMutation = useUpdateCollection(collection.contextKey, collection.blockId);
 
   // istanbul ignore if: this should never happen
   if (!collection) {