additional unit tests

src/components/ComplexLookupField/MarсPreviewComplexLookup.tsx → src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx

@@ -7,13 +7,13 @@ import { MarcContent } from '@components/MarcContent';
 import { Button, ButtonType } from '@components/Button';
 import Times16 from '@src/assets/times-16.svg?react';
 import state from '@state';
-import './MarсPreviewComplexLookup.scss';
+import './MarcPreviewComplexLookup.scss';
 
-type MarсPreviewComplexLookupProps = {
+type MarcPreviewComplexLookupProps = {
   onClose: VoidFunction;
 };
 
-export const MarсPreviewComplexLookup: FC<MarсPreviewComplexLookupProps> = ({ onClose }) => {
+export const MarcPreviewComplexLookup: FC<MarcPreviewComplexLookupProps> = ({ onClose }) => {
   const { onAssignRecord } = useSearchContext();
   const isMarcPreviewOpen = useRecoilValue(state.ui.isMarcPreviewOpen);
   const marcPreviewData = useRecoilValue(state.data.marcPreviewData);
@@ -29,7 +29,7 @@ export const MarсPreviewComplexLookup: FC<MarсPreviewComplexLookupProps> = ({
     <>
       {marcPreviewMetadata?.headingType} • <FormattedMessage id="ld.lastUpdated" />:
       <span className="marc-preview-sub-label-date">
-        <FormattedDate value={new Date(marcPreviewData?.metadata.updatedDate ?? 'now')} />
+        <FormattedDate value={marcPreviewData?.metadata.updatedDate ?? new Date('now')} />
       </span>
     </>
   );

src/components/ComplexLookupField/ModalComplexLookup.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { getSearchResults } from '@common/api/search.api';
 import { SEARCH_RESULTS_FORMATTER } from '@common/helpers/search/formatters';
+import { SEARCH_QUERY_BUILDER } from '@common/helpers/search/queryBuilder';
 import { IS_EMBEDDED_MODE } from '@common/constants/build.constants';
 import { SearchSegment } from '@common/constants/search.constants';
 import { ComplexLookupType } from '@common/constants/complexLookup.constants';
@@ -15,10 +16,9 @@ import { Search } from '@components/Search';
 import { SearchControlPane } from '@components/SearchControlPane';
 import state from '@state';
 import { ComplexLookupSearchResults } from './ComplexLookupSearchResults';
-import { MarсPreviewComplexLookup } from './MarсPreviewComplexLookup';
+import { MarcPreviewComplexLookup } from './MarcPreviewComplexLookup';
 import { SEARCH_RESULTS_TABLE_CONFIG } from './configs';
 import './ModalComplexLookup.scss';
-import { SEARCH_QUERY_BUILDER } from '@common/helpers/search/queryBuilder';
 
 interface ModalComplexLookupProps {
   isOpen: boolean;
@@ -121,7 +121,7 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
       [loadMarcData, tableConfig, searchResultsFormatter],
     );
 
-    const renderMarcPreview = useCallback(() => <MarсPreviewComplexLookup onClose={onCloseMarcPreview} />, []);
+    const renderMarcPreview = useCallback(() => <MarcPreviewComplexLookup onClose={onCloseMarcPreview} />, []);
 
     return (
       <Modal

src/test/__mocks__/lib/intl.mock.tsx

@@ -32,6 +32,13 @@ jest.mock('react-intl', () => {
 
       return value;
     },
+    FormattedDate: ({ value, day, month, year }: any) => {
+      if (day && month && year) {
+        return `${day}-${month}-${year}`;
+      }
+
+      return value;
+    },
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     IntlProvider: ({ children, defaultLocale, ...rest }: any) => <div {...rest}>{children}</div>,
     useIntl: () => intl,

src/test/__tests__/common/hooks/useComplexLookupApi.test.ts

@@ -0,0 +1,47 @@
+import { renderHook } from '@testing-library/react';
+import { useComplexLookupApi } from '@common/hooks/useComplexLookupApi';
+import { useSearchFiltersData } from '@common/hooks/useSearchFiltersData';
+
+jest.mock('@common/hooks/useSearchFiltersData');
+
+describe('useComplexLookupApi', () => {
+  const api = {
+    endpoints: {
+      facets: '/facets',
+      source: '/source',
+    },
+    sourceKey: 'testSourceKey',
+  } as ComplexLookupApiEntryConfig;
+  const filters = [
+    { facet: 'facet_1', isOpen: false },
+    { facet: 'facet_2', isOpen: true },
+  ] as SearchFilters;
+
+  let getSearchSourceDataMock: jest.Mock;
+  let getSearchFacetsDataMock: jest.Mock;
+
+  beforeEach(() => {
+    getSearchSourceDataMock = jest.fn();
+    getSearchFacetsDataMock = jest.fn();
+
+    (useSearchFiltersData as jest.Mock).mockReturnValue({
+      getSearchSourceData: getSearchSourceDataMock,
+      getSearchFacetsData: getSearchFacetsDataMock,
+    });
+  });
+
+  it('calls getSearchFacetsData with correct arguments in getFacetsData', async () => {
+    const { result } = renderHook(() => useComplexLookupApi(api, filters));
+    await result.current.getFacetsData('facet_1', true);
+
+    expect(getSearchFacetsDataMock).toHaveBeenCalledWith(api.endpoints.facets, 'facet_1', true);
+  });
+
+  it('calls getSearchSourceData and getFacetsData with correct arguments in getSourceData', async () => {
+    const { result } = renderHook(() => useComplexLookupApi(api, filters));
+    await result.current.getSourceData();
+
+    expect(getSearchSourceDataMock).toHaveBeenCalledWith(api.endpoints.source, api.sourceKey);
+    expect(getSearchFacetsDataMock).toHaveBeenCalledWith(api.endpoints.facets, 'facet_2', undefined);
+  });
+});

src/test/__tests__/components/MarcPreviewComplexLookup.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+import { useSearchContext } from '@common/hooks/useSearchContext';
+import { MarcPreviewComplexLookup } from '@components/ComplexLookupField/MarcPreviewComplexLookup';
+import state from '@state';
+
+jest.mock('@common/hooks/useSearchContext');
+jest.mock('@common/constants/build.constants', () => ({ IS_EMBEDDED_MODE: false }));
+jest.mock('@components/MarcContent', () => ({ MarcContent: () => <div>Marc Content</div> }));
+
+const mockUseSearchContext = useSearchContext as jest.Mock;
+const marcPreviewData = {
+  metadata: {
+    updatedDate: '2024-01-01',
+  },
+} as MarcDTO;
+const marcPreviewMetadata = {
+  title: 'Test Title',
+  headingType: 'Test Heading',
+  baseId: 'testBaseId_1',
+} as MarcPreviewMetadata;
+
+describe('MarcPreviewComplexLookup', () => {
+  const onClose = jest.fn();
+  const onAssignRecord = jest.fn();
+
+  beforeEach(() => {
+    mockUseSearchContext.mockReturnValue({ onAssignRecord });
+  });
+
+  const renderComponent = (
+    isMarcPreviewOpen: boolean,
+    marcPreviewData: MarcDTO,
+    marcPreviewMetadata: MarcPreviewMetadata,
+  ) => {
+    return render(
+      <RecoilRoot
+        initializeState={({ set }) => {
+          set(state.ui.isMarcPreviewOpen, isMarcPreviewOpen);
+          set(state.data.marcPreviewData, marcPreviewData);
+          set(state.data.marcPreviewMetadata, marcPreviewMetadata);
+        }}
+      >
+        <MarcPreviewComplexLookup onClose={onClose} />
+      </RecoilRoot>,
+    );
+  };
+
+  it('renders the component when isMarcPreviewOpen is true and marcPreviewData is available', () => {
+    renderComponent(true, marcPreviewData, marcPreviewMetadata);
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Marc Content')).toBeInTheDocument();
+  });
+
+  it('does not render the component when isMarcPreviewOpen is false', () => {
+    renderComponent(false, marcPreviewData, marcPreviewMetadata);
+
+    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    renderComponent(true, marcPreviewData, marcPreviewMetadata);
+
+    fireEvent.click(screen.getByTestId('nav-close-button'));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onAssignRecord when assign button is clicked', () => {
+    renderComponent(true, marcPreviewData, marcPreviewMetadata);
+
+    fireEvent.click(screen.getByText('ld.assign'));
+
+    expect(onAssignRecord).toHaveBeenCalledWith({
+      id: 'testBaseId_1',
+      title: 'Test Title',
+      linkedFieldValue: 'Test Heading',
+    });
+  });
+});

src/test/__tests__/components/TableFlex.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { TableFlex } from '@components/Table/TableFlex';
+
+describe('TableFlex Component', () => {
+  const header = {
+    name: { label: 'Name', position: 1 },
+    age: { label: 'Age', position: 2 },
+  };
+
+  const data = [
+    { __meta: { id: 1, key: 'row_1' }, name: { label: 'John Doe' }, age: { label: '30' } },
+    { __meta: { id: 2, key: 'row_2' }, name: { label: 'Jane Doe' }, age: { label: '25' } },
+  ];
+
+  const onRowClick = jest.fn();
+  const onHeaderCellClick = jest.fn();
+
+  test('renders TableFlex component', () => {
+    render(<TableFlex header={header} data={data} onRowClick={onRowClick} onHeaderCellClick={onHeaderCellClick} />);
+
+    expect(screen.getByTestId('table')).toBeInTheDocument();
+    expect(screen.getByTestId('th-name')).toHaveTextContent('Name');
+    expect(screen.getByTestId('th-age')).toHaveTextContent('Age');
+    expect(screen.getAllByTestId('table-row')).toHaveLength(2);
+  });
+
+  test('calls onHeaderCellClick when header cell is clicked', () => {
+    render(<TableFlex header={header} data={data} onRowClick={onRowClick} onHeaderCellClick={onHeaderCellClick} />);
+
+    fireEvent.click(screen.getByTestId('th-name'));
+
+    expect(onHeaderCellClick).toHaveBeenCalledWith({ name: header.name });
+  });
+
+  test('calls onRowClick when row is clicked', () => {
+    render(<TableFlex header={header} data={data} onRowClick={onRowClick} onHeaderCellClick={onHeaderCellClick} />);
+
+    fireEvent.click(screen.getAllByTestId('table-row')[0]);
+
+    expect(onRowClick).toHaveBeenCalledWith(data[0]);
+  });
+});