UIREC-305 Add unit tests

src/TitleDetails/AddPieceModal/AddPieceModal.test.js

@@ -9,6 +9,7 @@ import {
   PIECE_FORMAT,
 } from '@folio/stripes-acq-components';
 
+import { usePieceStatusChangeLog } from '../hooks';
 import AddPieceModal from './AddPieceModal';
 import { PIECE_STATUS } from './ModalActionButtons/constants';
 
@@ -20,6 +21,10 @@ jest.mock('@folio/stripes-acq-components', () => {
 });
 jest.mock('../../common/components/LineLocationsView/LineLocationsView',
   () => jest.fn().mockReturnValue('LineLocationsView'));
+jest.mock('../hooks', () => ({
+  ...jest.requireActual('../hooks'),
+  usePieceStatusChangeLog: jest.fn(),
+}));
 
 const defaultProps = {
   close: jest.fn(),
@@ -50,19 +55,39 @@ const defaultProps = {
 const holding = {
   id: 'holdingId',
 };
+const userData = {
+  id: 'user-1',
+  personal: {
+    lastName: 'Galt',
+    firstName: 'John',
+  },
+};
+const logs = [
+  {
+    eventDate: '2023-12-26T14:08:19.402Z',
+    user: userData,
+    receivingStatus: PIECE_STATUS.received,
+  },
+  {
+    eventDate: '2023-12-25T14:08:18.402Z',
+    user: userData,
+    receivingStatus: PIECE_STATUS.expected,
+  },
+];
 
 const kyMock = {
   get: jest.fn(() => ({
     json: () => Promise.resolve(holding),
   })),
 };
 
-const renderAddPieceModal = (props = defaultProps) => (render(
+const renderAddPieceModal = (props = {}) => render(
   <AddPieceModal
+    {...defaultProps}
     {...props}
   />,
   { wrapper: MemoryRouter },
-));
+);
 
 const findButton = (name) => screen.findByRole('button', { name });
 
@@ -79,6 +104,9 @@ describe('AddPieceModal', () => {
     FieldInventory.mockClear();
     kyMock.get.mockClear();
     useOkapiKy.mockClear().mockReturnValue(kyMock);
+    usePieceStatusChangeLog
+      .mockClear()
+      .mockReturnValue({ data: logs });
   });
 
   it('should display Add piece modal', () => {
@@ -229,7 +257,6 @@ describe('AddPieceModal', () => {
     const dropdownButton = screen.getByTestId('dropdown-trigger-button');
 
     await user.click(dropdownButton);
-    await screen.findByRole('button', { expanded: true });
 
     const unReceiveButton = screen.getByTestId('unReceivable-piece-button');
 

src/TitleDetails/AddPieceModal/AddPieceModalContainer.test.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@folio/jest-config-stripes/testing-library/react';
-import user from '@folio/jest-config-stripes/testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter } from 'react-router-dom';
 
+import { render, screen, fireEvent } from '@folio/jest-config-stripes/testing-library/react';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
+
 import { PIECE_STATUS } from '@folio/stripes-acq-components';
+
 import AddPieceModalContainer from './AddPieceModalContainer';
 
 jest.mock('@folio/stripes-acq-components', () => ({
@@ -13,7 +14,10 @@ jest.mock('@folio/stripes-acq-components', () => ({
 }));
 jest.mock('../../common/components/LineLocationsView/LineLocationsView',
   () => jest.fn().mockReturnValue('LineLocationsView'));
-
+jest.mock('../hooks', () => ({
+  ...jest.requireActual('../hooks'),
+  usePieceStatusChangeLog: jest.fn(() => ({ data: [] })),
+}));
 const defaultProps = {
   close: jest.fn(),
   onSubmit: jest.fn(() => Promise.resolve({})),

src/TitleDetails/AddPieceModal/ReceivingStatusChangeLog/ReceivingStatusChangeLog.js

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
-import { FormattedDate, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import {
   MultiColumnList,
   TextLink,
 } from '@folio/stripes/components';
 import { getFullName } from '@folio/stripes/util';
+import { FolioFormattedDate } from '@folio/stripes-acq-components';
 
 import { usePieceStatusChangeLog } from '../../hooks';
 
@@ -23,7 +24,7 @@ const COLUMN_MAPPING = {
 
 const FORMATTER = {
   [COLUMN_NAMES.status]: item => item.receivingStatus,
-  [COLUMN_NAMES.eventDate]: item => <FormattedDate value={item.eventDate} />,
+  [COLUMN_NAMES.eventDate]: item => <FolioFormattedDate value={item.eventDate} />,
   [COLUMN_NAMES.user]: item => (
     item.user
       ? <TextLink to={`/users/preview/${item.user.id}`}>{getFullName(item.user)}</TextLink>

src/TitleDetails/AddPieceModal/ReceivingStatusChangeLog/ReceivingStatusChangeLog.test.js

@@ -0,0 +1,59 @@
+import { MemoryRouter } from 'react-router-dom';
+
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+import { PIECE_STATUS } from '@folio/stripes-acq-components';
+
+import { usePieceStatusChangeLog } from '../../hooks';
+import { ReceivingStatusChangeLog } from './ReceivingStatusChangeLog';
+
+jest.mock('../../hooks', () => ({
+  ...jest.requireActual('../../hooks'),
+  usePieceStatusChangeLog: jest.fn(),
+}));
+
+const defaultProps = {
+  piece: { id: 'piece-id' },
+};
+const user = {
+  id: 'user-1',
+  personal: {
+    lastName: 'Galt',
+    firstName: 'John',
+  },
+};
+const data = [
+  {
+    eventDate: '2023-12-26T14:08:19.402Z',
+    user,
+    receivingStatus: PIECE_STATUS.received,
+  },
+  {
+    eventDate: '2023-12-25T14:08:18.402Z',
+    user,
+    receivingStatus: PIECE_STATUS.expected,
+  },
+];
+
+const renderComponent = (props = {}) => render(
+  <ReceivingStatusChangeLog
+    {...defaultProps}
+    {...props}
+  />,
+  { wrapper: MemoryRouter },
+);
+
+describe('ReceivingStatusChangeLog', () => {
+  beforeEach(() => {
+    usePieceStatusChangeLog
+      .mockClear()
+      .mockReturnValue({ data });
+  });
+
+  it('should render piece status log list', () => {
+    renderComponent();
+
+    expect(screen.getByText('ui-receiving.piece.statusChangeLog.column.status'));
+    expect(screen.getByText('ui-receiving.piece.statusChangeLog.column.date'));
+    expect(screen.getByText('ui-receiving.piece.statusChangeLog.column.updatedBy'));
+  });
+});

src/TitleDetails/hooks/usePieceStatusChangeLog/usePieceStatusChangeLog.test.js

@@ -0,0 +1,84 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
+
+import {
+  renderHook,
+  waitFor,
+} from '@folio/jest-config-stripes/testing-library/react';
+import { useOkapiKy } from '@folio/stripes/core';
+import {
+  PIECE_STATUS,
+  USERS_API,
+} from '@folio/stripes-acq-components';
+
+import { PIECE_AUDIT_API } from '../../../common/constants';
+import { usePieceStatusChangeLog } from './usePieceStatusChangeLog';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const pieceId = 'piece-id';
+const users = [
+  {
+    id: 'user-1',
+    personal: {
+      lastName: 'Galt',
+      firstName: 'John',
+    },
+  },
+];
+const pieceAuditEvents = [
+  {
+    id: 'log-2',
+    eventDate: '2023-12-26T14:08:19.402Z',
+    userId: users[0].id,
+    pieceSnapshot: {
+      map: {
+        receivingStatus: PIECE_STATUS.received,
+      },
+    },
+  },
+  {
+    id: 'log-1',
+    eventDate: '2023-12-25T14:08:18.402Z',
+    userId: users[0].id,
+    pieceSnapshot: {
+      map: {
+        receivingStatus: PIECE_STATUS.expected,
+      },
+    },
+  },
+];
+
+const responsesMap = {
+  [`${PIECE_AUDIT_API}/${pieceId}/status-change-history`]: { pieceAuditEvents },
+  [USERS_API]: { users },
+};
+
+describe('usePieceStatusChangeLog', () => {
+  const getMock = jest.fn((api) => ({
+    json: () => Promise.resolve(responsesMap[api]),
+  }));
+
+  beforeEach(() => {
+    getMock.mockClear();
+    useOkapiKy
+      .mockClear()
+      .mockReturnValue({ get: getMock });
+  });
+
+  it('should return piece status change log', async () => {
+    const { result } = renderHook(() => usePieceStatusChangeLog(pieceId), { wrapper });
+
+    await waitFor(() => expect(result.current.isFetching).toBeFalsy());
+
+    expect(result.current.data).toHaveLength(pieceAuditEvents.length);
+  });
+});