UIIN-2629: Consortial holdings accordion is not appearing after the s…

…haring of Instance (#2312)
folio-org · Oct 17, 2023 · e03476f · e03476f
1 parent b7c19d1
commit e03476f
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 10.0.1 IN PROGRESS
 
 * Instance 3rd pane: Adjust behavior when returning to instance from holdings/item full screen. Refs UIIN-2453.
+* Consortial holdings accordion is not appearing after the sharing of Instance. Fixes UIIN-2629.
 
 ## [10.0.0](https://github.com/folio-org/ui-inventory/tree/v10.0.0) (2023-10-13)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v9.4.12...v10.0.0)

diff --git a/src/Instance/InstanceDetails/InstanceDetails.js b/src/Instance/InstanceDetails/InstanceDetails.js
@@ -123,6 +123,8 @@ const InstanceDetails = forwardRef(({
     );
   }
 
+  const isConsortialHoldingsVisible = instance?.shared || isInstanceShadowCopy(instance?.source);
+
   const renderPaneTitle = () => {
     const isInstanceShared = Boolean(isShared || isInstanceShadowCopy(instance?.source));
 
@@ -196,7 +198,7 @@ const InstanceDetails = forwardRef(({
               <InstanceNewHolding instance={instance} />
             )}
 
-            {instance?.shared && (
+            {isConsortialHoldingsVisible && (
               <ConsortialHoldings instance={instance} />
             )}
 

diff --git a/src/Instance/InstanceDetails/InstanceDetails.test.js b/src/Instance/InstanceDetails/InstanceDetails.test.js
@@ -17,9 +17,14 @@ jest.mock('../InstanceDetails/ControllableDetail/ControllableDetail', () => jest
 jest.mock('../InstanceDetails/SubInstanceGroup/SubInstanceGroup', () => jest.fn().mockReturnValue('SubInstanceGroup'));
 jest.mock('../InstanceDetails/InstanceAcquisition/InstanceAcquisition', () => jest.fn().mockReturnValue('InstanceAcquisition'));
 jest.mock('../InstanceDetails/InstanceTitleData/InstanceTitleData', () => jest.fn().mockReturnValue('InstanceTitleData'));
+jest.mock('./ConsortialHoldings', () => ({
+  ...jest.requireActual('./ConsortialHoldings'),
+  ConsortialHoldings: () => <button type="button">Consortial holdings</button>,
+}));
 
 const instance = {
   title: 'Test Title',
+  source: 'FOLIO',
   contributors: [],
   identifiers: [],
   instanceTypeId: '1234',
@@ -30,6 +35,7 @@ const instance = {
   notes: [],
   staffSuppress: false,
   discoverySuppress: false,
+  shared: false,
 };
 
 const mockReferenceData = {
@@ -48,23 +54,31 @@ const queryClient = new QueryClient();
 const actionMenu = jest.fn();
 const onClose = jest.fn();
 const tagsEnabled = true;
+
+const renderInstanceDetails = (props) => {
+  const component = (
+    <QueryClientProvider client={queryClient}>
+      <DataContext.Provider value={mockReferenceData}>
+        <MemoryRouter>
+          <InstanceDetails
+            instance={instance}
+            onClose={onClose}
+            tagsEnabled={tagsEnabled}
+            actionMenu={actionMenu}
+            {...props}
+          />
+        </MemoryRouter>
+      </DataContext.Provider>
+    </QueryClientProvider>
+  );
+
+  return renderWithIntl(component, translationsProperties);
+};
+
 describe('InstanceDetails', () => {
   it('renders the InstanceDetails component', () => {
-    renderWithIntl(
-      <QueryClientProvider client={queryClient}>
-        <DataContext.Provider value={mockReferenceData}>
-          <MemoryRouter>
-            <InstanceDetails
-              instance={instance}
-              onClose={onClose}
-              tagsEnabled={tagsEnabled}
-              actionMenu={actionMenu}
-            />,
-          </MemoryRouter>
-        </DataContext.Provider>
-      </QueryClientProvider>,
-      translationsProperties
-    );
+    renderInstanceDetails();
+
     expect(screen.getByText('InstanceTitle')).toBeInTheDocument();
     expect(screen.getByText('Add holdings')).toBeInTheDocument();
     expect(screen.getByText('Administrative data')).toBeInTheDocument();
@@ -103,21 +117,7 @@ describe('InstanceDetails', () => {
       ...instance,
       staffSuppress: true,
     };
-    renderWithIntl(
-      <QueryClientProvider client={queryClient}>
-        <DataContext.Provider value={mockReferenceData}>
-          <MemoryRouter>
-            <InstanceDetails
-              instance={staffSuppressedInstance}
-              onClose={onClose}
-              tagsEnabled={tagsEnabled}
-              actionMenu={actionMenu}
-            />,
-          </MemoryRouter>
-        </DataContext.Provider>
-      </QueryClientProvider>,
-      translationsProperties
-    );
+    renderInstanceDetails({ instance: staffSuppressedInstance });
 
     expect(screen.getByText('Warning: Instance is marked staff suppressed')).toBeInTheDocument();
     expect(screen.getByText('Staff suppressed')).toBeInTheDocument();
@@ -128,21 +128,7 @@ describe('InstanceDetails', () => {
       ...instance,
       discoverySuppress: true,
     };
-    renderWithIntl(
-      <QueryClientProvider client={queryClient}>
-        <DataContext.Provider value={mockReferenceData}>
-          <MemoryRouter>
-            <InstanceDetails
-              instance={discoverySuppressedInstance}
-              onClose={onClose}
-              tagsEnabled={tagsEnabled}
-              actionMenu={actionMenu}
-            />,
-          </MemoryRouter>
-        </DataContext.Provider>
-      </QueryClientProvider>,
-      translationsProperties
-    );
+    renderInstanceDetails({ instance: discoverySuppressedInstance });
 
     expect(screen.getByText('Warning: Instance is marked suppressed from discovery')).toBeInTheDocument();
     expect(screen.getByText('Suppressed from discovery')).toBeInTheDocument();
@@ -153,48 +139,21 @@ describe('InstanceDetails', () => {
       staffSuppress: true,
       discoverySuppress: true,
     };
-    renderWithIntl(
-      <QueryClientProvider client={queryClient}>
-        <DataContext.Provider value={mockReferenceData}>
-          <MemoryRouter>
-            <InstanceDetails
-              instance={bothSuppressedInstance}
-              onClose={onClose}
-              tagsEnabled={tagsEnabled}
-              actionMenu={actionMenu}
-            />,
-          </MemoryRouter>
-        </DataContext.Provider>
-      </QueryClientProvider>,
-      translationsProperties
-    );
+    renderInstanceDetails({ instance: bothSuppressedInstance });
 
     expect(screen.getByText('Warning: Instance is marked suppressed from discovery and staff suppressed')).toBeInTheDocument();
   });
 
   it('expands and collapses the accordion sections', () => {
-    renderWithIntl(
-      <QueryClientProvider client={queryClient}>
-        <DataContext.Provider value={mockReferenceData}>
-          <MemoryRouter>
-            <InstanceDetails
-              instance={instance}
-              onClose={onClose}
-              tagsEnabled={tagsEnabled}
-              actionMenu={actionMenu}
-            />,
-          </MemoryRouter>
-        </DataContext.Provider>
-      </QueryClientProvider>,
-      translationsProperties
-    );
+    renderInstanceDetails();
 
     const expandAllButtons = screen.getByText('Expand all');
     const firstAccordionSection = screen.getByRole('button', { name: /Administrative data/i });
     const secondAccordionSection = screen.getByRole('button', { name: /Instance notes/i });
     const thirdAccordionSection = screen.getByRole('button', { name: /Electronic access/i });
     const fourthAccordionSection = screen.getByRole('button', { name: /Classification/i });
-    expect(firstAccordionSection.getAttribute('aria-expanded')).toBe('false');
+    // Administrative data is open because it has initial data inside it
+    expect(firstAccordionSection.getAttribute('aria-expanded')).toBe('true');
     expect(secondAccordionSection.getAttribute('aria-expanded')).toBe('false');
     expect(thirdAccordionSection.getAttribute('aria-expanded')).toBe('false');
     expect(fourthAccordionSection.getAttribute('aria-expanded')).toBe('false');
@@ -212,23 +171,39 @@ describe('InstanceDetails', () => {
   });
 
   it('renders tags button if tagsEnabled is true', () => {
-    renderWithIntl(
-      <QueryClientProvider client={queryClient}>
-        <DataContext.Provider value={mockReferenceData}>
-          <MemoryRouter>
-            <InstanceDetails
-              instance={instance}
-              onClose={onClose}
-              tagsEnabled={tagsEnabled}
-              actionMenu={actionMenu}
-            />,
-          </MemoryRouter>
-        </DataContext.Provider>
-      </QueryClientProvider>,
-      translationsProperties
-    );
+    renderInstanceDetails();
+
     const button = screen.getAllByRole('button', { id: 'clickable-show-tags' });
     fireEvent.click(button[1]);
     expect(button[1]).toBeEnabled();
   });
+
+  describe('Consortial holdings accordion', () => {
+    it('should be visible for shared instances', () => {
+      const sharedInstance = {
+        ...instance,
+        shared: true,
+      };
+      renderInstanceDetails({ instance: sharedInstance });
+
+      expect(screen.getByRole('button', { name: 'Consortial holdings' })).toBeInTheDocument();
+    });
+
+    it('should be visible for shadow instances', () => {
+      const shadowInstance = {
+        ...instance,
+        shared: false,
+        source: 'CONSORTIUM-FOLIO',
+      };
+      renderInstanceDetails({ instance: shadowInstance });
+
+      expect(screen.getByRole('button', { name: 'Consortial holdings' })).toBeInTheDocument();
+    });
+
+    it('should not be visible for local instances', () => {
+      renderInstanceDetails();
+
+      expect(screen.queryByRole('button', { name: 'Consortial holdings' })).not.toBeInTheDocument();
+    });
+  });
 });