test(input): input interaction tests (#4579)

* test(input): user interaction tests

* test(input): missing act wrappers

---------

Co-authored-by: WK Wong <[email protected]>

Author: Peterl561

packages/components/input/__tests__/input.test.tsx

@@ -120,16 +120,94 @@ describe("Input", () => {
 
     const {container} = render(<Input label="test input" onFocus={onFocus} />);
 
-    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(<Input data-testid="input" />);
+
+    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(<Input data-testid="input" defaultValue="Hello World!" />);
+
+    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(<Input data-testid="input" />);
+
+    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<HTMLInputElement>();
 
-    const {container} = render(<Input ref={ref} type="text" />);
+    render(<Input ref={ref} type="text" />);
 
     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);
   });