UIIN-1687 JEST/RTL test cases for CreateItem

src/Item/CreateItem/CreateItem.test.js

@@ -1,20 +1,38 @@
 import '../../../test/jest/__mock__';
-
+import PropTypes from 'prop-types';
 import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { QueryClient, QueryClientProvider } from 'react-query';
+import stripesFinalForm from '@folio/stripes/final-form';
+import { useOkapiKy } from '@folio/stripes/core';
+import renderWithRouter from '../../../test/jest/helpers/renderWithRouter';
+import renderWithIntl from '../../../test/jest/helpers/renderWithIntl';
 
+import translationsProperties from '../../../test/jest/helpers/translationsProperties';
 import { instance } from '../../../test/fixtures/instance';
 import {
   useInstanceQuery,
   useHolding,
 } from '../../common/hooks';
+
 import CreateItem from './CreateItem';
 
-jest.mock('../../edit/items/ItemForm', () => jest.fn().mockReturnValue('ItemForm'));
+jest.mock('../../edit/items/ItemForm', () => jest.fn(({ onSubmit = () => Promise.resolve(), onCancel = () => Promise.resolve() }) => (
+  <div>
+    <button type="button" onClick={onSubmit}>submit</button>
+    <button type="button" onClick={onCancel}>cancel</button>
+  </div>
+)));
+
 jest.mock('../../hooks/useCallout', () => jest.fn().mockReturnValue({ sendCallout: jest.fn() }));
+
 jest.mock('../../common/hooks', () => ({
   ...jest.requireActual('../../common/hooks'),
+  useItemMutation: jest.fn().mockReturnValue({
+    mutateItem: jest.fn()
+  }),
   useInstanceQuery: jest.fn().mockReturnValue({ instance: {}, isLoading: false }),
   useHolding: jest.fn().mockReturnValue({ holding: {}, isLoading: false }),
 }));
@@ -27,33 +45,59 @@ const defaultProps = {
 
 const queryClient = new QueryClient();
 
-const wrapper = ({ children }) => (
-  <MemoryRouter>
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
-  </MemoryRouter>
-);
+const onSubmit = jest.fn();
+const administrativeNotes = { id:'12', value:'qw' };
 
-const renderCreateItem = (props = {}) => render(
-  <CreateItem
-    {...defaultProps}
-    {...props}
-  />,
-  { wrapper },
+const Form = ({ handleSubmit }) => (
+  <form onSubmit={handleSubmit}>
+    <CreateItem initialValues={{ administrativeNotes }} {...defaultProps} />
+  </form>
 );
 
+Form.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+};
+
+const WrappedForm = stripesFinalForm({
+  isLoading: false,
+})(Form);
 
-describe('CreateItem', () => {
+const renderCreateItem = () => renderWithIntl(
+  renderWithRouter(
+    <MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <WrappedForm onSubmit={onSubmit} />
+      </QueryClientProvider>
+    </MemoryRouter>
+  ),
+  translationsProperties,
+);
+
+describe('Create Item', () => {
+  const hrid = { id:'123' };
   beforeEach(() => {
     useInstanceQuery.mockClear();
     useHolding.mockClear();
   });
-
-  it('should render ItemForm', () => {
+  useOkapiKy.mockClear().mockReturnValue({
+    post: () => ({
+      json: () => (({ hrid })),
+    }),
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should click Submit button', () => {
     renderCreateItem();
-
-    expect(screen.getByText('ItemForm')).toBeInTheDocument();
+    const submitBtn = screen.getByRole('button', { name: 'submit' });
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+  });
+  it('should cancel', () => {
+    renderCreateItem();
+    const cancelBtn = screen.getByRole('button', { name: 'cancel' });
+    expect(cancelBtn).toBeInTheDocument();
+    userEvent.click(cancelBtn);
   });
 
   it('should render LoadingView if page is loading', () => {