UIIN-1669 JEST/RTL test cases for ItemForm.js

src/edit/items/ItemForm.test.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
   QueryClient,
   QueryClientProvider,
 } from 'react-query';
-import { screen, waitFor } from '@testing-library/react';
-import user from '@testing-library/user-event';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+
 
 import '../../../test/jest/__mock__';
 
@@ -45,6 +46,9 @@ useInstancesQuery.mockImplementation(() => {
     },
   };
 });
+jest.mock('./RemoteStorageWarning', () => ({
+  RemoteStorageWarning: jest.fn().mockReturnValue('RemoteStorageWarning'),
+}));
 
 const mockInitialValues = {
   permanentLocationId: 'permanentLocationId',
@@ -59,17 +63,63 @@ const mockInitialValues = {
       briefHoldingsRecord: { id: 'bw456', hrid: 'bw456' },
     },
   ],
+  callNumberTypeId: 'callNumberTypeId',
+  itemNoteTypeId: 'itemNoteTypeId',
+  statisticalCodeId: 'statisticalCodeId',
+  id: 'id',
+  damagedStatusId: 'damagedStatusId',
+  loanType : [{ id: 'loanTypesId', name: 'loanTypesId' }],
+  materialType: [{ id: 'materialTypeId', name: 'materialTypeId' }],
+  permanentLoanType: [{ id: 'permanentLoanTypeId', name: 'permanentLoanTypeId' }],
 };
-const mockHolding = {};
+const mockHolding = { id: '1',
+  holdingsStatement: 'Example Holdings Statement' };
 const mockOnSubmit = jest.fn();
 const mockOnCancel = jest.fn();
-const mockInstance = { id: 'instanceId' };
+const mockInstance = { id: 'instanceId', title: 'Example Title' };
+const mockStripes = {
+  connect: jest.fn(),
+};
+
 const mockReferenceTables = {
   locationsById: [{ id: 'permanentLocationId' }],
-  electronicAccessRelationships: [],
+  electronicAccessRelationships: [
+    { id: '1', name: 'Resource' },
+    { id: '2', name: 'Version of Resource' },
+  ],
+  callNumberTypes: [
+    { id: '1', name: 'Dewey' },
+    { id: '2', name: 'Library of Congress' },
+  ],
+  statisticalCodes: [
+    { id: '1', code: 'STAT001', name: 'Statistical Code 1' },
+    { id: '2', code: 'STAT002', name: 'Statistical Code 2' },
+  ],
+  statisticalCodeTypes: [
+    { id: '1', name: 'Statistical Code Type 1' },
+    { id: '2', name: 'Statistical Code Type 2' },
+  ],
+  itemNoteTypes: [
+    { id: '1', name: 'General Note' },
+    { id: '2', name: 'Public Note' },
+  ],
+  loanTypes: [
+    { id: '1', name: 'Regular Loan' },
+    { id: '2', name: 'Short Loan' },
+  ],
+  materialTypes: [
+    { id: '1', name: 'Book' },
+    { id: '2', name: 'CD' },
+  ],
+  itemDamagedStatuses: [
+    { id: '1', name: 'Damaged' },
+    { id: '2', name: 'Not Damaged' },
+  ],
 };
