UILD-470: Comparison fix - resource is shown in full view when removi…

…ng one out of three from the second page of comparison modal (#76)
folio-org · Jan 15, 2025 · 1d4a9ac · 1d4a9ac
1 parent 8b68548
commit 1d4a9ac
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/components/Comparison/Comparison.tsx b/src/components/Comparison/Comparison.tsx
@@ -29,6 +29,14 @@ export const Comparison = () => {
   };
 
   const handleRemoveComparisonItem = (id: string) => {
+    if (currentPage === totalPages - 1) {
+      setCurrentPage(prevValue => {
+        const previousPage = prevValue - 1;
+
+        return previousPage >= 0 ? previousPage : 0;
+      });
+    }
+
     setPreviewContent(prev => prev.filter(({ id: prevId }) => prevId !== id));
     setSelectedInstances(prev => prev.filter(prevId => prevId !== id));
   };
@@ -79,7 +87,7 @@ export const Comparison = () => {
               <div className="entry-header">
                 <div className="entry-header-controls">
                   <Button
-                    data-testid="remove-comparison-entry"
+                    data-testid={`remove-comparison-entry-${id}`}
                     type={ButtonType.Icon}
                     onClick={() => handleRemoveComparisonItem(id)}
                     className="nav-close"

diff --git a/src/test/__tests__/components/Comparison.test.tsx b/src/test/__tests__/components/Comparison.test.tsx
@@ -72,12 +72,40 @@ describe('Comparison', () => {
       },
     ]);
 
-    fireEvent.click(getByTestId('remove-comparison-entry'));
+    fireEvent.click(getByTestId('remove-comparison-entry-mockId'));
 
     expect(setPreviewContent).toHaveBeenCalled();
     expect(setSelectedInstances).toHaveBeenCalled();
   });
 
+  test('updates current page when removing last item on last page', () => {
+    const setPreviewContent = jest.fn();
+    const { getByTestId } = renderWithState([
+      {
+        store: useInputsStore,
+        state: {
+          previewContent: [
+            { id: 'mockId_1', title: 'mockTitle 1' },
+            { id: 'mockId_2', title: 'mockTitle 2' },
+            { id: 'mockId_3', title: 'mockTitle 3' },
+          ],
+          setPreviewContent,
+        },
+      },
+      {
+        store: useSearchStore,
+        state: { setSelectedInstances },
+      },
+    ]);
+
+    fireEvent.click(getByTestId('forward-button'));
+    fireEvent.click(getByTestId('remove-comparison-entry-mockId_3'));
+
+    expect(setPreviewContent).toHaveBeenCalled();
+    expect(setSelectedInstances).toHaveBeenCalled();
+    expect(getByTestId('backward-button')).toBeInTheDocument();
+  });
+
   test('closes comparison', async () => {
     const { getByTestId } = renderWithState([
       {