UIQM-574 Added tests for Source File selection functionality

src/QuickMarcEditor/QuickMarcEditorRows/ControlNumberField/ControlNumberField.js

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useField } from 'react-final-form';
 
-import { AuthorityFileLookup } from '../../AuthorityFileLookup';
+import { SourceFileLookup } from '../../SourceFileLookup';
 import { ContentField } from '../ContentField';
 import { MARC_TYPES } from '../../../common/constants';
 import { QUICK_MARC_ACTIONS } from '../../constants';
@@ -22,8 +22,8 @@ const ControlNumberField = ({
 }) => {
   const { input, ...inputRest } = useField(name);
 
-  const handleAuthorityFileSelection = useCallback(() => {
-
+  const handleSourceFileSelection = useCallback(() => {
+    // TODO: handle generation of HRID + source file prefix here (UIQM-576)
   }, []);
 
   const canSelectSourceFile = marcType === MARC_TYPES.AUTHORITY && action === QUICK_MARC_ACTIONS.CREATE;
@@ -37,8 +37,8 @@ const ControlNumberField = ({
         {...inputRest}
       />
       {canSelectSourceFile && (
-        <AuthorityFileLookup
-          onAuthorityFileSelect={handleAuthorityFileSelection}
+        <SourceFileLookup
+          onSourceFileSelect={handleSourceFileSelection}
         />
       )}
     </>

src/QuickMarcEditor/QuickMarcEditorRows/ControlNumberField/ControlNumberField.test.js

@@ -0,0 +1,67 @@
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import { Form } from 'react-final-form';
+import arrayMutators from 'final-form-arrays';
+
+import { ControlNumberField } from './ControlNumberField';
+import { MARC_TYPES } from '../../../common/constants';
+import { QUICK_MARC_ACTIONS } from '../../constants';
+
+jest.mock('../../SourceFileLookup', () => ({
+  SourceFileLookup: ({ onSourceFileSelect }) => (
+    <button type="button" onClick={() => onSourceFileSelect({ target: { value: 'test-source-file-id' } })}>Select file</button>
+  ),
+}));
+
+const getControlNumberField = (props = {}, initialValues) => (
+  <Form
+    onSubmit={jest.fn()}
+    mutators={{ ...arrayMutators }}
+    initialValues={{
+      controlNumber: 'n 50000331',
+    }}
+    {...initialValues}
+    render={() => (
+      <ControlNumberField
+        id="id-1"
+        name="controlNumber"
+        marcType={MARC_TYPES.AUTHORITY}
+        action={QUICK_MARC_ACTIONS.CREATE}
+        {...props}
+      />
+    )}
+  />
+);
+
+const renderControlNumberField = (props = {}) => render(getControlNumberField(props));
+
+describe('Given ControlNumberField', () => {
+  it('should render content field', () => {
+    const {
+      getByRole,
+      getByText,
+    } = renderControlNumberField();
+
+    expect(getByRole('textbox')).toBeDefined();
+    expect(getByText('ui-quick-marc.sourceFileLookup')).toBeDefined();
+  });
+
+  describe('when marc type is not AUTHORITY', () => {
+    it('should not render source file lookup', () => {
+      const { queryByText } = renderControlNumberField({
+        marcType: MARC_TYPES.BIB,
+      });
+
+      expect(queryByText('ui-quick-marc.sourceFileLookup')).not.toBeDefined();
+    });
+  });
+
+  describe('when action is not CREATE', () => {
+    it('should not render source file lookup', () => {
+      const { queryByText } = renderControlNumberField({
+        action: QUICK_MARC_ACTIONS.EDIT,
+      });
+
+      expect(queryByText('ui-quick-marc.sourceFileLookup')).not.toBeDefined();
+    });
+  });
+});

src/QuickMarcEditor/AuthorityFileLookup/AuthorityFileLookup.js → src/QuickMarcEditor/SourceFileLookup/SourceFileLookup.js

@@ -8,15 +8,16 @@ import PropTypes from 'prop-types';
 
 import { useStripes } from '@folio/stripes/core';
 import { Button } from '@folio/stripes/components';
+
 import { useAuthoritySourceFiles } from '../../queries';
-import { AuthorityFileLookupModal } from './AuthorityFileLookupModal';
+import { SourceFileLookupModal } from './SourceFileLookupModal';
 
 const propTypes = {
-  onAuthorityFileSelect: PropTypes.func.isRequired,
+  onSourceFileSelect: PropTypes.func.isRequired,
 };
 
-const AuthorityFileLookup = ({
-  onAuthorityFileSelect,
+const SourceFileLookup = ({
+  onSourceFileSelect,
 }) => {
   const stripes = useStripes();
   const intl = useIntl();
@@ -35,18 +36,18 @@ const AuthorityFileLookup = ({
   const onConfirmModal = useCallback((sourceFileId) => {
     const selectedSourceFile = sourceFiles.find(sourceFile => sourceFile.id === sourceFileId);
 
-    onAuthorityFileSelect(selectedSourceFile);
+    onSourceFileSelect(selectedSourceFile);
     closeModal();
-  }, [onAuthorityFileSelect, closeModal, sourceFiles]);
+  }, [onSourceFileSelect, closeModal, sourceFiles]);
 
-  const label = intl.formatMessage({ id: 'ui-quick-marc.authorityFileLookup' });
+  const label = intl.formatMessage({ id: 'ui-quick-marc.sourceFileLookup' });
   const sourceFileOptions = useMemo(() => sourceFiles.map(sourceFile => ({
     label: sourceFile.name,
     value: sourceFile.id,
   })), [sourceFiles]);
 
   return (
-    <div>
+    <>
       <Button
         key="searchButton"
         buttonStyle="link"
@@ -55,16 +56,16 @@ const AuthorityFileLookup = ({
       >
         {label}
       </Button>
-      <AuthorityFileLookupModal
+      <SourceFileLookupModal
         open={isModalOpen}
         sourceFileOptions={sourceFileOptions}
         onConfirm={onConfirmModal}
         onCancel={onCancelModal}
       />
-    </div>
+    </>
   );
 };
 
-AuthorityFileLookup.propTypes = propTypes;
+SourceFileLookup.propTypes = propTypes;
 
-export { AuthorityFileLookup };
+export { SourceFileLookup };

src/QuickMarcEditor/SourceFileLookup/SourceFileLookup.test.js

@@ -0,0 +1,75 @@
+import {
+  render,
+  fireEvent,
+  waitFor,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import { SourceFileLookup } from './SourceFileLookup';
+import { useAuthoritySourceFiles } from '../../queries';
+import Harness from '../../../test/jest/helpers/harness';
+
+jest.mock('./SourceFileLookupModal', () => ({
+  SourceFileLookupModal: ({ onConfirm }) => (
+    <>
+      SourceFileLookupModal
+      <button type="button" onClick={() => onConfirm('source-file-id')}>Confirm</button>
+    </>
+  ),
+}));
+
+jest.mock('../../queries', () => ({
+  ...jest.requireActual('../../queries'),
+  useAuthoritySourceFiles: jest.fn(),
+}));
+
+const mockOnSourceFileSelect = jest.fn();
+
+const renderSourceFileLookup = (props = {}) => render(
+  <SourceFileLookup
+    onSourceFileSelect={mockOnSourceFileSelect}
+    {...props}
+  />,
+  { wrapper: Harness },
+);
+
+const sourceFiles = [{
+  id: 'source-file-id',
+  name: 'Test source file',
+}];
+
+describe('Given SourceFileLookup', () => {
+  beforeAll(() => {
+    useAuthoritySourceFiles.mockReturnValue({
+      sourceFiles,
+    });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the modal trigger button', async () => {
+    const {
+      getByRole,
+      getByText,
+    } = renderSourceFileLookup();
+
+    fireEvent.click(getByRole('button', { name: 'ui-quick-marc.sourceFileLookup' }));
+
+    await waitFor(() => expect(getByText('SourceFileLookupModal')).toBeDefined());
+  });
+
+  describe('when confirming source file selection in modal', () => {
+    it('should call onSourceFileSelect callback with correct source file', async () => {
+      const {
+        getByRole,
+        getByText,
+      } = renderSourceFileLookup();
+
+      fireEvent.click(getByRole('button', { name: 'ui-quick-marc.sourceFileLookup' }));
+      fireEvent.click(getByText('Confirm'));
+
+      expect(mockOnSourceFileSelect).toHaveBeenCalledWith(sourceFiles[0]);
+    });
+  });
+});

src/QuickMarcEditor/AuthorityFileLookup/AuthorityFileLookupModal.js → src/QuickMarcEditor/SourceFileLookup/SourceFileLookupModal.js

@@ -26,7 +26,7 @@ const propTypes = {
   onCancel: PropTypes.func.isRequired,
 };
 
-const AuthorityFileLookupModal = ({
+const SourceFileLookupModal = ({
   open,
   sourceFileOptions,
   onConfirm,
@@ -48,16 +48,14 @@ const AuthorityFileLookupModal = ({
     setSelectedSourceFile(e.target.value);
   }, [setSelectedSourceFile]);
 
-  const label = intl.formatMessage({ id: 'ui-quick-marc.authorityFileLookup' });
-
   const renderForm = useCallback(() => {
     return (
       <>
         <Row>
           <Col xs={12}>
             <Select
-              label={intl.formatMessage({ id: 'ui-quick-marc.authorityFileLookup.fieldLabel' })}
-              placeholder={intl.formatMessage({ id: 'ui-quick-marc.authorityFileLookup.placeholder' })}
+              label={intl.formatMessage({ id: 'ui-quick-marc.sourceFileLookupModal.fieldLabel' })}
+              placeholder={intl.formatMessage({ id: 'ui-quick-marc.sourceFileLookupModal.placeholder' })}
               onChange={onSourceFileChange}
               value={selectedSourceFile}
               dataOptions={sourceFileOptions}
@@ -97,14 +95,14 @@ const AuthorityFileLookupModal = ({
     <Modal
       open={open}
       size="small"
-      label={label}
+      label={intl.formatMessage({ id: 'ui-quick-marc.sourceFileLookupModal' })}
       onClose={onCancel}
     >
       {renderForm()}
     </Modal>
   );
 };
 
-AuthorityFileLookupModal.propTypes = propTypes;
+SourceFileLookupModal.propTypes = propTypes;
 
-export { AuthorityFileLookupModal };
+export { SourceFileLookupModal };

src/QuickMarcEditor/SourceFileLookup/SourceFileLookupModal.test.js

@@ -0,0 +1,105 @@
+import {
+  render,
+  fireEvent,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import { SourceFileLookupModal } from './SourceFileLookupModal';
+
+const sourceFileOptions = [{
+  label: 'Source File A',
+  value: 'sfa',
+}, {
+  label: 'Source File B',
+  value: 'sfb',
+}];
+
+const mockOnConfirm = jest.fn();
+const mockOnCancel = jest.fn();
+
+const renderSourceFileLookupModal = (props = {}) => render(
+  <SourceFileLookupModal
+    open
+    sourceFileOptions={sourceFileOptions}
+    onConfirm={mockOnConfirm}
+    onCancel={mockOnCancel}
+    {...props}
+  />,
+);
+
+describe('Given SourceFileLookupModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render modal', () => {
+    const { getByText } = renderSourceFileLookupModal();
+
+    expect(getByText('ui-quick-marc.sourceFileLookupModal')).toBeDefined();
+  });
+
+  describe('when no value is selected', () => {
+    it('should have empty default value selected', () => {
+      const { getByLabelText } = renderSourceFileLookupModal();
+
+      const select = getByLabelText('ui-quick-marc.sourceFileLookupModal.fieldLabel');
+
+      expect(select.value).toEqual('');
+    });
+
+    it('should disable Save & close button', () => {
+      const { getByRole } = renderSourceFileLookupModal();
+
+      const button = getByRole('button', { name: 'stripes-components.saveAndClose' });
+
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('when some source file value is selected', () => {
+    it('should enable Save & close button', async () => {
+      const {
+        getByRole,
+        getByLabelText,
+      } = renderSourceFileLookupModal();
+
+      const select = getByLabelText('ui-quick-marc.sourceFileLookupModal.fieldLabel');
+
+      fireEvent.change(select, { target: { value: sourceFileOptions[0].value } });
+
+      const button = getByRole('button', { name: 'stripes-components.saveAndClose' });
+
+      expect(button).toBeEnabled();
+    });
+  });
+
+  describe('when confirming Source File selection', () => {
+    it('should call onConfirm with correct source file id', async () => {
+      const {
+        getByRole,
+        getByLabelText,
+      } = renderSourceFileLookupModal();
+
+      const select = getByLabelText('ui-quick-marc.sourceFileLookupModal.fieldLabel');
+
+      fireEvent.change(select, { target: { value: sourceFileOptions[0].value } });
+
+      const button = getByRole('button', { name: 'stripes-components.saveAndClose' });
+
+      fireEvent.click(button);
+
+      expect(mockOnConfirm).toHaveBeenCalledWith(sourceFileOptions[0].value);
+    });
+  });
+
+  describe('when closing the modal', () => {
+    it('should call onCancel', async () => {
+      const { getByRole } = renderSourceFileLookupModal();
+
+      const button = getByRole('button', { name: 'stripes-components.cancel' });
+
+      fireEvent.click(button);
+
+      expect(mockOnCancel).toHaveBeenCalled();
+    });
+  });
+});

src/QuickMarcEditor/SourceFileLookup/index.js

@@ -0,0 +1 @@
+export * from './SourceFileLookup';