refactor: hide disabled elements

folio-org · Oct 10, 2023 · 42680c2 · 42680c2
1 parent 3b64431
commit 42680c2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/src/components/LostItemsLink/LostItemsLink.js b/src/components/LostItemsLink/LostItemsLink.js
@@ -17,6 +17,10 @@ import {
 const LostItemsLink = ({ disabled }) => {
   const history = useHistory();
 
+  if (disabled) {
+    return null;
+  }
+
   return (
     <IfPermission perm="ui-users.lost-items.requiring-actual-cost">
       <Button
@@ -29,7 +33,6 @@ const LostItemsLink = ({ disabled }) => {
             search: history?.location?.search,
           },
         }}
-        disabled={disabled}
         buttonStyle="dropdownItem"
       >
         <Icon icon="edit">

diff --git a/src/components/LostItemsLink/LostItemsLink.test.js b/src/components/LostItemsLink/LostItemsLink.test.js
@@ -67,8 +67,8 @@ describe('LostItemsLink', () => {
 
   it('should button be disabled', () => {
     renderLostItemsLink({ disabled: true });
-    const lostItemsLink = screen.getByRole('button');
+    const lostItemsLink = screen.queryByRole('button');
 
-    expect(lostItemsLink).toBeDisabled();
+    expect(lostItemsLink).toBeNull();
   });
 });
diff --git a/src/components/RequestFeeFineBlockButtons/RequestFeeFineBlockButtons.js b/src/components/RequestFeeFineBlockButtons/RequestFeeFineBlockButtons.js
@@ -30,6 +30,10 @@ class RequestFeeFineBlockButtons extends React.Component {
     } = this.props;
     const createRequestUrl = getRequestUrl(barcode, userId);
 
+    if (disabled) {
+      return null;
+    }
+
     return (
       <div data-test-actions-menu>
         <IfPermission perm="ui-requests.all">
@@ -38,7 +42,6 @@ class RequestFeeFineBlockButtons extends React.Component {
             data-test-actions-menu-create-request
             to={createRequestUrl}
             onClick={onToggle}
-            disabled={disabled}
           >
             <Icon icon="plus-sign">
               <FormattedMessage id="ui-users.requests.createRequest" />
@@ -51,7 +54,6 @@ class RequestFeeFineBlockButtons extends React.Component {
             data-test-actions-menu-create-feesfines
             to={{ pathname: `/users/${userId}/charge` }}
             onClick={onToggle}
-            disabled={disabled}
           >
             <Icon icon="plus-sign">
               <FormattedMessage id="ui-users.accounts.chargeManual" />
@@ -63,7 +65,6 @@ class RequestFeeFineBlockButtons extends React.Component {
             buttonStyle="dropdownItem"
             data-test-actions-menu-create-patronblocks
             id="create-patron-block"
-            disabled={disabled}
             to={{
               pathname: `/users/${userId}/patronblocks/create`,
               search: location.search,

diff --git a/src/components/RequestFeeFineBlockButtons/RequestFeeFineBlockButtons.test.js b/src/components/RequestFeeFineBlockButtons/RequestFeeFineBlockButtons.test.js
@@ -47,11 +47,9 @@ describe('RequestFeeFineBlockButtons', () => {
 
     it('should createRequest button to be disabled', () => {
       renderRequestFeeFineBlockButtons({ disabled: true });
-      const buttonElements = screen.getAllByRole('button');
+      const buttonElement = screen.queryByRole('button');
 
-      buttonElements.forEach((buttonElement) => {
-        expect(buttonElement).toBeDisabled();
-      });
+      expect(buttonElement).toBeNull();
     });
   });