Skip to content

Commit

Permalink
Added the Filtering Functionality (PalisadoesFoundation#1281)
Browse files Browse the repository at this point in the history 
* Added tests for Advertisements.tsx

* Added tests for Advertisement.tsx

* Added Filtering Functionality

* fixed tests

* changed name of test
  • Loading branch information
@aarishshahmohsin
aarishshahmohsin authored Dec 27, 2023
1 parent dfe1dc9 commit f1c4e3e
Show file tree
Hide file tree
Showing 8 changed files with 324 additions and 20 deletions.
3 changes: 2 additions & 1 deletion public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,8 @@
"noOrgError": "Organizations not found, please create an organization through dashboard",
"roleUpdated": "Role Updated.",
"noResultsFoundFor": "No results found for ",
"talawaApiUnavailable": "Talawa-API service is unavailable. Is it running? Check your network connectivity too."
"talawaApiUnavailable": "Talawa-API service is unavailable. Is it running? Check your network connectivity too.",
"cancel": "Cancel"
},
"requests": {
"title": "Talawa Requests",
Expand Down
3 changes: 2 additions & 1 deletion public/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,8 @@
"filter": "Filtre",
"roleUpdated": "Rôle mis à jour.",
"noResultsFoundFor": "Aucun résultat trouvé pour ",
"talawaApiUnavailable": "Le service Talawa-API n'est pas disponible. Est-il en cours d'exécution ? Vérifiez également votre connectivité réseau."
"talawaApiUnavailable": "Le service Talawa-API n'est pas disponible. Est-il en cours d'exécution ? Vérifiez également votre connectivité réseau.",
"cancel": "Annuler"
},
"requests": {
"title": "Demandes Talawa",
Expand Down
3 changes: 2 additions & 1 deletion public/locales/hi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@
"filter": "फ़िल्टर",
"roleUpdated": "भूमिका अपडेट की गई।",
"noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला ",
"talawaApiUnavailable": "तलवा-एपीआई सेवा उपलब्ध नहीं है। क्या यह चल रहा है? अपनी नेटवर्क कनेक्टिविटी भी जांचें।"
"talawaApiUnavailable": "तलवा-एपीआई सेवा उपलब्ध नहीं है। क्या यह चल रहा है? अपनी नेटवर्क कनेक्टिविटी भी जांचें।",
"cancel": "रद्द करें"
},
"requests": {
"title": "तलवा अनुरोध",
Expand Down
3 changes: 2 additions & 1 deletion public/locales/sp.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@
"filter": "Filtrar",
"roleUpdated": "Rol actualizado.",
"noResultsFoundFor": "No se encontraron resultados para ",
"talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
"talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
"cancel": "Cancelar"
},
"requests": {
"title": "Solicitudes Talawa",
Expand Down
3 changes: 2 additions & 1 deletion public/locales/zh.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@
"filter": "過濾",
"roleUpdated": "角色已更新。",
"noResultsFoundFor": "未找到结果 ",
"talawaApiUnavailable": "服務不可用。它在運行嗎？還要檢查您的網絡連接。"
"talawaApiUnavailable": "服務不可用。它在運行嗎？還要檢查您的網絡連接。",
"cancel": "取消"
},
"requests": {
"title": "塔拉瓦請求",
Expand Down
111 changes: 107 additions & 4 deletions src/screens/Users/Users.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ import { store } from 'state/store';
import { StaticMockLink } from 'utils/StaticMockLink';
import i18nForTest from 'utils/i18nForTest';
import Users from './Users';
import { EMPTY_MOCKS, MOCKS } from './UsersMocks';
import { EMPTY_MOCKS, MOCKS, MOCKS2 } from './UsersMocks';

const link = new StaticMockLink(MOCKS, true);
const link2 = new StaticMockLink(EMPTY_MOCKS, true);
const link3 = new StaticMockLink(MOCKS2, true);

async function wait(ms = 100): Promise<void> {
await act(() => {
Expand Down Expand Up @@ -121,6 +122,27 @@ describe('Testing Users screen', () => {
userEvent.type(screen.getByTestId(/searchByName/i), '');
});

test('testing search not found', async () => {
render(
<MockedProvider addTypename={false} link={link2}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Users />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();

const search = 'hello{enter}';
await act(() =>
userEvent.type(screen.getByTestId(/searchByName/i), search)
);
});

test('Testing User data is not present', async () => {
render(
<MockedProvider addTypename={false} link={link2}>
Expand Down Expand Up @@ -179,7 +201,7 @@ describe('Testing Users screen', () => {
);
});

test('Testing sort Newest and oldest toggle', async () => {
test('Testing sorting functionality', async () => {
await act(async () => {
render(
<MockedProvider addTypename={false} link={link}>
Expand All @@ -202,15 +224,96 @@ describe('Testing Users screen', () => {
const inputText = screen.getByTestId('sortUsers');

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

expect(searchInput).toBeInTheDocument();

fireEvent.click(inputText);
const toggleTite = screen.getByTestId('newest');
fireEvent.click(toggleTite);

expect(searchInput).toBeInTheDocument();
});
});

test('Testing filter functionality', async () => {
await act(async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<ToastContainer />
<Users />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();

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

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

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

expect(searchInput).toBeInTheDocument();

fireEvent.click(inputText);
let toggleTite = screen.getByTestId('superAdmin');
fireEvent.click(toggleTite);

expect(searchInput).toBeInTheDocument();

fireEvent.click(inputText);
toggleTite = screen.getByTestId('user');
fireEvent.click(toggleTite);

expect(searchInput).toBeInTheDocument();

fireEvent.click(inputText);
const toggleTite = screen.getByTestId('oldest');
toggleTite = screen.getByTestId('cancel');
fireEvent.click(toggleTite);

await wait();

expect(searchInput).toBeInTheDocument();
});
});

test('check for rerendering', async () => {
const { rerender } = render(
<MockedProvider addTypename={false} link={link3}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<ToastContainer />
<Users />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();
rerender(
<MockedProvider addTypename={false} link={link3}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<ToastContainer />
<Users />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);
await wait();
});
});
86 changes: 75 additions & 11 deletions src/screens/Users/Users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const Users = (): JSX.Element => {
const [isLoadingMore, setIsLoadingMore] = useState(false);
const [searchByName, setSearchByName] = useState('');
const [sortingOption, setSortingOption] = useState('newest');

const [filteringOption, setFilteringOption] = useState('cancel');
const userType = localStorage.getItem('UserType');
const loggedInUserId = localStorage.getItem('id');

Expand Down Expand Up @@ -68,10 +68,11 @@ const Users = (): JSX.Element => {
setHasMore(false);
}
if (usersData && usersData.users) {
const newDisplayedUsers = sortUsers(usersData.users, sortingOption);
let newDisplayedUsers = sortUsers(usersData.users, sortingOption);
newDisplayedUsers = filterUsers(newDisplayedUsers, filteringOption);
setDisplayedUsers(newDisplayedUsers);
}
}, [usersData, sortingOption]);
}, [usersData, sortingOption, filteringOption]);

// To clear the search when the component is unmounted
useEffect(() => {
Expand Down Expand Up @@ -179,14 +180,44 @@ const Users = (): JSX.Element => {
(a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
);
} else if (sortingOption === 'oldest') {
return sortedUsers;
} else {
sortedUsers.sort(
(a, b) =>
new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
);
return sortedUsers;
}
};

return sortedUsers;
const handleFiltering = (option: string): void => {
setFilteringOption(option);
};

const filterUsers = (
allUsers: InterfaceQueryUserListItem[],
filteringOption: string
): InterfaceQueryUserListItem[] => {
const filteredUsers = [...allUsers];

if (filteringOption === 'cancel') {
return filteredUsers;
} else if (filteringOption === 'user') {
const output = filteredUsers.filter((user) => {
return user.userType === 'USER';
});
return output;
} else if (filteringOption === 'admin') {
const output = filteredUsers.filter((user) => {
return user.userType == 'ADMIN';
});
return output;
} else {
const output = filteredUsers.filter((user) => {
return user.userType == 'SUPERADMIN';
});
return output;
}
};

const headerTitles: string[] = [
Expand Down Expand Up @@ -222,6 +253,7 @@ const Users = (): JSX.Element => {
<Button
tabIndex={-1}
className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
data-testid="searchButton"
>
<Search />
</Button>
Expand Down Expand Up @@ -256,15 +288,44 @@ const Users = (): JSX.Element => {
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown aria-expanded="false" title="Filter organizations">
<Dropdown.Toggle variant="outline-success">
<Dropdown
aria-expanded="false"
title="Filter organizations"
data-testid="filter"
>
<Dropdown.Toggle
variant="outline-success"
data-testid="filterUsers"
>
<FilterListIcon className={'me-1'} />
{t('filter')}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
<Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
<Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
<Dropdown.Item
data-testid="admin"
onClick={(): void => handleFiltering('admin')}
>
{t('admin')}
</Dropdown.Item>
<Dropdown.Item
data-testid="superAdmin"
onClick={(): void => handleFiltering('superAdmin')}
>
{t('superAdmin')}
</Dropdown.Item>

<Dropdown.Item
data-testid="user"
onClick={(): void => handleFiltering('user')}
>
{t('user')}
</Dropdown.Item>
<Dropdown.Item
data-testid="cancel"
onClick={(): void => handleFiltering('cancel')}
>
{t('cancel')}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Expand Down Expand Up @@ -293,7 +354,10 @@ const Users = (): JSX.Element => {
/>
) : (
<InfiniteScroll
dataLength={displayedUsers.length ?? 0}
dataLength={
/* istanbul ignore next */
displayedUsers.length ?? 0
}
next={loadMoreUsers}
loader={
<TableLoader
Expand Down
Loading

0 comments on commit f1c4e3e

Please sign in to comment.