test: add test cases for dropdown-menu.tsx, form.tsx and select.tsx

Issue Summary

Add comprehensive unit test cases for dropdown-menu.tsx, form.tsx, and select.tsx UI components to improve test coverage, ensure correct user interactions, and validate accessibility behavior.

Problem Statement

The UI components dropdown-menu.tsx, form.tsx, and select.tsx currently lack sufficient unit test coverage.

Issues:

❌ Dropdown and select interactions are not tested
❌ Form validation and submission flows are unverified
❌ Accessibility roles and keyboard interactions are missing
❌ Edge cases and conditional rendering are not covered

Impact:

Increased risk of UI regressions
Incorrect user interactions may go unnoticed
Reduced confidence during refactoring
Lower overall test coverage

Proposed Solution

Add unit tests using Jest + React Testing Library
Cover:
- Rendering and UI structure
- User interactions (click, select, input)
- Form validation and submission
- Dropdown and select option handling
- Accessibility behavior

Create test files:

src/__tests__/dropdown-menu.test.tsx
src/__tests__/form.test.tsx
src/__tests__/select.test.tsx

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Dropdown menu opens and displays items

Given the dropdown menu is rendered
When the user clicks the trigger
Then the menu should open
And menu items should be visible

Scenario 2: Dropdown item selection

Given the dropdown menu is open
When the user selects an item
Then the corresponding action should be triggered
And the menu should close

Scenario 3: Select component option selection

Given the select component is rendered
When the user opens the select dropdown
Then available options should be visible
When an option is selected
Then the selected value should be displayed

Scenario 4: Form validation errors

Given the form is submitted with invalid inputs
When validation occurs
Then error messages should be displayed

Scenario 5: Form submission success

Given valid form inputs
When the user submits the form
Then the submit handler should be called with correct data

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Dropdown render	Component loaded	Render component	Trigger visible	High
TC-002	Dropdown open	Closed state	Click trigger	Menu opens	High
TC-003	Dropdown item select	Menu open	Click item	Action triggered & menu closes	High
TC-004	Select render	Component loaded	Render component	Select visible	High
TC-005	Select option display	Select closed	Click trigger	Options visible	High
TC-006	Select option choose	Options visible	Select option	Value updates	High
TC-007	Form render	Component loaded	Render form	Inputs visible	High
TC-008	Form input handling	Form loaded	Enter values	Values update	High
TC-009	Form validation	Invalid input	Submit form	Errors shown	High
TC-010	Form submission	Valid input	Submit form	Handler called	High

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases to Cover
`dropdown-menu.tsx`	open/close, item select	TC-001, TC-002, TC-003
`select.tsx`	option selection, display	TC-004, TC-005, TC-006
`form.tsx`	input handling, validation, submit	TC-007 to TC-010

Test Assertions Required:

Renders correctly with initial state
Handles user interactions (click, select, input)
Validates input and displays errors
Calls submit handler with correct payload
Updates UI state appropriately
Accessibility roles verified (menu, listbox, form inputs)

Implementation Details

Files to Change

File Path	Action	Purpose
`src/components/ui/dropdown-menu.tsx`	Review	Ensure testability
`src/components/ui/select.tsx`	Review	Ensure selection logic testable
`src/components/ui/form.tsx`	Review	Ensure validation logic testable
`src/__tests__/dropdown-menu.test.tsx`	Create	Dropdown tests
`src/__tests__/select.test.tsx`	Create	Select tests
`src/__tests__/form.test.tsx`	Create	Form tests

Technical Considerations

Use screen.getByRole() for accessibility-focused testing
Prefer userEvent for realistic interactions
Mock external UI libraries if required
Avoid testing implementation details

UI/UX Requirements

Dropdown:
- Opens on click
- Displays menu items
- Closes on selection
Select:
- Displays options
- Updates selected value
Form:
- Accepts input
- Validates fields
- Shows errors
- Submits successfully

Testing Strategy

Manual Testing

Test Environment:

Browser: Chrome
Viewport: Desktop

Manual Test Steps:

Open dropdown → verify items
Select option → verify action
Open select → choose option
Fill form → submit → check validation

Automated Testing

Unit Tests:

Component render tests
Interaction tests
Validation tests
Error handling tests

Integration Tests:

Combined interaction tests (dropdown/select within form if applicable)

Test Data Requirements

const mockTestData = {
  name: "Test User",
  email: "[email protected]",
  option: "Option 1",
};