diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts index 14144965..2ac7534f 100644 --- a/tests/ComboBox/ComboBox.test.ts +++ b/tests/ComboBox/ComboBox.test.ts @@ -141,12 +141,24 @@ describe("ComboBox", () => { await user.type(input, "a"); await user.click(screen.getAllByRole("option")[1]); expect(input).toHaveValue("Email"); - + await user.click(document.body); expect(input).not.toHaveFocus(); expect(screen.queryByRole("option")).not.toBeInTheDocument(); }); + it("should clear input when clicking clear button", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(ComboBox, { props: { selectedId: "1" } }); + + expect(consoleLog).not.toBeCalled(); + const clearButton = screen.getByRole("button", { name: /clear/i }); + await user.click(clearButton); + + expect(screen.getByRole("textbox")).toHaveValue(""); + expect(consoleLog).toHaveBeenCalledWith("clear", "clear"); + }); + it("should handle disabled items", async () => { render(ComboBoxCustom); @@ -184,9 +196,26 @@ describe("ComboBox", () => { it("should programmatically clear selection", async () => { render(ComboBoxCustom, { props: { selectedId: "1" } }); - expect(screen.getByRole("textbox")).toHaveValue("Email"); + const textbox = screen.getByRole("textbox"); + expect(textbox).toHaveValue("Email"); await user.click(screen.getByText("Clear")); - expect(screen.getByRole("textbox")).toHaveValue(""); + expect(textbox).toHaveValue(""); + expect(textbox).toHaveFocus(); + }); + + it("should not re-focus textbox if clearOptions.focus is false", async () => { + render(ComboBoxCustom, { + props: { + selectedId: "1", + clearOptions: { focus: false }, + }, + }); + + const textbox = screen.getByRole("textbox"); + expect(textbox).toHaveValue("Email"); + await user.click(screen.getByText("Clear")); + expect(textbox).toHaveValue(""); + expect(textbox).not.toHaveFocus(); }); it("should close menu on Escape key", async () => { diff --git a/tests/ComboBox/ComboBoxCustom.test.svelte b/tests/ComboBox/ComboBoxCustom.test.svelte index 221aa005..85fe7f06 100644 --- a/tests/ComboBox/ComboBoxCustom.test.svelte +++ b/tests/ComboBox/ComboBoxCustom.test.svelte @@ -11,6 +11,7 @@ ]; export let selectedId: string | undefined = undefined; export let direction: "top" | "bottom" = "bottom"; + export let clearOptions: { focus?: boolean } = {}; export let shouldFilterItem = (item: ComboBoxItem, value: string) => item.text.toLowerCase().includes(value.toLowerCase()); export let itemToString = (item: ComboBoxItem) => item.text; @@ -33,4 +34,6 @@ Item {item.text} - +