test(input): input interaction tests #4579
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces enhancements to the Changes
Sequence DiagramsequenceDiagram
participant User
participant InputComponent
participant TestEnvironment
User->>InputComponent: Type characters
InputComponent-->>TestEnvironment: Capture keyboard input
User->>InputComponent: Multi-click to highlight
InputComponent-->>TestEnvironment: Verify text selection
User->>InputComponent: Click on input/wrapper
InputComponent-->>TestEnvironment: Verify focus state
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
| @@ -138,8 +216,6 @@ describe("Input", () => { | |||
|
|
|||
| ref.current!.value = value; | |||
|
|
|||
| container.querySelector("input")?.focus(); | |||
There was a problem hiding this comment.
This test is a little dubious since it only passed because the state change caused by .focus() didn't happen until after the test finished as it wasn't wrapped by act. Any interaction with the input will reset input.value.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
packages/components/input/__tests__/input.test.tsx (5)
140-142: Replaceact(focus())withuser.click().For consistency and better simulation of real user behavior, use
user.click()instead of directly callingfocus().-act(() => { - input.focus(); -}); +await user.click(input);
133-153: Consider adding more keyboard interaction tests.The test could be more comprehensive by including:
- Copy/paste operations
- Selection with Shift+Arrow keys
- Home/End key navigation
155-172: Add double-click text selection test.The comment mentions that double-click selects the word, but this behavior isn't tested. Consider adding a test case for double-click word selection.
// in react testing library, input dblClick selects the word/symbol, tripleClick selects the entire text +await user.dblClick(input); +expect(window.getSelection()?.toString()).toBe("Hello"); // Assumes cursor is at start +await user.keyboard("Hi"); +expect(input.value).toBe("Hi World!"); await user.tripleClick(input);
178-179: Use getByTestId instead of querySelector.For more reliable and maintainable tests, prefer
getByTestIdoverquerySelectorwhen selecting elements.-const innerWrapper = document.querySelector("[data-slot='inner-wrapper']") as HTMLDivElement; -const inputWrapper = document.querySelector("[data-slot='input-wrapper']") as HTMLDivElement; +const innerWrapper = getByTestId("inner-wrapper") as HTMLDivElement; +const inputWrapper = getByTestId("input-wrapper") as HTMLDivElement;
187-205: Reduce code duplication in blur verification.Extract the repeated blur verification pattern into a helper function to improve maintainability.
+const verifyBlur = (input: HTMLInputElement) => { + act(() => { + input.blur(); + }); + expect(document.activeElement).not.toBe(input); +}; await user.click(input); expect(document.activeElement).toBe(input); -act(() => { - input.blur(); -}); -expect(document.activeElement).not.toBe(input); +verifyBlur(input); await user.click(innerWrapper); expect(document.activeElement).toBe(input); -act(() => { - input.blur(); -}); -expect(document.activeElement).not.toBe(input); +verifyBlur(input);
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/components/input/__tests__/input.test.tsx(1 hunks)
🔇 Additional comments (2)
packages/components/input/__tests__/input.test.tsx (2)
123-128: LGTM! Proper use ofactfor focus management.The changes correctly wrap focus/blur operations with
act, ensuring that all state updates are processed before assertions.
210-210: LGTM! Good cleanup.Removing the unnecessary container query simplifies the test without affecting its effectiveness.
Closes #
📝 Description
⛳️ Current behavior (updates)
no changes
🚀 New behavior
no changes
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
Summary by CodeRabbit
actfunction for event handling