From 2e987a8fcc782f3632cdbf151e7dc35c7d22e2d5 Mon Sep 17 00:00:00 2001 From: ssandupatla <58558770+ssandupatla@users.noreply.github.com> Date: Thu, 4 May 2023 13:19:25 +0530 Subject: [PATCH] UIIN-1669 JEST/RTL test cases for ItemsForm.js --- src/edit/items/ItemForm.test.js | 194 ++++++++++++++++++++++++-------- 1 file changed, 149 insertions(+), 45 deletions(-) diff --git a/src/edit/items/ItemForm.test.js b/src/edit/items/ItemForm.test.js index ccd608d7d..d96feaf6e 100644 --- a/src/edit/items/ItemForm.test.js +++ b/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,13 +232,13 @@ 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]'); @@ -192,3 +246,53 @@ describe('ItemForm', () => { }); }); }); + +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( + , + 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(); + }); +});