fixup! feat: improve collection sidebar

Author: rpenido

src/library-authoring/collections/CollectionDetails.tsx

@@ -97,7 +97,7 @@ const CollectionDetails = ({ library, collection }: CollectionDetailsProps) => {
 
   // istanbul ignore if: this should never happen
   if (!collection) {
-    return null;
+    throw new Error('A collection must be provided to CollectionDetails');
   }
 
   const onSubmit = (e: React.FocusEvent<HTMLTextAreaElement>) => {

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

@@ -0,0 +1,51 @@
+import { mockCollectionHit } from '../../search-manager/data/api.mock';
+import {
+  initializeMocks,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import * as api from '../data/api';
+import CollectionInfoHeader from './CollectionInfoHeader';
+
+describe('<CollectionInfoHeader />', () => {
+  it('should render Collection info Header', async () => {
+    initializeMocks();
+    const library = await mockContentLibrary(mockContentLibrary.libraryId);
+    render(<CollectionInfoHeader library={library} collection={mockCollectionHit} />);
+
+    expect(screen.getByText(mockCollectionHit.displayName)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /edit collection title/i })).toBeInTheDocument();
+  });
+
+  it('should not render edit title button without permission', async () => {
+    const readOnlyLibrary = await mockContentLibrary(mockContentLibrary.libraryIdReadOnly);
+    render(<CollectionInfoHeader library={readOnlyLibrary} collection={mockCollectionHit} />);
+    expect(screen.queryByRole('button', { name: /edit collection title/i })).not.toBeInTheDocument();
+  });
+
+  it('should update collection title', async () => {
+    const { axiosMock, mockShowToast } = initializeMocks();
+    const library = await mockContentLibrary(mockContentLibrary.libraryId);
+    render(<CollectionInfoHeader library={library} collection={mockCollectionHit} />);
+    const url = api.getLibraryCollectionApiUrl(library.id, mockCollectionHit.blockId);
+    axiosMock.onPatch(url).reply(200);
+
+    fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    fireEvent.change(textBox, { target: { value: 'New Collection Title' } });
+    fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Collection Title' }));
+    });
+
+    expect(textBox).not.toBeInTheDocument();
+    expect(mockShowToast).toHaveBeenCalledWith('Collection updated successfully.');
+  });
+});

src/search-manager/data/api.mock.ts

@@ -40,3 +40,26 @@ export function mockSearchResult(mockResponse: MultiSearchResponse) {
     return newMockResponse;
   }, { overwriteRoutes: true });
 }
+
+export const mockCollectionHit = {
+  displayName: 'Collection 1',
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer.',
+  id: '1',
+  type: 'collection',
+  usageKey: 'lib:OpenedX:CSPROB2:collection:coll1',
+  blockId: 'coll1',
+  tags: {},
+  breadcrumbs: [
+    {
+      displayName: 'CS problems 2',
+    },
+  ],
+  created: 1725534795.628254,
+  modified: 1725878053.420395,
+  contextKey: 'lib:OpenedX:CSPROB2',
+  org: 'OpenedX',
+  formatted: {
+    displayName: 'Collection 1',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…',
+  },
+} satisfies api.CollectionHit;