UIIN-2401: Reset BoundWithModal when modal is closed (#2174)

CHANGELOG.md

@@ -149,6 +149,7 @@
 * Change title for the print popup. Refs UIIN-2329.
 * Move @testing-library/* to dev-deps. Refs UIIN-2309.
 * Rename `hrid` qindex for item to avoid collisions with holdings and instances. Fixes UIIN-2443.
+* Reset `<BoundWithModal>` when modal is closed. Fixes UIIN-2401.
 
 ## [9.2.0](https://github.com/folio-org/ui-inventory/tree/v9.2.0) (2022-10-27)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v9.1.0...v9.2.0)

src/edit/items/BoundWithModal.js

@@ -24,7 +24,6 @@ const BoundWithModal = ({
   onOk,
 }) => {
   const intl = useIntl();
-
   const initHrids = () => Array(FIELD_COUNT).fill('');
   const [hrids, setHrids] = useState(initHrids());
 
@@ -46,13 +45,18 @@ const BoundWithModal = ({
     setHrids(initHrids());
   };
 
+  const handleClose = (event) => {
+    setHrids(initHrids());
+    onClose(event);
+  };
+
   return (
     <Modal
       data-testid="bound-with-modal"
       open={open}
       dismissible
       label={<FormattedMessage id="ui-inventory.boundWithTitles.add" />}
-      onClose={onClose}
+      onClose={handleClose}
       footer={(
         <ModalFooter>
           <Button
@@ -65,7 +69,7 @@ const BoundWithModal = ({
           </Button>
           <Button
             data-testid="bound-with-modal-cancel-button"
-            onClick={onClose}
+            onClick={handleClose}
           >
             <FormattedMessage id="ui-inventory.cancel" />
           </Button>

src/edit/items/BoundWithModal.test.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { screen } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+
+import '../../../test/jest/__mock__';
+
+import { renderWithIntl, translationsProperties } from '../../../test/jest/helpers';
+
+
+import BoundWithModal from './BoundWithModal';
+
+const itemMock = {
+  hrid: '12345',
+  barcode: '67890',
+};
+
+const onOkMock = jest.fn();
+const onCloseMock = jest.fn();
+
+const renderBoundWithModal = () => renderWithIntl(
+  <BoundWithModal
+    item={itemMock}
+    open
+    onClose={onCloseMock}
+    onOk={onOkMock}
+  />,
+  translationsProperties
+);
+
+describe('BoundWithModal', () => {
+  beforeEach(() => {
+    renderBoundWithModal();
+  });
+
+  it('renders without crashing', () => {
+    expect(screen.getByTestId('bound-with-modal')).toBeInTheDocument();
+  });
+
+  it('displays item details', () => {
+    expect(screen.getByText(itemMock.hrid)).toBeInTheDocument();
+    expect(screen.getByText(itemMock.barcode)).toBeInTheDocument();
+  });
+
+  it('triggers onOk callback with input values when save button is clicked', () => {
+    const inputs = screen.getAllByTestId('bound-with-modal-input');
+
+    // fill inputs with values
+    inputs.forEach((input, i) => {
+      userEvent.type(input, `Value ${i}`);
+    });
+
+    userEvent.click(screen.getByTestId('bound-with-modal-save-button'));
+
+    expect(onOkMock).toHaveBeenCalledWith(['Value 0', 'Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']);
+  });
+
+  it('triggers onClose callback when cancel button is clicked', () => {
+    userEvent.click(screen.getByTestId('bound-with-modal-cancel-button'));
+
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});