File size: 2,766 Bytes
fd2c364 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SettingsDropdownInput } from "#/components/features/settings/settings-dropdown-input";
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}));
const items = [
{ key: "english", label: "English" },
{ key: "spanish", label: "Spanish" },
{ key: "german", label: "German" },
];
describe("SettingsDropdownInput", () => {
it("shows the default selection and emits selection changes", async () => {
const user = userEvent.setup();
const onSelectionChange = vi.fn();
render(
<SettingsDropdownInput
defaultSelectedKey="english"
items={items}
label="Language"
name="language"
onSelectionChange={onSelectionChange}
testId="language-input"
/>,
);
const input = screen.getByLabelText("Language");
expect(input).toHaveValue("English");
await user.click(input);
await user.click(await screen.findByText("Spanish"));
expect(onSelectionChange).toHaveBeenCalledWith("spanish");
});
it("filters options while typing", async () => {
const user = userEvent.setup();
render(
<SettingsDropdownInput
defaultSelectedKey="english"
items={items}
label="Language"
name="language"
testId="language-input"
/>,
);
const input = screen.getByLabelText("Language");
await user.click(input);
await user.clear(input);
await user.keyboard("Germ");
expect(await screen.findByText("German")).toBeInTheDocument();
expect(screen.queryByText("English")).not.toBeInTheDocument();
expect(screen.queryByText("Spanish")).not.toBeInTheDocument();
});
it("clears the selection when the clear button is pressed", async () => {
const user = userEvent.setup();
const onSelectionChange = vi.fn();
const onInputChange = vi.fn();
render(
<SettingsDropdownInput
defaultSelectedKey="english"
isClearable
items={items}
label="Language"
name="language"
onInputChange={onInputChange}
onSelectionChange={onSelectionChange}
testId="language-input"
/>,
);
const clearButton = screen
.getAllByRole("button")
.find((button) => button.getAttribute("aria-label") !== "Show suggestions");
if (!clearButton) {
throw new Error("Clear button not found");
}
await user.click(clearButton);
expect(screen.getByLabelText("Language")).toHaveValue("");
expect(onSelectionChange).toHaveBeenCalledWith(null);
expect(onInputChange).toHaveBeenCalledWith("");
});
});
|