archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* test(input): user interaction tests

* test(input): missing act wrappers

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Peterl561 2025-02-06 05:09:01 +08:00 committed by GitHub
parent 475b2ff862
commit e77de2b650
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 81 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
packages/components/input/__tests__/input.test.tsx
View File

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