bump unit tests

src/components/Comparison/Comparison.tsx

@@ -74,7 +74,7 @@ export const Comparison = () => {
         {previewContent
           .slice(currentPage, currentPage + 2)
           .map(({ initKey, base, userValues, id, title, referenceIds }) => (
-            <section key={id} className='entry'>
+            <section key={id} className="entry">
               <div className="entry-header">
                 <div className="entry-header-controls">
                   <Button
@@ -104,7 +104,7 @@ export const Comparison = () => {
             </section>
           ))}
         {previewContent.length <= 1 && (
-          <div className="insufficient-resource-amt">
+          <div className="insufficient-resource-amt" data-testid="insufficient-resource-amt">
             <GeneralSearch />
             <FormattedMessage
               id={!previewContent.length ? 'ld.chooseTwoResourcesCompare' : 'ld.chooseOneResourceCompare'}

src/components/FullDisplay/PreviewContent.tsx

@@ -20,7 +20,7 @@ export const PreviewContent = () => {
     const handleButtonClick = () => setPreviewContent(previewContent.filter(entry => entry.id !== id));
 
     return (
-      <section className={DOM_ELEMENTS.classNames.fullDisplayContainer}>
+      <section key={id} className={DOM_ELEMENTS.classNames.fullDisplayContainer}>
         <div className="full-display-control-panel">
           <Button
             className="close"

src/test/__mocks__/store/index.ts

@@ -2,7 +2,7 @@ import { StoreApi } from 'zustand';
 
 type StoreState = Record<string, any>;
 
-interface StoreWithState {
+export interface StoreWithState {
   store: StoreApi<StoreState>;
   state: StoreState;
 }

src/test/__tests__/components/Comparison.test.tsx

@@ -0,0 +1,124 @@
+import { navigateToEditPage } from '@src/test/__mocks__/common/hooks/useNavigateToEditPage.mock';
+import { fireEvent, render } from '@testing-library/react';
+import { setInitialGlobalState, StoreWithState } from '@src/test/__mocks__/store';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { Comparison } from '@components/Comparison';
+import { ReactNode } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+import { useInputsStore, useSearchStore, useUIStore } from '@src/store';
+
+jest.mock('react-intl', () => ({
+  FormattedMessage: ({ id, values }: any) => {
+    return (
+      <div id={id}>
+        {values ? Object.entries(values).map(([k, v]) => <Fragment key={k}>{v as ReactNode}</Fragment>) : id}
+      </div>
+    );
+  },
+  useIntl: () => ({
+    formatMessage: ({ id }: { id: string }) => id,
+  }),
+}));
+
+describe('Comparison', () => {
+  const resetPreviewContent = jest.fn();
+  const resetFullDisplayComponentType = jest.fn();
+  const resetSelectedInstances = jest.fn();
+
+  const baseMockState = [
+    {
+      store: useInputsStore,
+      state: { previewContent: [{ id: 'mockId', title: 'mockTitle' }] },
+    },
+  ];
+
+  const renderWithState = (stateArgs?: StoreWithState[]) => {
+    stateArgs && setInitialGlobalState(stateArgs);
+
+    return render(
+      <RouterProvider
+        router={createMemoryRouter([
+          {
+            path: '/',
+            element: <Comparison />,
+          },
+        ])}
+      />,
+    );
+  };
+
+  test('renders placeholder if no previewContent present', () => {
+    const { getByText } = renderWithState();
+
+    expect(getByText('ld.chooseTwoResourcesCompare')).toBeInTheDocument();
+  });
+
+  test('renders placeholder if previewContent has only one entry', () => {
+    const { getByText } = renderWithState(baseMockState);
+
+    expect(getByText('ld.chooseOneResourceCompare')).toBeInTheDocument();
+  });
+
+  test('removes an entry', () => {
+    const { getByTestId, getByText } = renderWithState(baseMockState);
+
+    fireEvent.click(getByTestId('remove-comparison-entry'));
+
+    expect(getByText('ld.chooseTwoResourcesCompare')).toBeInTheDocument();
+  });
+
+  test('closes comparison', async () => {
+    const { getByTestId } = renderWithState([
+      {
+        store: useInputsStore,
+        state: { resetPreviewContent },
+      },
+      {
+        store: useUIStore,
+        state: { resetFullDisplayComponentType },
+      },
+      {
+        store: useSearchStore,
+        state: { resetSelectedInstances },
+      },
+    ]);
+
+    fireEvent.click(getByTestId('close-comparison-section'));
+
+    expect(resetPreviewContent).toHaveBeenCalled();
+    expect(resetFullDisplayComponentType).toHaveBeenCalled();
+    expect(resetSelectedInstances).toHaveBeenCalled();
+  });
+
+  test('handles navigation to own page', async () => {
+    const { getByTestId, getByText } = renderWithState(baseMockState);
+
+    fireEvent.click(getByTestId('preview-actions-dropdown'));
+    fireEvent.click(getByText('ld.edit'));
+
+    expect(navigateToEditPage).toHaveBeenCalled();
+  });
+
+  test('navigates page-wise', async () => {
+    const { getByTestId, getAllByText } = renderWithState([
+      {
+        store: useInputsStore,
+        state: {
+          previewContent: [
+            { id: 'mockId', title: 'mockTitle' },
+            { id: 'mockId', title: 'mockTitle' },
+            { id: 'mockId', title: 'mockTitle' },
+          ],
+        },
+      },
+    ]);
+
+    fireEvent.click(getByTestId('forward-button'));
+
+    expect(getAllByText(2)[0]).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('backward-button'));
+
+    expect(getAllByText(1)[0]).toBeInTheDocument();
+  });
+});