diff --git a/src/library-authoring/collections/CollectionInfoHeader.test.tsx b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
index 4894cc448..f564552a7 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.test.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
@@ -1,4 +1,5 @@
import type MockAdapter from 'axios-mock-adapter';
+import userEvent from '@testing-library/user-event'
import { mockCollectionHit } from '../../search-manager/data/api.mock';
import {
@@ -51,8 +52,8 @@ describe('', () => {
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 });
+ userEvent.clear(textBox);
+ userEvent.type(textBox, 'New Collection Title{enter}');
await waitFor(() => {
expect(axiosMock.history.patch[0].url).toEqual(url);
@@ -63,6 +64,25 @@ describe('', () => {
expect(mockShowToast).toHaveBeenCalledWith('Collection updated successfully.');
});
+ it('should not update collection title if title is the same', async () => {
+ const library = await mockContentLibrary(mockContentLibrary.libraryId);
+ render();
+ 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 });
+
+ userEvent.clear(textBox);
+ userEvent.type(textBox, mockCollectionHit.displayName);
+ userEvent.type(textBox, '{enter}');
+
+ await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
+
+ expect(textBox).not.toBeInTheDocument();
+ });
+
it('should close edit collection title on press Escape', async () => {
const library = await mockContentLibrary(mockContentLibrary.libraryId);
render();
@@ -73,8 +93,8 @@ describe('', () => {
const textBox = screen.getByRole('textbox', { name: /title input/i });
- fireEvent.change(textBox, { target: { value: 'New Collection Title' } });
- fireEvent.keyDown(textBox, { key: 'Escape', code: 'Escape', charCode: 27 });
+ userEvent.clear(textBox);
+ userEvent.type(textBox, 'New Collection Title{esc}');
await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
@@ -91,8 +111,8 @@ describe('', () => {
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 });
+ userEvent.clear(textBox);
+ userEvent.type(textBox, 'New Collection Title{enter}');
await waitFor(() => {
expect(axiosMock.history.patch[0].url).toEqual(url);
diff --git a/src/library-authoring/collections/CollectionInfoHeader.tsx b/src/library-authoring/collections/CollectionInfoHeader.tsx
index 01a78f99a..2309ab6b6 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -19,7 +19,7 @@ interface CollectionInfoHeaderProps {
collection: CollectionHit;
}
-const CollectionInfoHeader = ({ library, collection } : CollectionInfoHeaderProps) => {
+const CollectionInfoHeader = ({ library, collection }: CollectionInfoHeaderProps) => {
const intl = useIntl();
const [inputIsActive, setIsActive] = useState(false);
@@ -29,7 +29,7 @@ const CollectionInfoHeader = ({ library, collection } : CollectionInfoHeaderProp
const handleSaveDisplayName = useCallback(
(event) => {
const newTitle = event.target.value;
- if (newTitle && newTitle !== collection?.displayName) {
+ if (newTitle && newTitle !== collection.displayName) {
updateMutation.mutateAsync({
title: newTitle,
}).then(() => {
@@ -68,7 +68,7 @@ const CollectionInfoHeader = ({ library, collection } : CollectionInfoHeaderProp
id="title"
type="text"
aria-label="Title input"
- defaultValue={collection?.displayName}
+ defaultValue={collection.displayName}
onBlur={handleSaveDisplayName}
onKeyDown={handleOnKeyDown}
/>
@@ -76,7 +76,7 @@ const CollectionInfoHeader = ({ library, collection } : CollectionInfoHeaderProp
: (
<>
- {collection?.displayName}
+ {collection.displayName}
{library.canEditLibrary && (