test: add test cases for ui components HoverCard, InputOTP, Label, and Input
Issue Summary
Add comprehensive unit tests for core UI components to ensure stable rendering, proper user interactions, and reliable ref/prop forwarding in the project.
Problem Statement
Currently, core components like HoverCard, InputOTP, Label, and Input lack complete unit test coverage. This impacts:
Detecting regressions during development Ensuring consistent user interactions (hover, typing, OTP input) Validating custom class and prop forwarding Compatibility with jsdom environment (needed for Radix UI components)
Without tests, bugs in user input handling, component alignment, and ref forwarding may go unnoticed.
Proposed Solution
Write and integrate unit tests for the following components:
HoverCard: test rendering, hover triggers, controlled open state, sideOffset/align props, ref forwarding InputOTP: test OTP input flow, group/slot/separator components, ref forwarding Label: test render, default/custom variants, prop forwarding, ref forwarding Input: test rendering, type handling, user typing, native prop forwarding, ref forwarding
Mocks for ResizeObserver, PointerEvent, and pointer capture methods will be used to stabilize jsdom tests.
Test-Driven Development Acceptance Criteria (Given-When-Then)
Scenario 1: HoverCard opens on hover
Given HoverCard component is rendered When user hovers over HoverCardTrigger Then HoverCardContent should be visible
Scenario 2: InputOTP accepts valid input
Given InputOTP component is rendered When user types an OTP in all slots Then each slot should reflect the correct value
Scenario 3: Label forwards props correctly
Given Label component is rendered with custom props When props are applied Then native label element should receive all forwarded props
Scenario 4: Input handles typing and ref forwarding
Given Input component is rendered When user types a value Then input reflects typed value and ref is forwarded correctly
Unit Test Requirements
Components/Functions to Test:
| Module/Component | Function/Hook | Test Cases to Cover |
|---|---|---|
HoverCard |
HoverCardTrigger, HoverCardContent | Hover interactions, controlled open state, align/sideOffset props, ref forwarding |
InputOTP |
InputOTPGroup, InputOTPSlot, InputOTPSeparator | OTP input, custom classes, ref forwarding |
Label |
Label | Render, variant classes, prop forwarding, ref forwarding |
Input |
Input | Render, type prop, user typing, native prop forwarding, ref forwarding |
Test Assertions Required:
[x] Renders correctly [x] Handles user input correctly [x] Validates prop forwarding [x] Handles hover and OTP interactions [x] Ref forwarding works correctly [x] Compatible with jsdom environment
Implementation Details Files to Change
| File Path | Action | Purpose |
|---|---|---|
src/components/HoverCard/hover-card.test.tsx |
Create | Unit tests for HoverCard component |
src/components/InputOTP/input-otp.test.tsx |
Create | Unit tests for InputOTP component |
src/components/Label/label.test.tsx |
Create | Unit tests for Label component |
src/components/Input/input.test.tsx |
Create | Unit tests for Input component |
Definition of Done [x] Acceptance criteria met (Given-When-Then scenarios pass) [x] Unit tests written and passing [x] Manual testing completed [x] Code reviewed and approved [x] No console errors or warnings [x] ESLint/Prettier checks pass