Implemented search triggering when the search icon is clicked (#1341)

* Implemented search triggering when the search icon is clicked - Added code to implement search functionality even when the search icon is clicked. - Enhanced search functionality by allowing search initiation through both pressing 'Enter' and clicking the search icon in the user portal, ensuring uniformity. - Expanded test coverage to include all modified lines. - Users can now utilize dual search methods by both pressing 'Enter' and clicking the search icon to obtain search results. Signed-off-by: Akhilender <[email protected]> * fix: Removed the unused variables to fix test Signed-off-by: Akhilender <[email protected]> * fix: Fixed the failing tests Signed-off-by: Akhilender <[email protected]> * fix: Covered the missing lines in the codecov report Signed-off-by: Akhilender <[email protected]> * fix: Removed the comments - Resolved the changes requested. Signed-off-by: Akhilender <[email protected]> * fix: Covered the missing lines in requests.test.tsx Signed-off-by: Akhilender <[email protected]> --------- Signed-off-by: Akhilender <[email protected]>
PalisadoesFoundation · Jan 6, 2024 · 0e7a6a8 · 0e7a6a8
1 parent b231da8
commit 0e7a6a8
Show file tree

Hide file tree

Showing 20 changed files with 444 additions and 141 deletions.
diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx
@@ -8,7 +8,6 @@ import i18nForTest from 'utils/i18nForTest';
 import type { InterfaceQueryUserListItem } from 'utils/interfaces';
 import { MOCKS } from './UserTableItemMocks';
 import UsersTableItem from './UsersTableItem';
-
 const link = new StaticMockLink(MOCKS, true);
 
 async function wait(ms = 100): Promise<void> {
@@ -370,10 +369,11 @@ describe('Testing User Table Item', () => {
     expect(screen.getByTestId(`changeRoleInOrgdef`)).toHaveValue('USER?def');
 
     // Search for Joined Organization 1
+    const searchBtn = screen.getByTestId(`searchBtnJoinedOrgs`);
     fireEvent.keyUp(inputBox, {
-      key: 'Enter',
       target: { value: 'Joined Organization 1' },
     });
+    fireEvent.click(searchBtn);
     expect(screen.getByText(/Joined Organization 1/i)).toBeInTheDocument();
     expect(
       screen.queryByText(/Joined Organization 2/i)
@@ -390,7 +390,8 @@ describe('Testing User Table Item', () => {
 
     // Now clear the search box
     fireEvent.keyUp(inputBox, { key: 'Enter', target: { value: '' } });
-
+    fireEvent.keyUp(inputBox, { target: { value: '' } });
+    fireEvent.click(searchBtn);
     // Click on Creator Link
     fireEvent.click(screen.getByTestId(`creatorabc`));
     expect(toast.success).toBeCalledWith('Profile Page Coming Soon !');
@@ -547,10 +548,11 @@ describe('Testing User Table Item', () => {
     expect(toast.success).toBeCalledWith('Profile Page Coming Soon !');
 
     // Search for Blocked Organization 1
+    const searchBtn = screen.getByTestId(`searchBtnOrgsBlockedBy`);
     fireEvent.keyUp(inputBox, {
-      key: 'Enter',
       target: { value: 'Blocked Organization 1' },
     });
+    fireEvent.click(searchBtn);
     expect(screen.getByText(/Blocked Organization 1/i)).toBeInTheDocument();
     expect(
       screen.queryByText(/Blocked Organization 2/i)
@@ -567,6 +569,8 @@ describe('Testing User Table Item', () => {
 
     // Now clear the search box
     fireEvent.keyUp(inputBox, { key: 'Enter', target: { value: '' } });
+    fireEvent.keyUp(inputBox, { target: { value: '' } });
+    fireEvent.click(searchBtn);
 
     // Click on Organization Link
     fireEvent.click(screen.getByText(/Blocked Organization 1/i));

diff --git a/src/components/UsersTableItem/UsersTableItem.tsx b/src/components/UsersTableItem/UsersTableItem.tsx
@@ -127,34 +127,53 @@ const UsersTableItem = (props: Props): JSX.Element => {
   function handleCreator(): void {
     toast.success('Profile Page Coming Soon !');
   }
-  function handleSearchJoinedOrgs(e: any): void {
+  const searchJoinedOrgs = (value: string): void => {
+    setSearchByNameJoinedOrgs(value);
+    if (value == '') {
+      setJoinedOrgs(user.joinedOrganizations);
+    } else {
+      const filteredOrgs = user.joinedOrganizations.filter((org) =>
+        org.name.toLowerCase().includes(value.toLowerCase())
+      );
+      setJoinedOrgs(filteredOrgs);
+    }
+  };
+  const searchOrgsBlockedBy = (value: string): void => {
+    setSearchByNameOrgsBlockedBy(value);
+    if (value == '') {
+      setOrgsBlockedBy(user.organizationsBlockedBy);
+    } else {
+      const filteredOrgs = user.organizationsBlockedBy.filter((org) =>
+        org.name.toLowerCase().includes(value.toLowerCase())
+      );
+      setOrgsBlockedBy(filteredOrgs);
+    }
+  };
+  const handleSearchJoinedOrgs = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByNameJoinedOrgs(value);
-      if (value == '') {
-        setJoinedOrgs(user.joinedOrganizations);
-      } else {
-        const filteredOrgs = user.joinedOrganizations.filter((org) =>
-          org.name.toLowerCase().includes(value.toLowerCase())
-        );
-        setJoinedOrgs(filteredOrgs);
-      }
+      searchJoinedOrgs(value);
     }
-  }
-  function handleSearcgByOrgsBlockedBy(e: any): void {
+  };
+  const handleSearcgByOrgsBlockedBy = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByNameOrgsBlockedBy(value);
-      if (value == '') {
-        setOrgsBlockedBy(user.organizationsBlockedBy);
-      } else {
-        const filteredOrgs = user.organizationsBlockedBy.filter((org) =>
-          org.name.toLowerCase().includes(value.toLowerCase())
-        );
-        setOrgsBlockedBy(filteredOrgs);
-      }
+      searchOrgsBlockedBy(value);
     }
-  }
+  };
+  const handleSearchButtonClickJoinedOrgs = (): void => {
+    const inputValue =
+      (document.getElementById('orgname-joined-orgs') as HTMLInputElement)
+        ?.value || '';
+    searchJoinedOrgs(inputValue);
+  };
+
+  const handleSearchButtonClickOrgsBlockedBy = (): void => {
+    const inputValue =
+      (document.getElementById('orgname-blocked-by') as HTMLInputElement)
+        ?.value || '';
+    searchOrgsBlockedBy(inputValue);
+  };
 
   /* istanbul ignore next */
   function onHideRemoveUserModal(): void {
@@ -223,7 +242,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
             <div className={'position-relative mb-4 border rounded'}>
               <Form.Control
                 type="name"
-                id="orgname"
+                id="orgname-joined-orgs"
                 className="bg-white"
                 defaultValue={searchByNameJoinedOrgs}
                 placeholder={t('searchByOrgName')}
@@ -234,6 +253,8 @@ const UsersTableItem = (props: Props): JSX.Element => {
               <Button
                 tabIndex={-1}
                 className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                onClick={handleSearchButtonClickJoinedOrgs}
+                data-testid="searchBtnJoinedOrgs"
               >
                 <Search />
               </Button>
@@ -396,7 +417,7 @@ const UsersTableItem = (props: Props): JSX.Element => {
             <div className={'position-relative mb-4 border rounded'}>
               <Form.Control
                 type="name"
-                id="orgname"
+                id="orgname-blocked-by"
                 className="bg-white"
                 defaultValue={searchByNameOrgsBlockedBy}
                 placeholder={t('searchByOrgName')}
@@ -408,6 +429,8 @@ const UsersTableItem = (props: Props): JSX.Element => {
                 tabIndex={-1}
                 variant="danger"
                 className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                onClick={handleSearchButtonClickOrgsBlockedBy}
+                data-testid="searchBtnOrgsBlockedBy"
               >
                 <Search />
               </Button>

diff --git a/src/screens/BlockUser/BlockUser.test.tsx b/src/screens/BlockUser/BlockUser.test.tsx
@@ -18,6 +18,7 @@ import { ToastContainer } from 'react-toastify';
 import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import i18nForTest from 'utils/i18nForTest';
+
 import BlockUser from './BlockUser';
 
 let userQueryCalled = false;
@@ -630,4 +631,34 @@ describe('Testing Block/Unblock user screen', () => {
     ).toBeInTheDocument();
     expect(window.location).toBeAt('/blockuser/id=orgid');
   });
+
+  test('Testing Search functionality', async () => {
+    window.location.assign('/blockuser/id=orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+              <ToastContainer />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+    await wait();
+    const searchBar = screen.getByTestId(/searchByName/i);
+    const searchBtn = screen.getByTestId(/searchBtn/i);
+    expect(searchBar).toBeInTheDocument();
+    userEvent.type(searchBar, 'Dummy{enter}');
+    await wait();
+    userEvent.clear(searchBar);
+    userEvent.type(searchBar, 'Dummy');
+    userEvent.click(searchBtn);
+    await wait();
+    userEvent.clear(searchBar);
+    userEvent.type(searchBar, '');
+    userEvent.click(searchBtn);
+  });
 });
diff --git a/src/screens/BlockUser/BlockUser.tsx b/src/screens/BlockUser/BlockUser.tsx
@@ -117,18 +117,29 @@ const Requests = (): JSX.Element => {
     toast.error(memberError.message);
   }
 
-  const handleSearch = (e: any): void => {
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    memberRefetch({
+      orgId: currentUrl,
+      firstName_contains: searchByFirstName ? value : '',
+      lastName_contains: searchByFirstName ? '' : value,
+    });
+  };
+
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByName(value);
-      memberRefetch({
-        orgId: currentUrl,
-        firstName_contains: searchByFirstName ? value : '',
-        lastName_contains: searchByFirstName ? '' : value,
-      });
+      handleSearch(value);
     }
   };
 
+  const handleSearchByBtnClick = (): void => {
+    const inputValue =
+      (document.getElementById('searchBlockedUsers') as HTMLInputElement)
+        ?.value || '';
+    handleSearch(inputValue);
+  };
+
   const headerTitles: string[] = [
     '#',
     t('name'),
@@ -145,6 +156,7 @@ const Requests = (): JSX.Element => {
             <div className={styles.input}>
               <Form.Control
                 type="name"
+                id="searchBlockedUsers"
                 className="bg-white"
                 placeholder={
                   searchByFirstName
@@ -154,11 +166,13 @@ const Requests = (): JSX.Element => {
                 data-testid="searchByName"
                 autoComplete="off"
                 required
-                onKeyUp={handleSearch}
+                onKeyUp={handleSearchByEnter}
               />
               <Button
                 tabIndex={-1}
                 className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                onClick={handleSearchByBtnClick}
+                data-testid="searchBtn"
               >
                 <Search />
               </Button>

diff --git a/src/screens/OrgList/OrgList.test.tsx b/src/screens/OrgList/OrgList.test.tsx
@@ -54,7 +54,7 @@ describe('Organisations Page testing as SuperAdmin', () => {
     image: new File(['hello'], 'hello.png', { type: 'image/png' }),
   };
 
-  test('Testing search functionality', async () => {
+  test('Testing search functionality by pressing enter', async () => {
     localStorage.setItem('id', '123');
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -72,7 +72,28 @@ describe('Organisations Page testing as SuperAdmin', () => {
     // Test that the search bar filters organizations by name
     const searchBar = screen.getByTestId(/searchByName/i);
     expect(searchBar).toBeInTheDocument();
+    userEvent.type(searchBar, 'Dummy{enter}');
+  });
+
+  test('Testing search functionality by Btn click', async () => {
+    localStorage.setItem('id', '123');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+    await wait();
+
+    const searchBar = screen.getByTestId('searchByName');
+    const searchBtn = screen.getByTestId('searchBtn');
     userEvent.type(searchBar, 'Dummy');
+    fireEvent.click(searchBtn);
   });
 
   test('Should render no organisation warning alert when there are no organization', async () => {

diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
@@ -223,19 +223,31 @@ function orgList(): JSX.Element {
   };
 
   /* istanbul ignore next */
-  const handleSearchByName = (e: any): void => {
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    if (value === '') {
+      resetAllParams();
+      return;
+    }
+    refetchOrgs({
+      filter: value,
+    });
+  };
+
+  const handleSearchByEnter = (e: any): void => {
     if (e.key === 'Enter') {
       const { value } = e.target;
-      setSearchByName(value);
-      if (value == '') {
-        resetAllParams();
-        return;
-      }
-      refetchOrgs({
-        filter: value,
-      });
+      handleSearch(value);
     }
   };
+
+  const handleSearchByBtnClick = (): void => {
+    const inputElement = document.getElementById(
+      'searchOrgname'
+    ) as HTMLInputElement;
+    const inputValue = inputElement?.value || '';
+    handleSearch(inputValue);
+  };
   /* istanbul ignore next */
   const loadMoreOrganizations = (): void => {
     console.log('loadMoreOrganizations');
@@ -300,17 +312,19 @@ function orgList(): JSX.Element {
           <div className={styles.input}>
             <Form.Control
               type="name"
-              id="orgname"
+              id="searchOrgname"
               className="bg-white"
               placeholder={t('searchByName')}
               data-testid="searchByName"
               autoComplete="off"
               required
-              onKeyUp={handleSearchByName}
+              onKeyUp={handleSearchByEnter}
             />
             <Button
               tabIndex={-1}
               className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+              onClick={handleSearchByBtnClick}
+              data-testid="searchBtn"
             >
               <Search />
             </Button>

diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx
@@ -245,7 +245,9 @@ describe('Organisation Post Page', () => {
       });
     }
     await debounceWait();
+    const searchBtn = screen.getByTestId('searchBtn');
     userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone{enter}');
+    userEvent.click(searchBtn);
     await debounceWait();
     const sortDropdown = screen.getByTestId('sort');
     userEvent.click(sortDropdown);