-const mockStripes = {
-  connect: jest.fn(),
+const okapi = {
+  url: 'https://folio-testing-okapi.dev.folio.org',
+  tenant: 'test-tenant',
+  token: 'test-token'
 };
 
 const queryClient = new QueryClient();
@@ -107,54 +157,58 @@ const renderItemForm = (props = {}) => renderWithIntl(
   translationsProperties
 );
 
-describe('ItemForm', () => {
+describe('should validate validateBarcode', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(() => Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ totalRecords: 0 }),
+    }));
+  });
+  it('validateBarcode response', async () => {
+    const props = {
+      initialValues: { barcode: '123' },
+      okapi: { url: 'https://folio-testing-okapi.dev.folio.org', tenant: 'test', token: 'token' }
+    };
+    renderItemForm(props);
+    await waitFor(() => {
+      const searchBarcode = screen.getByLabelText('Barcode');
+      expect(searchBarcode.value).toBe('123');
+    });
+  });
+});
+describe('should render ItemForm', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should render form', () => {
-    const { container } = renderItemForm();
-
-    expect(container.querySelectorAll('form').length).toEqual(1);
-  });
-
-  describe('when displaying boundWithTitles rows', () => {
-    it('should disable delete on a directly linked holding', async () => {
-      const { container } = renderItemForm();
-
-      await waitFor(() => {
-        const directlyLinkedTitle = container.querySelector("*[data-test-repeater-field-row] input[value='bw123']");
-        const directlyLinkedDelete = directlyLinkedTitle.closest('div[data-test-repeater-field-row]')
-          .getElementsByTagName('button').item(0);
-        expect(directlyLinkedDelete.disabled).toBeTruthy();
-      });
-    });
-
-    it('should enable delete on an indirectly linked holding', async () => {
-      const { container } = renderItemForm();
-
-      await waitFor(() => {
-        const indirectlyLinkedTitle = container.querySelector("*[data-test-repeater-field-row] input[value='bw456']");
-        const indirectlyLinkedDelete = indirectlyLinkedTitle.closest('div[data-test-repeater-field-row]')
-          .getElementsByTagName('button').item(0);
-        expect(indirectlyLinkedDelete.disabled).toBeFalsy();
-      });
+  it('should update barcode and click Save', async () => {
+    const props = { initialValues: { barcode: '12345' }, okapi };
+    renderItemForm(props);
+    await waitFor(() => {
+      const searchBarcode = screen.getByLabelText('Barcode');
+      fireEvent.change(searchBarcode, { target: { value: 56576567 } });
+      expect(searchBarcode.value).toBe('56576567');
     });
+    const noteButton = screen.getByRole('button', { name:'Add note' });
+    expect(noteButton).toBeInTheDocument();
+    userEvent.click(noteButton);
+    const noteTextbox = screen.getByRole('textbox', { name: 'Note' });
+    userEvent.type(noteTextbox, 'testing purpose');
+    expect(noteTextbox).toHaveValue('testing purpose');
+    const saveBtn = screen.getByRole('button', { name : 'Save & close' });
+    userEvent.click(saveBtn);
   });
 
   describe('Bound With modal', () => {
-    it('should start out closed', async () => {
-      renderItemForm();
-
-      const saveButton = screen.queryByTestId('bound-with-modal-save-button');
-      expect(saveButton).toBeNull();
+    afterEach(() => {
+      jest.clearAllMocks();
     });
 
     it('should open and close', async () => {
       renderItemForm();
 
       const openModalButton = await screen.findByTestId('bound-with-add-button');
-      user.click(openModalButton);
+      userEvent.click(openModalButton);
 
       // Open the modal, test that the save button is visible
       let saveButton = screen.queryByTestId('bound-with-modal-save-button');
@@ -163,7 +217,7 @@ describe('ItemForm', () => {
 
       // Close the modal, look for the button again, test that it has disappeared
       const cancelModalButton = screen.queryByTestId('bound-with-modal-cancel-button');
-      user.click(cancelModalButton);
+      userEvent.click(cancelModalButton);
       await waitFor(() => {
         saveButton = screen.queryByTestId('bound-with-modal-save-button');
         expect(saveButton).toBeNull();
@@ -178,17 +232,67 @@ describe('ItemForm', () => {
       expect(rows.length).toEqual(2);
 
       const openModalButton = await screen.findByTestId('bound-with-add-button');
-      user.click(openModalButton);
+      userEvent.click(openModalButton);
 
       const firstInput = screen.queryAllByTestId('bound-with-modal-input')[0];
-      user.type(firstInput, 'bw789');
+      userEvent.type(firstInput, 'bw789');
 
       const saveModalButton = screen.queryByTestId('bound-with-modal-save-button');
-      user.click(saveModalButton);
+      userEvent.click(saveModalButton);
 
       // There should now be three
       rows = container.querySelectorAll('#acc10 *[data-test-repeater-field-row]');
       expect(rows.length).toEqual(3);
     });
   });
 });
+
+describe('changing props for ItemForm', () => {
+  const onCancelMock = jest.fn();
+  const onSubmitMock = jest.fn();
+  const mockReferenceData = {
+    locationsById: [{ id: 'permanentLocationId' }],
+    electronicAccessRelationships: [],
+    holdingsNoteTypes: [{ id: 'holdingsNoteTypeId', name: 'holdingsNoteTypeId' }],
+    loanTypes: [],
+  };
+  const handleSubmitMock = jest.fn();
+  const mockOnClose = jest.fn();
+  const historyMock = {
+    push: jest.fn(),
+  };
+  const httpErrorMock = null;
+  const defaultProps = {
+    handleSubmit: handleSubmitMock,
+    pristine: true,
+    submitting: true,
+    copy: true,
+    newItem: false,
+    initialValues: {},
+    onSubmit: onSubmitMock,
+    onCancel: mockOnCancel,
+    onClose: mockOnClose,
+    instance: mockInstance,
+    referenceTables: mockReferenceData,
+    stripes: mockStripes,
+    history: historyMock,
+    httpError: httpErrorMock,
+  };
+
+  const renderItemFormSetup = (props = {}) => renderWithIntl(
+    <ItemFormSetup {...props} {...defaultProps} />,
+    translationsProperties
+  );
+
+  beforeEach(() => {
+    onCancelMock.mockClear();
+    renderItemFormSetup();
+  });
+  it('click Cancel button', () => {
+    expect(screen.queryByLabelText('Instance HRID')).toBeNull();
+    const CancelButton = screen.getByRole('button', { name:'Cancel' });
+    expect(CancelButton).toBeInTheDocument();
+    userEvent.click(CancelButton);
+    expect(defaultProps.onCancel).toHaveBeenCalled();
+  });
+});