Skip to content

Commit

Permalink
added tests for Chipbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@thetif
thetif committed Jan 21, 2025
1 parent ac7a7a4 commit 0d04660
Show file tree
Hide file tree
Showing 7 changed files with 356 additions and 4 deletions.
1 change: 1 addition & 0 deletions mocks/handlers/api/user.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { TestUserData } from "../..";

// using `any` type here because the function that this is mocking uses any
export const mockCurrentAuthenticatedUser = (): TestUserData | any => {
console.log("username", process.env.MOCK_USER_USERNAME);
if (process.env.MOCK_USER_USERNAME) {
return findUserByUsername(process.env.MOCK_USER_USERNAME);
}
Expand Down
1 change: 1 addition & 0 deletions mocks/handlers/auth.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { TestUserData } from "../index.d";
import { CognitoUserAttributes } from "shared-types";

export const setMockUsername = (user?: TestUserData | string | null): void => {
console.log({ user });
if (user && typeof user === "string") {
process.env.MOCK_USER_USERNAME = user;
} else if (user && (user as TestUserData).Username !== undefined) {
Expand Down
1 change: 1 addition & 0 deletions react-app/src/api/useGetUser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export type OneMacUser = {
export const getUser = async (): Promise<OneMacUser> => {
try {
const currentAuthenticatedUser = await Auth.currentAuthenticatedUser();
console.log({ currentAuthenticatedUser });
if (!currentAuthenticatedUser) {
return { user: null } satisfies OneMacUser;
}
Expand Down
347 changes: 347 additions & 0 deletions react-app/src/components/Opensearch/main/Filtering/Chipbar/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,347 @@
import { describe, expect, it, vi, afterEach } from "vitest";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ChipBool, ChipDate, ChipTerms } from "./index";
import { render } from "@testing-library/react";

describe("FilterChips", () => {
const openDrawer = vi.fn();
const clearFilter = vi.fn();

afterEach(() => {
vi.clearAllMocks();
});

describe("ChipBool", () => {
it.each([
[true, "Yes"],
["yes", "Yes"],
[undefined, "No"],
[null, "No"],
["", "No"],
[false, "No"],
])("when value is '%s' it should display %s", (value, expected) => {
render(
<ChipBool
key="test-chip-bool"
index={1}
filter={{
label: "Test",
value,
type: "match",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
expect(screen.getByText("Test:").textContent).toEqual(`Test: ${expected}`);
});

it("should not show a label if no label is provided", () => {
render(
<ChipBool
key="test-chip-bool"
index={1}
filter={{
value: true,
type: "match",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
expect(screen.getByText("Yes").parentElement.textContent).toEqual("Yes");
});

it("should handle clicking the close icon", async () => {
const user = userEvent.setup();
render(
<ChipBool
key="test-chip-bool"
index={1}
filter={{
label: "Test",
value: true,
type: "match",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(screen.getByRole("button"));
expect(clearFilter).toHaveBeenCalledWith({
label: "Test",
value: true,
type: "match",
prefix: "must",
field: "authority.keyword",
});
});

it("should handle clicking the chip", async () => {
const user = userEvent.setup();
const { container } = render(
<ChipBool
key="test-chip-bool"
index={1}
filter={{
label: "Test",
value: true,
type: "match",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(container.firstChild as Element);
expect(openDrawer).toHaveBeenCalled();
});
});

describe("ChipDate", () => {
it.each([
[{ gte: "2024-01-01", lte: "2024-03-01" }, "1/1/2024 - 3/1/2024"],
[{ gte: "2024-01-01" }, "1/1/2024 - Invalid Date"],
[{ lte: "2024-03-01" }, "Invalid Date - 3/1/2024"],
])("when value is '%s' it should display %s", (value, expected) => {
render(
<ChipDate
key="test-chip-bool"
index={1}
filter={{
label: "Test",
value,
type: "range",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
expect(screen.getByText(`Test: ${expected}`)).toBeInTheDocument();
});

it("should not show a label if no label is provided", () => {
render(
<ChipDate
key="test-chip-bool"
index={1}
filter={{
value: { gte: "2024-01-01", lte: "2024-03-01" },
type: "range",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
expect(screen.getByText("1/1/2024 - 3/1/2024").parentElement.textContent).toEqual(
"1/1/2024 - 3/1/2024",
);
});

it("should handle clicking the close icon", async () => {
const user = userEvent.setup();
render(
<ChipDate
key="test-chip-bool"
index={1}
filter={{
label: "Test",
value: { gte: "2024-01-01", lte: "2024-03-01" },
type: "range",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(screen.getByRole("button"));
expect(clearFilter).toHaveBeenCalledWith({
label: "Test",
value: { gte: "2024-01-01", lte: "2024-03-01" },
type: "range",
prefix: "must",
field: "authority.keyword",
});
});

it("should handle clicking the chip", async () => {
const user = userEvent.setup();
const { container } = render(
<ChipDate
key="test-chip-bool"
index={1}
filter={{
label: "Test",
value: { gte: "2024-01-01", lte: "2024-03-01" },
type: "range",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(container.firstChild as Element);
expect(openDrawer).toHaveBeenCalled();
});
});

describe("ChipTerms", () => {
it.each([
[
"multiple terms with labels",
"Test",
["New", "MD"],
["Test: Initial", "Test: Maryland, MD"],
],
["multiple terms without labels", undefined, ["New", "MD"], ["Initial", "Maryland, MD"]],
["single term with labels", "Test", ["New"], ["Test: Initial"]],
["single term without labels", undefined, ["MD"], ["Maryland, MD"]],
])("should display %s", (_, label, value, expected) => {
render(
<ChipTerms
key="test-chip-bool"
index={1}
filter={{
label,
value,
type: "terms",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);

expected.forEach((val) => {
expect(screen.getByText(val)).toBeInTheDocument();
});
});

it("should return null if the value is not an array", () => {
const { container } = render(
<ChipTerms
key="test-chip-bool"
index={1}
filter={{
value: "New,MD",
type: "terms",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
expect(container.firstChild).toBeNull();
});

it("should return null if the value is an empty array", () => {
const { container } = render(
<ChipTerms
key="test-chip-bool"
index={1}
filter={{
value: [],
type: "terms",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
expect(container.firstChild).toBeNull();
});

it("should handle clicking the close icon", async () => {
const user = userEvent.setup();
render(
<ChipTerms
key="test-chip-bool"
index={1}
filter={{
value: ["New"],
type: "terms",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(screen.getByRole("button"));
expect(clearFilter).toHaveBeenCalledWith(
{
value: ["New"],
type: "terms",
prefix: "must",
field: "authority.keyword",
},
0,
);
});

it("should handle clicking the close icon on the second chip", async () => {
const user = userEvent.setup();
render(
<ChipTerms
key="test-chip-bool"
index={1}
filter={{
value: ["New", "MD"],
type: "terms",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(screen.getAllByRole("button")[1]);
expect(clearFilter).toHaveBeenCalledWith(
{
value: ["New", "MD"],
type: "terms",
prefix: "must",
field: "authority.keyword",
},
1,
);
});

it("should handle clicking the chip", async () => {
const user = userEvent.setup();
const { container } = render(
<ChipTerms
key="test-chip-bool"
index={1}
filter={{
value: ["MD"],
type: "terms",
prefix: "must",
field: "authority.keyword",
}}
openDrawer={openDrawer}
clearFilter={clearFilter}
/>,
);
await user.click(container.firstChild as Element);
expect(openDrawer).toHaveBeenCalled();
});
});
});
7 changes: 4 additions & 3 deletions react-app/src/components/Opensearch/main/Filtering/Chipbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,16 @@ export interface RenderProp {
}

export const ChipBool: FC<RenderProp> = ({ filter, openDrawer, clearFilter }) => {
const value = filter.value as opensearch.RangeValue;
const value = filter.value as opensearch.FilterValue;
return (
<Chip
onChipClick={openDrawer}
onIconClick={() => {
clearFilter(filter);
}}
>
{filter?.label}: <strong>{value ? "Yes" : "No"}</strong>
{filter?.label ? `${filter.label}: ` : ""}
<strong>{value ? "Yes" : "No"}</strong>
</Chip>
);
};
Expand All @@ -36,7 +37,7 @@ export const ChipDate: FC<RenderProp> = ({ filter, openDrawer, clearFilter }) =>
clearFilter(filter);
}}
>
{`${filter?.label}: ${offsetFromUtc(
{`${filter?.label ? `${filter.label}: ` : ""}${offsetFromUtc(
new Date(value.gte || ""),
).toLocaleDateString()} - ${offsetFromUtc(new Date(value.lte || "")).toLocaleDateString()}`}
</Chip>
Expand Down
Loading

0 comments on commit 0d04660

Please sign in to comment.