diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx index 4d91fa88df..6767f73229 100644 --- 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 { @@ -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 index 59b3bef616..842329e44b 100644 --- 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 => {
{ @@ -396,7 +417,7 @@ 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" > diff --git a/src/screens/BlockUser/BlockUser.test.tsx b/src/screens/BlockUser/BlockUser.test.tsx index 778a5ffa4e..ede51a9777 100644 --- 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( + + + + + + + + + + + ); + 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 index 644044feb4..4bccd808a8 100644 --- 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 => {
{ data-testid="searchByName" autoComplete="off" required - onKeyUp={handleSearch} + onKeyUp={handleSearchByEnter} /> diff --git a/src/screens/OrgList/OrgList.test.tsx b/src/screens/OrgList/OrgList.test.tsx index 35acc85c45..3cf16869f8 100644 --- 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( @@ -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( + + + + + + + + + + ); + 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 index 72058e8d96..abfcae17c3 100644 --- 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 {
diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx index 5c8672e122..fecaa77169 100644 --- 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); diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx index f1f2e477fa..f4dc98eee8 100644 --- a/src/screens/OrgPost/OrgPost.tsx +++ b/src/screens/OrgPost/OrgPost.tsx @@ -138,19 +138,28 @@ function orgPost(): JSX.Element { if (orgPostListError) { window.location.assign('/orglist'); } + const handleSearch = (value: string): void => { + const filterData = { + id: currentUrl, + title_contains: showTitle ? value : undefined, + text_contains: !showTitle ? value : undefined, + }; + refetch(filterData); + }; - const handleSearch = (e: any): void => { + const handleSearchByEnter = (e: any): void => { if (e.key === 'Enter') { const { value } = e.target; - const filterData = { - id: currentUrl, - title_contains: showTitle ? value : null, - text_contains: !showTitle ? value : null, - }; - refetch(filterData); + handleSearch(value); } }; + const handleSearchByBtnClick = (): void => { + const inputValue = + (document.getElementById('searchPosts') as HTMLInputElement)?.value || ''; + handleSearch(inputValue); + }; + const handleSorting = (option: string): void => { setSortingOption(option); }; @@ -196,17 +205,19 @@ function orgPost(): JSX.Element {
diff --git a/src/screens/Requests/Requests.test.tsx b/src/screens/Requests/Requests.test.tsx index 8ede1a4cdf..415a0b1ad9 100644 --- a/src/screens/Requests/Requests.test.tsx +++ b/src/screens/Requests/Requests.test.tsx @@ -113,8 +113,20 @@ describe('Testing Request screen', () => { await wait(); const searchInput = screen.getByTestId('searchByName'); + const searchBtn = screen.getByTestId('searchBtn'); + userEvent.type(searchInput, ''); + userEvent.click(searchBtn); + await wait(); + userEvent.clear(searchInput); + userEvent.type(searchInput, 'l{enter}'); + await wait(); + await screen.findByTestId('searchAndNotFound'); + userEvent.clear(searchInput); + userEvent.type(searchInput, 'l'); + userEvent.click(searchBtn); + await wait(); await screen.findByTestId('searchAndNotFound'); }); diff --git a/src/screens/Requests/Requests.tsx b/src/screens/Requests/Requests.tsx index c991d5d05e..d5c52ef2a4 100644 --- a/src/screens/Requests/Requests.tsx +++ b/src/screens/Requests/Requests.tsx @@ -238,23 +238,34 @@ const Requests = (): JSX.Element => { } }; - /* istanbul ignore next */ - const handleSearchByName = async (e: any): Promise => { + const handleSearch = async (value: string): Promise => { + setSearchByName(value); + if (value === '') { + resetAndRefetch(); + return; + } + await refetchUsers({ + firstName_contains: value, + lastName_contains: '', + // Later on we can add several search and filter options + }); + }; + + const handleSearchByEnter = (e: any): void => { if (e.key === 'Enter') { const { value } = e.target; - setSearchByName(value); - if (value === '') { - resetAndRefetch(); - return; - } - await refetchUsers({ - firstName_contains: value, - lastName_contains: '', - // Later on we can add several search and filter options - }); + handleSearch(value); } }; + const handleSearchByBtnClick = (): void => { + const inputElement = document.getElementById( + 'searchRequests' + ) as HTMLInputElement; + const inputValue = inputElement?.value || ''; + handleSearch(inputValue); + }; + const headerTitles: string[] = [ '#', t('name'), @@ -307,16 +318,19 @@ const Requests = (): JSX.Element => { > diff --git a/src/screens/UserPortal/Chat/Chat.test.tsx b/src/screens/UserPortal/Chat/Chat.test.tsx index 6476e9ee40..a2f709d8a4 100644 --- a/src/screens/UserPortal/Chat/Chat.test.tsx +++ b/src/screens/UserPortal/Chat/Chat.test.tsx @@ -148,7 +148,7 @@ describe('Testing People Screen [User Portal]', () => { expect(screen.queryAllByText('Noble Mittal')).not.toBe([]); }); - test('Search functionality works as expected', async () => { + test('Search functionality works as expected by pressing enter key', async () => { render( @@ -163,7 +163,31 @@ describe('Testing People Screen [User Portal]', () => { await wait(); + userEvent.type(screen.getByTestId('searchInput'), 'j{enter}'); + await wait(); + + expect(getOrganizationIdSpy).toHaveBeenCalled(); + expect(screen.queryByText('John Cena')).toBeInTheDocument(); + expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument(); + }); + + test('Search functionality works as expected by clicking search Btn', async () => { + render( + + + + + + + + + + ); + + await wait(); + const searchBtn = screen.getByTestId('searchBtn'); userEvent.type(screen.getByTestId('searchInput'), 'j'); + userEvent.click(searchBtn); await wait(); expect(getOrganizationIdSpy).toHaveBeenCalled(); diff --git a/src/screens/UserPortal/Chat/Chat.tsx b/src/screens/UserPortal/Chat/Chat.tsx index 1ae9d5764d..aef6b24026 100644 --- a/src/screens/UserPortal/Chat/Chat.tsx +++ b/src/screens/UserPortal/Chat/Chat.tsx @@ -57,17 +57,23 @@ export default function chat(): JSX.Element { }, }); - const handleSearch = ( - event: React.ChangeEvent - ): void => { - const newFilter = event.target.value; - setFilterName(newFilter); + const handleSearch = (value: string): void => { + setFilterName(value); - const filter = { - firstName_contains: newFilter, - }; - - contactRefetch(filter); + contactRefetch({ + firstName_contains: value, + }); + }; + const handleSearchByEnter = (e: any): void => { + if (e.key === 'Enter') { + const { value } = e.target; + handleSearch(value); + } + }; + const handleSearchByBtnClick = (): void => { + const value = + (document.getElementById('searchChats') as HTMLInputElement)?.value || ''; + handleSearch(value); }; React.useEffect(() => { @@ -92,14 +98,17 @@ export default function chat(): JSX.Element { diff --git a/src/screens/UserPortal/Events/Events.test.tsx b/src/screens/UserPortal/Events/Events.test.tsx index 0559d39de5..52e658a641 100644 --- a/src/screens/UserPortal/Events/Events.test.tsx +++ b/src/screens/UserPortal/Events/Events.test.tsx @@ -288,7 +288,7 @@ describe('Testing Events Screen [User Portal]', () => { expect(screen.queryByText(mockEventTitle)).toBeInTheDocument(); }); - test('Search works as expected when user types in search input', async () => { + test('Search works as expected when user types in search input and press enter key', async () => { const getOrganizationIdSpy = jest .spyOn(getOrganizationId, 'default') .mockImplementation(() => { @@ -311,7 +311,7 @@ describe('Testing Events Screen [User Portal]', () => { expect(getOrganizationIdSpy).toHaveBeenCalled(); - const randomSearchInput = 'test'; + const randomSearchInput = 'test{enter}'; userEvent.type(screen.getByTestId('searchInput'), randomSearchInput); await wait(); @@ -332,6 +332,55 @@ describe('Testing Events Screen [User Portal]', () => { expect(screen.queryByText(mockEventTitleAbsent)).not.toBeInTheDocument(); }); + test('Search works as expected when user types in search input and clicks search Btn', async () => { + const getOrganizationIdSpy = jest + .spyOn(getOrganizationId, 'default') + .mockImplementation(() => { + return ''; + }); + + render( + + + + + + + + + + ); + + await wait(); + + expect(getOrganizationIdSpy).toHaveBeenCalled(); + const searchInput = screen.getByTestId('searchInput'); + const searchBtn = screen.getByTestId('searchBtn'); + userEvent.type(searchInput, ''); + userEvent.click(searchBtn); + await wait(); + userEvent.clear(searchInput); + userEvent.type(searchInput, 'test'); + userEvent.click(searchBtn); + + await wait(); + + let mockEventTitle = ''; + if (MOCKS[0].result?.data.eventsByOrganizationConnection) { + mockEventTitle = + MOCKS[0].result?.data.eventsByOrganizationConnection[0].title; + } + + let mockEventTitleAbsent = ''; + if (MOCKS[0].result?.data.eventsByOrganizationConnection) { + mockEventTitleAbsent = + MOCKS[0].result?.data.eventsByOrganizationConnection[1].title; + } + + expect(screen.queryByText(mockEventTitle)).toBeInTheDocument(); + expect(screen.queryByText(mockEventTitleAbsent)).not.toBeInTheDocument(); + }); + test('Create event works as expected when event is not an all day event.', async () => { const getOrganizationIdSpy = jest .spyOn(getOrganizationId, 'default') diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx index 47332c10b4..13bf916b6c 100644 --- a/src/screens/UserPortal/Events/Events.tsx +++ b/src/screens/UserPortal/Events/Events.tsx @@ -54,7 +54,6 @@ export default function events(): JSX.Element { const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(5); const [events, setEvents] = React.useState([]); - const [filterName, setFilterName] = React.useState(''); const [mode, setMode] = React.useState(0); const [showCreateEventModal, setShowCreateEventModal] = React.useState(false); const [eventTitle, setEventTitle] = React.useState(''); @@ -148,16 +147,23 @@ export default function events(): JSX.Element { setPage(0); }; - const handleSearch = ( - event: React.ChangeEvent - ): void => { - const newFilter = event.target.value; - setFilterName(newFilter); - const filter = { - title_contains: newFilter, - }; + const handleSearch = (value: string): void => { + refetch({ + title_contains: value, + }); setPage(0); - refetch(filter); + }; + const handleSearchByEnter = (e: any): void => { + if (e.key === 'Enter') { + const { value } = e.target; + handleSearch(value); + } + }; + const handleSearchByBtnClick = (): void => { + const value = + (document.getElementById('searchEvents') as HTMLInputElement)?.value || + ''; + handleSearch(value); }; const handleEventTitleChange = ( @@ -210,15 +216,18 @@ export default function events(): JSX.Element { > diff --git a/src/screens/UserPortal/Organizations/Organizations.test.tsx b/src/screens/UserPortal/Organizations/Organizations.test.tsx index 6d92831940..f206ccab8f 100644 --- a/src/screens/UserPortal/Organizations/Organizations.test.tsx +++ b/src/screens/UserPortal/Organizations/Organizations.test.tsx @@ -165,12 +165,16 @@ describe('Testing Organizations Screen [User Portal]', () => { ); await wait(); - - userEvent.type(screen.getByTestId('searchInput'), '2'); + const searchBtn = screen.getByTestId('searchBtn'); + userEvent.type(screen.getByTestId('searchInput'), '2{enter}'); await wait(); expect(screen.queryByText('anyOrganization2')).toBeInTheDocument(); expect(screen.queryByText('anyOrganization1')).not.toBeInTheDocument(); + + userEvent.clear(screen.getByTestId('searchInput')); + userEvent.click(searchBtn); + await wait(); }); test('Mode is changed to joined organizations', async () => { diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx index c0b77f805e..f2a75b023c 100644 --- a/src/screens/UserPortal/Organizations/Organizations.tsx +++ b/src/screens/UserPortal/Organizations/Organizations.tsx @@ -74,17 +74,24 @@ export default function organizations(): JSX.Element { setPage(0); }; - const handleSearch = ( - event: React.ChangeEvent - ): void => { - const newFilter = event.target.value; - setFilterName(newFilter); - - const filter = { - filter: newFilter, - }; + const handleSearch = (value: string): void => { + setFilterName(value); - refetch(filter); + refetch({ + filter: value, + }); + }; + const handleSearchByEnter = (e: any): void => { + if (e.key === 'Enter') { + const { value } = e.target; + handleSearch(value); + } + }; + const handleSearchByBtnClick = (): void => { + const value = + (document.getElementById('searchUserOrgs') as HTMLInputElement)?.value || + ''; + handleSearch(value); }; /* istanbul ignore next */ @@ -124,14 +131,17 @@ export default function organizations(): JSX.Element { diff --git a/src/screens/UserPortal/People/People.test.tsx b/src/screens/UserPortal/People/People.test.tsx index b373a68e98..19af06123f 100644 --- a/src/screens/UserPortal/People/People.test.tsx +++ b/src/screens/UserPortal/People/People.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { act, render, screen } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; - import { ORGANIZATIONS_MEMBER_CONNECTION_LIST, ORGANIZATION_ADMINS_LIST, @@ -156,7 +155,7 @@ describe('Testing People Screen [User Portal]', () => { expect(screen.queryAllByText('Noble Mittal')).not.toBe([]); }); - test('Search works properly', async () => { + test('Search works properly by pressing enter', async () => { render( @@ -171,7 +170,34 @@ describe('Testing People Screen [User Portal]', () => { await wait(); + userEvent.type(screen.getByTestId('searchInput'), 'j{enter}'); + await wait(); + + expect(getOrganizationIdSpy).toHaveBeenCalled(); + expect(screen.queryByText('John Cena')).toBeInTheDocument(); + expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument(); + }); + + test('Search works properly by clicking search Btn', async () => { + render( + + + + + + + + + + ); + + await wait(); + const searchBtn = screen.getByTestId('searchBtn'); + userEvent.type(screen.getByTestId('searchInput'), ''); + userEvent.click(searchBtn); + await wait(); userEvent.type(screen.getByTestId('searchInput'), 'j'); + userEvent.click(searchBtn); await wait(); expect(getOrganizationIdSpy).toHaveBeenCalled(); diff --git a/src/screens/UserPortal/People/People.tsx b/src/screens/UserPortal/People/People.tsx index f8b4d7ca3d..5bf6991af5 100644 --- a/src/screens/UserPortal/People/People.tsx +++ b/src/screens/UserPortal/People/People.tsx @@ -31,7 +31,6 @@ export default function people(): JSX.Element { const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(5); const [members, setMembers] = React.useState([]); - const [filterName, setFilterName] = React.useState(''); const [mode, setMode] = React.useState(0); const organizationId = getOrganizationId(window.location.href); @@ -70,20 +69,26 @@ export default function people(): JSX.Element { setPage(0); }; - const handleSearch = ( - event: React.ChangeEvent - ): void => { - const newFilter = event.target.value; - setFilterName(newFilter); - - const filter = { + const handleSearch = (newFilter: string): void => { + refetch({ firstName_contains: newFilter, - }; + }); + }; - refetch(filter); + const handleSearchByEnter = (e: any): void => { + if (e.key === 'Enter') { + const { value } = e.target; + handleSearch(value); + } + }; + + const handleSearchByBtnClick = (): void => { + const inputValue = + (document.getElementById('searchPeople') as HTMLInputElement)?.value || + ''; + handleSearch(inputValue); }; - /* istanbul ignore next */ React.useEffect(() => { if (data) { setMembers(data.organizationsMemberConnection.edges); @@ -119,14 +124,17 @@ export default function people(): JSX.Element { diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx index 7879d833fb..446fc57f7d 100644 --- a/src/screens/Users/Users.test.tsx +++ b/src/screens/Users/Users.test.tsx @@ -103,9 +103,11 @@ describe('Testing Users screen', () => { ); await wait(); - - const search1 = 'John{backspace}{backspace}{backspace}{backspace}'; + const searchBtn = screen.getByTestId('searchButton'); + const search1 = 'John'; userEvent.type(screen.getByTestId(/searchByName/i), search1); + userEvent.click(searchBtn); + await wait(); const search2 = 'Pete{backspace}{backspace}{backspace}{backspace}'; userEvent.type(screen.getByTestId(/searchByName/i), search2); @@ -119,7 +121,10 @@ describe('Testing Users screen', () => { const search5 = 'Xe'; userEvent.type(screen.getByTestId(/searchByName/i), search5); + userEvent.clear(screen.getByTestId(/searchByName/i)); userEvent.type(screen.getByTestId(/searchByName/i), ''); + userEvent.click(searchBtn); + await wait(); }); test('testing search not found', async () => { diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx index 6ec5ff9192..86adefe967 100644 --- a/src/screens/Users/Users.tsx +++ b/src/screens/Users/Users.tsx @@ -108,22 +108,33 @@ const Users = (): JSX.Element => { } }, [loading]); - const handleSearchByName = (e: any): void => { - /* istanbul ignore next */ + const handleSearch = (value: string): void => { + setSearchByName(value); + if (value === '') { + resetAndRefetch(); + return; + } + refetchUsers({ + firstName_contains: value, + lastName_contains: '', + // Later on we can add several search and filter options + }); + }; + + const handleSearchByEnter = (e: any): void => { if (e.key === 'Enter') { const { value } = e.target; - setSearchByName(value); - if (value.length === 0) { - resetAndRefetch(); - return; - } - refetchUsers({ - firstName_contains: value, - lastName_contains: '', - // Later on we can add several search and filter options - }); + handleSearch(value); } }; + + const handleSearchByBtnClick = (): void => { + const inputElement = document.getElementById( + 'searchUsers' + ) as HTMLInputElement; + const inputValue = inputElement?.value || ''; + handleSearch(inputValue); + }; /* istanbul ignore next */ const resetAndRefetch = (): void => { refetchUsers({ @@ -243,17 +254,19 @@ const Users = (): JSX.Element => { >