diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index 0f5fd3c4d3..55a0db76b6 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -120,16 +120,94 @@ describe("Input", () => { const {container} = render(); - container.querySelector("input")?.focus(); - container.querySelector("input")?.blur(); + act(() => { + container.querySelector("input")?.focus(); + }); + act(() => { + container.querySelector("input")?.blur(); + }); expect(onFocus).toHaveBeenCalledTimes(1); }); + it("should work with keyboard input", async () => { + const {getByTestId} = render(); + + const input = getByTestId("input") as HTMLInputElement; + + const user = userEvent.setup(); + + act(() => { + input.focus(); + }); + expect(input.value).toBe(""); + + await user.keyboard("Hello World!"); + expect(input.value).toBe("Hello World!"); + + await user.keyboard("[Backspace][Backspace]"); + expect(input.value).toBe("Hello Worl"); + + await user.keyboard("[ArrowLeft][Delete]"); + expect(input.value).toBe("Hello Wor"); + }); + + it("should highlight text with user multi-clicks", async () => { + const {getByTestId} = render(); + + const input = getByTestId("input") as HTMLInputElement; + + const user = userEvent.setup(); + + expect(input.value).toBe("Hello World!"); + + // in react testing library, input dblClick selects the word/symbol, tripleClick selects the entire text + await user.tripleClick(input); + await user.keyboard("Goodbye World!"); + expect(input.value).toBe("Goodbye World!"); + + await user.tripleClick(input); + await user.keyboard("[Delete]"); + expect(input.value).toBe(""); + }); + + it("should focus input on click", async () => { + const {getByTestId} = render(); + + const input = getByTestId("input") as HTMLInputElement; + const innerWrapper = document.querySelector("[data-slot='inner-wrapper']") as HTMLDivElement; + const inputWrapper = document.querySelector("[data-slot='input-wrapper']") as HTMLDivElement; + + const user = userEvent.setup(); + + expect(document.activeElement).not.toBe(input); + + await user.click(input); + expect(document.activeElement).toBe(input); + act(() => { + input.blur(); + }); + expect(document.activeElement).not.toBe(input); + + await user.click(innerWrapper); + expect(document.activeElement).toBe(input); + act(() => { + input.blur(); + }); + expect(document.activeElement).not.toBe(input); + + await user.click(inputWrapper); + expect(document.activeElement).toBe(input); + act(() => { + input.blur(); + }); + expect(document.activeElement).not.toBe(input); + }); + it("ref should update the value", () => { const ref = React.createRef(); - const {container} = render(); + render(); if (!ref.current) { throw new Error("ref is null"); @@ -138,8 +216,6 @@ describe("Input", () => { ref.current!.value = value; - container.querySelector("input")?.focus(); - expect(ref.current?.value)?.toBe(value); });