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 && (