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);
});