Skip to content

Commit

Permalink
added the reviewed changes and improved tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@chandel-aman
chandel-aman committed Dec 8, 2023
1 parent dcb1281 commit af20ff6
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 117 deletions.
131 changes: 36 additions & 95 deletions src/screens/Requests/Requests.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { act, render, screen, fireEvent } from '@testing-library/react';
import { act, fireEvent, render, screen } from '@testing-library/react';
import 'jest-localstorage-mock';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
Expand Down Expand Up @@ -110,14 +110,46 @@ describe('Testing Request screen', () => {
</MockedProvider>
);

await wait();

const searchInput = screen.getByTestId('searchByName');
userEvent.type(searchInput, 'l');

const notFoundDiv = await screen.findByTestId('searchAndNotFound');
await screen.findByTestId('searchAndNotFound');
});

test('Testing search latest and oldest toggle', async () => {
await act(async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Requests />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();

expect(notFoundDiv).toBeInTheDocument();
const searchInput = screen.getByTestId('sort');
expect(searchInput).toBeInTheDocument();

await wait();
const inputText = screen.getByTestId('sortDropdown');

fireEvent.click(inputText);
const toggleText = screen.getByTestId('latest');

fireEvent.click(toggleText);

expect(searchInput).toBeInTheDocument();
fireEvent.click(inputText);
const toggleTite = screen.getByTestId('oldest');
fireEvent.click(toggleTite);
expect(searchInput).toBeInTheDocument();
});
});

test('Testing accept user functionality', async () => {
Expand Down Expand Up @@ -195,95 +227,4 @@ describe('Testing Request screen', () => {
'Organizations not found, please create an organization through dashboard'
);
});

test('Testing search latest and oldest toggle', async () => {
await act(async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Requests />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();

const searchInput = screen.getByTestId('sort');
expect(searchInput).toBeInTheDocument();

const inputText = screen.getByTestId('sortuser');

fireEvent.click(inputText);
const toggleText = screen.getByTestId('latest');

fireEvent.click(toggleText);

expect(searchInput).toBeInTheDocument();
fireEvent.click(inputText);
const toggleTite = screen.getByTestId('oldest');
fireEvent.click(toggleTite);
expect(searchInput).toBeInTheDocument();
});
});
test('Testing seach by name functionalities', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Requests />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();

const search1 = 'John{backspace}{backspace}{backspace}{backspace}';
userEvent.type(screen.getByTestId(/searchByName/i), search1);

const search2 = 'Pete{backspace}{backspace}{backspace}{backspace}';
userEvent.type(screen.getByTestId(/searchByName/i), search2);

const search3 =
'John{backspace}{backspace}{backspace}{backspace}Sam{backspace}{backspace}{backspace}';
userEvent.type(screen.getByTestId(/searchByName/i), search3);

const search4 = 'Sam{backspace}{backspace}P{backspace}';
userEvent.type(screen.getByTestId(/searchByName/i), search4);

const search5 = 'Xe';
userEvent.type(screen.getByTestId(/searchByName/i), search5);
userEvent.type(screen.getByTestId(/searchByName/i), '');
});

test('Does not display loading state when isLoading is false and usersData is present', async () => {
// Mock the scenario where isLoading is false and there is some data in usersData
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<ToastContainer />
<Requests />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

// Wait for the component to finish rendering
await wait();

// Check if the loading state is NOT displayed
const loadingState = screen.queryByText(/Loading/i);
expect(loadingState).toBeNull();

// Add any additional assertions based on your test case
});
});
64 changes: 42 additions & 22 deletions src/screens/Requests/Requests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ import type {
InterfaceQueryRequestListItem,
InterfaceUserType,
} from 'utils/interfaces';

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
import styles from './Requests.module.css';

