UILD-472: Comparison fix - deselect checkboxes when deselecting a res…

…ource on the modal (#74)
folio-org · Jan 14, 2025 · a17f056 · a17f056
1 parent 6117130
commit a17f056
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/components/Comparison/Comparison.tsx b/src/components/Comparison/Comparison.tsx
@@ -17,7 +17,7 @@ import './Comparison.scss';
 export const Comparison = () => {
   const { formatMessage } = useIntl();
   const { previewContent, setPreviewContent, resetPreviewContent } = useInputsState();
-  const { resetSelectedInstances } = useSearchState();
+  const { setSelectedInstances, resetSelectedInstances } = useSearchState();
   const { resetFullDisplayComponentType } = useUIState();
   const { navigateToEditPage } = useNavigateToEditPage();
   const [currentPage, setCurrentPage] = useState(0);
@@ -30,6 +30,7 @@ export const Comparison = () => {
 
   const handleRemoveComparisonItem = (id: string) => {
     setPreviewContent(prev => prev.filter(({ id: prevId }) => prevId !== id));
+    setSelectedInstances(prev => prev.filter(prevId => prevId !== id));
   };
 
   const handleNavigateToOwnEditPage = (id: string) => navigateToEditPage(generateEditResourceUrl(id));

diff --git a/src/test/__tests__/components/Comparison.test.tsx b/src/test/__tests__/components/Comparison.test.tsx
@@ -24,16 +24,20 @@ describe('Comparison', () => {
   const resetPreviewContent = jest.fn();
   const resetFullDisplayComponentType = jest.fn();
   const resetSelectedInstances = jest.fn();
+  const setSelectedInstances = jest.fn();
+  const setPreviewContent = jest.fn();
 
   const baseMockState = [
     {
       store: useInputsStore,
-      state: { previewContent: [{ id: 'mockId', title: 'mockTitle' }] },
+      state: { previewContent: [{ id: 'mockId', title: 'mockTitle' }], setPreviewContent },
     },
   ];
 
   const renderWithState = (stateArgs?: StoreWithState[]) => {
-    stateArgs && setInitialGlobalState(stateArgs);
+    if (stateArgs) {
+      setInitialGlobalState(stateArgs);
+    }
 
     return render(
       <RouterProvider
@@ -60,11 +64,18 @@ describe('Comparison', () => {
   });
 
   test('removes an entry', () => {
-    const { getByTestId, getByText } = renderWithState(baseMockState);
+    const { getByTestId } = renderWithState([
+      ...baseMockState,
+      {
+        store: useSearchStore,
+        state: { setSelectedInstances },
+      },
+    ]);
 
     fireEvent.click(getByTestId('remove-comparison-entry'));
 
-    expect(getByText('ld.chooseTwoResourcesCompare')).toBeInTheDocument();
+    expect(setPreviewContent).toHaveBeenCalled();
+    expect(setSelectedInstances).toHaveBeenCalled();
   });
 
   test('closes comparison', async () => {
@@ -105,9 +116,9 @@ describe('Comparison', () => {
         store: useInputsStore,
         state: {
           previewContent: [
-            { id: 'mockId', title: 'mockTitle' },
-            { id: 'mockId', title: 'mockTitle' },
-            { id: 'mockId', title: 'mockTitle' },
+            { id: 'mockId_1', title: 'mockTitle 1' },
+            { id: 'mockId_2', title: 'mockTitle 2' },
+            { id: 'mockId_3', title: 'mockTitle 3' },
           ],
         },
       },