diff --git a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx index 3404a591b..a2a4b9e36 100644 --- a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx +++ b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx @@ -47,4 +47,102 @@ describe("AdminMemberView", () => { expect(await queryByText("sausage")).toBeNull() }) }) + it("Filters the data properly by account type", async () => { + const { getByText, queryByText } = render( + + ) + + const roleFilterButton = getByText("all") + + // Cycle through filters + fireEvent.click(roleFilterButton) // admin + await waitFor(() => { + expect(queryByText("John")).toBeVisible() + expect(queryByText("sausage")).toBeVisible() + expect(queryByText("Dog")).toBeNull() + expect(queryByText("cat")).toBeNull() + expect(queryByText("fish")).toBeNull() + }) + + fireEvent.click(roleFilterButton) // member + await waitFor(() => { + expect(queryByText("John")).toBeNull() + expect(queryByText("sausage")).toBeNull() + expect(queryByText("Dog")).toBeVisible() + expect(queryByText("cat")).toBeNull() + expect(queryByText("fish")).toBeVisible() + }) + + fireEvent.click(roleFilterButton) // guest + await waitFor(() => { + expect(queryByText("John")).toBeNull() + expect(queryByText("sausage")).toBeNull() + expect(queryByText("Dog")).toBeNull() + expect(queryByText("cat")).toBeVisible() + expect(queryByText("fish")).toBeNull() + }) + + fireEvent.click(roleFilterButton) // all + await waitFor(() => { + expect(queryByText("John")).toBeVisible() + expect(queryByText("sausage")).toBeVisible() + expect(queryByText("Dog")).toBeVisible() + expect(queryByText("cat")).toBeVisible() + expect(queryByText("fish")).toBeVisible() + }) + }) + + it("Filters the data by both search query and account type", async () => { + const { getByText, getByTestId, queryByText } = render( + + ) + + const input = getByTestId("search-input") + const roleFilterButton = getByText("all") + + fireEvent.change(input, { target: { value: "key" } }) + + fireEvent.click(roleFilterButton) // admin + await waitFor(() => { + expect(queryByText("John")).toBeVisible() + expect(queryByText("sausage")).toBeVisible() + expect(queryByText("Dog")).toBeNull() + expect(queryByText("cat")).toBeNull() + expect(queryByText("fish")).toBeNull() + }) + + fireEvent.click(roleFilterButton) // member + await waitFor(() => { + expect(queryByText("John")).toBeNull() + expect(queryByText("sausage")).toBeNull() + expect(queryByText("Dog")).toBeVisible() + expect(queryByText("cat")).toBeNull() + expect(queryByText("fish")).toBeVisible() + }) + + fireEvent.click(roleFilterButton) // guest + await waitFor(() => { + expect(queryByText("John")).toBeNull() + expect(queryByText("sausage")).toBeNull() + expect(queryByText("Dog")).toBeNull() + expect(queryByText("cat")).toBeVisible() + expect(queryByText("fish")).toBeNull() + }) + }) }) diff --git a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx index c42046cd6..e498e7f5f 100644 --- a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx +++ b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx @@ -139,16 +139,22 @@ export const AdminMemberView = ({ const dataFilter = useCallback( (oldData: MemberColumnFormat[]) => { - return isValidSearchQuery || shouldFilterByAccount - ? oldData.filter( - (item) => - (isValidSearchQuery && - (item.Email?.toLowerCase().includes(currentSearchQuery) || - item.Name?.toLowerCase().includes(currentSearchQuery))) || - (shouldFilterByAccount && - filteredAccountType === item.Status?.toLowerCase()) - ) - : oldData + return oldData.filter((item) => { + const matchesSearchQuery = + isValidSearchQuery && + (item.Email?.toLowerCase().includes(currentSearchQuery) || + item.Name?.toLowerCase().includes(currentSearchQuery)) + + const matchesAccountType = + shouldFilterByAccount && + filteredAccountType === item.Status?.toLowerCase() + + // It is true if either filter matches or both + return ( + (matchesSearchQuery || !isValidSearchQuery) && + (matchesAccountType || !shouldFilterByAccount) + ) + }) }, [ isValidSearchQuery,