const Requests = (): JSX.Element => {
Expand All @@ -41,11 +45,10 @@ const Requests = (): JSX.Element => {
const [hasMore, sethasMore] = useState(true);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const [searchByName, setSearchByName] = useState('');
const [sortingOption, setSortingOption] = useState('latest');
const [sortingOption, setSortingOption] = useState('');
const [displayedUsers, setDisplayedUsers] = useState<
InterfaceQueryRequestListItem[]
>([]);

const [acceptAdminFunc] = useMutation(ACCEPT_ADMIN_MUTATION);
const [rejectAdminFunc] = useMutation(REJECT_ADMIN_MUTATION);
const {
Expand Down Expand Up @@ -95,17 +98,29 @@ const Requests = (): JSX.Element => {
}, []);

// To manage loading states
useEffect(() => {
if (!usersData) {
setDisplayedUsers([]);
return;
const updateDisplayedUsers = (data: any): InterfaceQueryRequestListItem[] => {
if (!data) {
return [];
}
/* istanbul ignore next */
if (usersData.users.length < perPageResult) {
sethasMore(false);
} else {
setDisplayedUsers(usersData?.users);

const newDisplayedUsers = sortRequests(data.users, sortingOption);
return newDisplayedUsers;
};

const setHasMoreBasedOnUsers = (data: any): boolean => {
if (!data) {
return false;
}

return data.users.length >= perPageResult;
};

useEffect(() => {
const newDisplayedUsers = updateDisplayedUsers(usersData);
setDisplayedUsers(newDisplayedUsers);

const hasMoreValue = setHasMoreBasedOnUsers(usersData);
sethasMore(hasMoreValue);
}, [usersData]);

// If the user is not Superadmin, redirect to Organizations screen
Expand Down Expand Up @@ -248,6 +263,7 @@ const Requests = (): JSX.Element => {
t('email'),
t('accept'),
t('reject'),
'',
];

const handleSorting = (option: string): void => {
Expand Down Expand Up @@ -301,7 +317,6 @@ const Requests = (): JSX.Element => {
onChange={debouncedHandleSearchByName}
/>
<Button
data-testid="searchButton"
tabIndex={-1}
className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
>
Expand All @@ -317,11 +332,15 @@ const Requests = (): JSX.Element => {
data-testid="sort"
>
<Dropdown.Toggle
variant="outline-success"
data-testid="sortuser"
variant={sortingOption === '' ? 'outline-success' : 'success'}
data-testid="sortDropdown"
>
<SortIcon className={'me-1'} />
{t('sort')}
{sortingOption === ''
? t('sort')
: sortingOption === 'latest'
? t('Latest')
: t('Oldest')}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
Expand Down Expand Up @@ -370,7 +389,12 @@ const Requests = (): JSX.Element => {
<InfiniteScroll
dataLength={usersData?.users.length ?? 0}
next={loadMoreRequests}
loader={<TableLoader noOfCols={5} noOfRows={perPageResult} />}
loader={
<TableLoader
noOfCols={headerTitles.length}
noOfRows={perPageResult}
/>
}
hasMore={hasMore}
className={styles.listBox}
data-testid="organizations-list"
Expand All @@ -397,7 +421,7 @@ const Requests = (): JSX.Element => {
displayedUsers.length > 0 &&
displayedUsers.map((user, index) => {
return (
<tr key={user._id} data-testid="displayedUsers">
<tr key={user._id}>
<th scope="row">{index + 1}</th>
<td>{`${user.firstName} ${user.lastName}`}</td>
<td>{user.email}</td>
Expand All @@ -423,18 +447,14 @@ const Requests = (): JSX.Element => {
{t('reject')}
</Button>
</td>
<td>{dayjs(user.createdAt).fromNow()}</td>
</tr>
);
})}
</tbody>
</Table>
</InfiniteScroll>
)}
{!isLoading && displayedUsers.length === 0 && (
<div className="w-100 text-center my-4">
<h5 className="m-0 ">{t('noRequestFound')}</h5>
</div>
)}
</SuperAdminScreen>
</>
);
Expand Down

0 comments on commit af20ff6

Please sign in to comment.