Add tests

src/components/Accounts/ChargeFeeFine/ChargeFeeFine.js

@@ -406,24 +406,24 @@ class ChargeFeeFine extends React.Component {
     );
   }
 
-  onSubmitCharge = (data) => {
-    const dataToSend = _.cloneDeep(data);
+  onSubmitCharge = (dataToSend) => {
+    const data = _.cloneDeep(dataToSend);
 
-    _.unset(dataToSend, NEW_FEE_FINE_FIELD_NAMES.ITEM_BARCODE);
-    _.unset(dataToSend, NEW_FEE_FINE_FIELD_NAMES.KEY_OF_ITEM_BARCODE);
+    _.unset(data, NEW_FEE_FINE_FIELD_NAMES.ITEM_BARCODE);
+    _.unset(data, NEW_FEE_FINE_FIELD_NAMES.KEY_OF_ITEM_BARCODE);
 
-    if (dataToSend.pay) {
-      delete dataToSend.pay;
-      this.type.remaining = dataToSend.amount;
+    if (data.pay) {
+      delete data.pay;
+      this.type.remaining = data.amount;
 
-      return this.chargeAction(dataToSend)
-        .then(() => this.payAction(dataToSend))
+      return this.chargeAction(data)
+        .then(() => this.payAction(data))
         .then(() => this.goBack());
     } else {
-      delete dataToSend.pay;
+      delete data.pay;
 
-      return this.chargeAction(dataToSend)
-        .then(() => this.showCalloutMessage(dataToSend))
+      return this.chargeAction(data)
+        .then(() => this.showCalloutMessage(data))
         .then(() => this.goBack());
     }
   }

src/components/Accounts/ChargeFeeFine/ChargeFeeFine.test.js

@@ -0,0 +1,77 @@
+import {
+  screen,
+  render,
+} from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+
+import ChargeFeeFine from './ChargeFeeFine';
+import ChargeForm from './ChargeForm';
+
+const basicProps = {
+  resources: {
+    activeRecord: {
+      isBarcodeValidated: true,
+    },
+  },
+  mutator: {
+    activeRecord: {
+      update: jest.fn(),
+    },
+  },
+  user: {},
+  stripes: {},
+  location: {},
+  history: {},
+  intl: {},
+  match: {
+    params: {},
+  },
+  okapi: {
+    currentUser: {},
+  },
+};
+const testIds = {
+  selectItem: 'selectItem',
+};
+const itemBarcode = 'itemBarcode';
+
+jest.mock('./ChargeForm', () => jest.fn(({
+  onClickSelectItem,
+}) => (
+  <>
+    <button
+      type="button"
+      data-testid={testIds.selectItem}
+      onClick={() => onClickSelectItem(itemBarcode)}
+    >
+      Enter
+    </button>
+  </>
+)));
+jest.mock('./ItemLookup', () => jest.fn(() => <div />));
+jest.mock('../Actions/ActionModal', () => jest.fn(() => <div />));
+
+describe('ChargeFeeFine', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  beforeEach(() => {
+    render(<ChargeFeeFine {...basicProps} />);
+  });
+
+  it('should trigger ChargeForm', () => {
+    expect(ChargeForm).toHaveBeenCalled();
+  });
+
+  it('should update activeRecord', async () => {
+    const selectItemButton = screen.getByTestId(testIds.selectItem);
+
+    await userEvent.click(selectItemButton);
+
+    expect(basicProps.mutator.activeRecord.update).toHaveBeenCalledWith({
+      barcode: itemBarcode,
+      isBarcodeValidated: true,
+    });
+  });
+});

src/components/Accounts/ChargeFeeFine/ChargeForm.test.js

@@ -139,6 +139,9 @@ const propData = {
     ownerId: '109155d9-3b60-4a3d-a6b1-066cf1b1356b',
     metadata: { createdDate: '2022-03-01T03:22:48.262+00:00', updatedDate: '2022-03-01T03:22:48.262+00:00' },
   }],
