test: Add Unit Tests for RadioGroup, Popover, resizable and scroll-area Components
Issue Summary
Added unit tests for RadioGroup, Popover, Resizable, and ScrollArea components to ensure proper rendering, state handling, user interaction, and ref forwarding.
Problem Statement The RadioGroup, Popover, Resizable, and ScrollArea components lacked comprehensive unit tests. Missing tests could allow regressions in rendering, interaction, or controlled/uncontrolled state behavior. Users or developers may experience inconsistent behavior in form selection (RadioGroup), popover visibility/interactions (Popover), resizable panel behavior, or scroll-area functionality due to untested scenarios. Proposed Solution Implement unit tests covering all critical behaviors and edge cases for all four component groups. Update the test suite with mocks for required DOM APIs (ResizeObserver, PointerEvent) to ensure Radix UI components behave correctly in the test environment. Test ref forwarding, custom class application, and prop handling for alignment, sideOffset, default/controlled states, panel sizes, and scrollbar orientation. Test-Driven Development Acceptance Criteria (Given-When-Then)
Scenario 1: RadioGroup renders and handles selection
Given a RadioGroup with multiple RadioGroupItem components When the user selects an item Then the selected item state updates And previously selected item is deselected
Scenario 2: Popover opens and closes on trigger click
Given a Popover with a PopoverTrigger and PopoverContent When the user clicks the trigger Then the content becomes visible And clicking again hides the content
Scenario 3: ScrollArea renders and applies custom classes
Given a ScrollArea with child content When the component is rendered Then the ScrollArea and children are visible And custom class names are applied
Scenario 4: ResizablePanelGroup and Panels render correctly
Given a ResizablePanelGroup with multiple ResizablePanels and Handles When rendered horizontally or vertically Then the panels and handles render And default sizes and orientation attributes are correct
Test Cases
| Test ID | Test Description | Precondition | Test Steps | Expected Result | Priority |
|---|---|---|---|---|---|
| TC-001 | RadioGroup renders with default selection | RadioGroup with defaultValue | 1. Render component 2. Check selected value |
Default item is selected | High |
| TC-002 | RadioGroup updates selection on click | RadioGroup rendered | 1. Click another item 2. Check state |
Newly clicked item selected, previous deselected | High |
| TC-003 | Popover toggles visibility on trigger click | Popover rendered | 1. Click trigger 2. Click trigger again |
Content shown then hidden | High |
| TC-004 | Components accept custom class names | Components rendered with className prop | 1. Render component 2. Inspect DOM |
Custom class applied | Medium |
| TC-005 | Ref forwarding works | Component rendered with ref | 1. Attach ref 2. Check ref.current |
Ref points to underlying DOM element | Medium |
| TC-006 | ScrollArea renders with children | ScrollArea rendered | 1. Render ScrollArea with content 2. Inspect DOM |
Content visible and ScrollArea classes applied | High |
| TC-007 | ScrollBar renders horizontal and vertical | ScrollArea with ScrollBar | 1. Render ScrollBar 2. Inspect orientation and classes |
Correct orientation and classes applied | High |
| TC-008 | ResizablePanelGroup and Panels render | PanelGroup with Panels | 1. Render PanelGroup horizontally/vertically 2. Inspect panels and handles |
Panels visible with correct default sizes | High |
| TC-009 | ResizableHandle renders and applies props | Handle within PanelGroup | 1. Render Handle with/without icon 2. Inspect DOM |
Handle visible, attributes/classes correct | Medium |
Unit Test Requirements
Components/Functions to Test:
| Module/Component | Function/Hook | Test Cases to Cover |
|---|---|---|
RadioGroup.tsx |
Rendering, selection | TC-001, TC-002, TC-004, TC-005 |
RadioGroupItem |
Checked/unchecked handling | TC-001, TC-002 |
Popover.tsx |
Rendering, open/close | TC-003, TC-004, TC-005 |
PopoverTrigger |
Trigger click | TC-003 |
PopoverContent |
Content visibility | TC-003, TC-005 |
ScrollArea.tsx |
Rendering, class handling | TC-006, TC-007 |
ScrollBar.tsx |
Orientation, class handling | TC-007 |
ResizablePanelGroup.tsx |
Layout, orientation | TC-008 |
ResizablePanel.tsx |
Panel rendering, size | TC-008 |
ResizableHandle.tsx |
Handle rendering, icon | TC-009 |
Test Assertions Required:
[x] Renders correctly with initial state [x] Handles user input correctly [x] Updates checked/selected state [x] Handles controlled/uncontrolled state [x] Applies custom class names [x] Renders mocked indicator (RadioGroup) [x] Opens/closes popover on trigger click [x] Forwards refs properly
Implementation Details Files to Change
| File Path | Action | Purpose |
|---|---|---|
src/__tests__/radio-group.test.tsx |
Create | Unit tests for RadioGroup & RadioGroupItem |
src/__tests__/popover.test.tsx |
Create | Unit tests for Popover, PopoverTrigger, PopoverContent |
src/__tests__/scroll-area.test.tsx |
Create | Unit tests for ScrollArea & ScrollBar |
src/__tests__/resizable.test.tsx |
Create | Unit tests for ResizablePanelGroup, Panels, Handles |
Technical Considerations Radix UI components require mocks for ResizeObserver, PointerEvent, and pointer capture in jsdom. Controlled vs uncontrolled states must be tested. Ref forwarding, custom class names, orientation, panel sizes, and icons need verification. Testing Strategy Manual Testing
Test Environment:
Browser: Chrome, Firefox Viewport: Desktop User Role: Developer/QA
Manual Test Steps:
Render RadioGroup and Popover in test environment. Manually click items/triggers to verify behavior. Check DOM for correct classes, selected states, and visibility. Automated Testing
Unit Tests: [x] Component render tests [x] User interaction tests [x] Ref forwarding tests [x] Controlled/uncontrolled state tests
Definition of Done [x] Acceptance criteria met [x] All test cases passing [x] Unit tests written and verified [x] Ref forwarding tested [x] Custom classes applied correctly [x] No console warnings/errors [x] Documentation updated (test coverage summary)
Additional Context Related Issues Blocks: None Blocked by: None Related to: UI component testing initiative References Radix UI documentation React Testing Library documentation