+  resources: {
+    items: {},
+  },
 };
 
 describe('ChargeForm component', () => {

src/components/Accounts/ChargeFeeFine/ItemInfo.js

@@ -18,8 +18,18 @@ class ItemInfo extends React.Component {
     resources: PropTypes.shape({
       items: PropTypes.shape({
         records: PropTypes.arrayOf(PropTypes.object),
+        isPending: PropTypes.bool,
+      }),
+      activeRecord: PropTypes.shape({
+        barcode: PropTypes.string,
       }),
     }).isRequired,
+    mutator: PropTypes.shape({
+      activeRecord: PropTypes.shape({
+        replace: PropTypes.func,
+      }),
+    }),
+    values: PropTypes.object.isRequired,
     form: PropTypes.object.isRequired,
     onClickSelectItem: PropTypes.func,
     item: PropTypes.object,
@@ -160,13 +170,14 @@ class ItemInfo extends React.Component {
 
                 return (
                   <Field
+                    data-testid="itemBarcodeField"
                     name={NEW_FEE_FINE_FIELD_NAMES.ITEM_BARCODE}
                     key={key}
                     validate={this.validateBarcode}
                     validateFields={[]}
                   >
                     {
-                      ({input, meta}) => {
+                      ({ input, meta }) => {
                         const validationError = !isBarcodeChangedAfterValidation && meta.error;
 
                         return (

src/components/Accounts/ChargeFeeFine/ItemInfo.test.js

@@ -1,39 +1,148 @@
-import { screen } from '@folio/jest-config-stripes/testing-library/react';
+import {
+  screen,
+  render,
+} from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 
-import renderWithRouter from 'helpers/renderWithRouter';
 import ItemInfo from './ItemInfo';
+import { NEW_FEE_FINE_FIELD_NAMES } from '../../../constants';
 
 import '__mock__/stripesCore.mock';
 import '__mock__/stripesSmartComponent.mock';
 
 jest.unmock('@folio/stripes/components');
 
-const renderItemInfo = (props) => renderWithRouter(
+const renderItemInfo = (props) => render(
   <ItemInfo {...props} />
 );
 
-const selectMock = jest.fn();
-
-const props = {
-  onClickSelectItem: selectMock,
+const basicProps = {
+  onClickSelectItem: jest.fn(),
   item: {},
-  editable: true
+  editable: true,
+  resources: {
+    items: {
+      records: [],
+    },
+    activeRecord: {
+      barcode: 'itemBarcode',
+    },
+  },
+  mutator: {
+    activeRecord: {
+      replace: jest.fn(),
+    },
+  },
+  form: {
+    change: jest.fn(),
+  },
+  values: {},
+};
+const labelIds = {
+  itemTitle: 'ui-users.charge.item.title',
+  chargeButton: 'ui-users.charge.item.button',
+};
+const testIds = {
+  itemBarcodeField: 'itemBarcodeField',
 };
 
-describe('Item Info component', () => {
-  it('if it renders', () => {
-    renderItemInfo(props);
-    expect(screen.getByText('ui-users.charge.item.title')).toBeInTheDocument();
+jest.mock('react-final-form', () => ({
+  Field: jest.fn(({
+    children,
+    'data-testid': testId,
+    validate,
+  }) => {
+    return children({
+      meta: {},
+      input: {
+        validate,
+        'data-testid': testId,
+        value: '',
+      },
+    });
+  }),
+}));
+jest.mock('react-router-dom', () => ({
+  Link: jest.fn(() => <div />),
+}));
+
+describe('ItemInfo', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
   });
-  it('Charge Item Button', async () => {
-    renderItemInfo(props);
-    await userEvent.click(screen.getByText('ui-users.charge.item.button'));
-    expect(selectMock).toHaveBeenCalled();
+
+  describe('Initial render', () => {
+    beforeEach(() => {
+      renderItemInfo(basicProps);
+    });
+
+    it('should render item title', () => {
+      const itemTitle = screen.getByText(labelIds.itemTitle);
+
+      expect(itemTitle).toBeInTheDocument();
+    });
+
+    it('should get item information', async () => {
+      const chargeButton = screen.getByText(labelIds.chargeButton);
+
+      await userEvent.click(chargeButton);
+
+      expect(basicProps.onClickSelectItem).toHaveBeenCalled();
+    });
   });
-  it('charge item text field', async () => {
-    renderItemInfo(props);
-    await userEvent.type(document.querySelector('[placeholder="ui-users.charge.item.placeholder"]'), 'Test');
-    expect(document.querySelector('[placeholder="ui-users.charge.item.placeholder"]').value).toBe('Test');
+
+  describe('Component updating', () => {
+    const itemBarcode = 'newItemBarcode';
+    const newProps = {
+      ...basicProps,
+      resources: {
+        ...basicProps.resources,
+        items: {
+          records: [
+            {
+              id: 'itemId',
+            }
+          ]
+        }
+      },
+    };
+
+    beforeEach(async () => {
+      const { rerender } = renderItemInfo(basicProps);
+
+      const itemBarcodeField = screen.getByTestId(testIds.itemBarcodeField);
+
+      await userEvent.type(itemBarcodeField, itemBarcode);
+
+      rerender(<ItemInfo {...newProps} />);
+    });
+
+    it('should change "key" value of barcode field', () => {
+      expect(basicProps.form.change).toHaveBeenCalledWith(NEW_FEE_FINE_FIELD_NAMES.KEY_OF_ITEM_BARCODE, basicProps.values[NEW_FEE_FINE_FIELD_NAMES.KEY_OF_ITEM_BARCODE] ? 0 : 1);
+    });
+  });
+
+  describe('Item barcode changing', () => {
+    const itemBarcode = 'newItemBarcode';
+
+    beforeEach(async () => {
+      renderItemInfo(basicProps);
+
+      const itemBarcodeField = screen.getByTestId(testIds.itemBarcodeField);
+
+      await userEvent.type(itemBarcodeField, itemBarcode);
+    });
+
+    it('should replace activeRecord', () => {
+      expect(basicProps.mutator.activeRecord.replace).toHaveBeenCalledWith({
+        ...basicProps.resources.activeRecord,
+        isBarcodeValidated: false,
+        barcode: '',
+      });
+    });
+
+    it('should change item barcode field', () => {
+      expect(basicProps.form.change).toHaveBeenCalledWith(NEW_FEE_FINE_FIELD_NAMES.ITEM_BARCODE, itemBarcode);
+    });
   });
 });