Skip to content

test: added test cases for dropdown menu, form, select

srilatha bandari requested to merge test/dropdown-menu-form into test_cases

Description:

This PR adds comprehensive unit test cases for the following UI components:

  • dropdown-menu.tsx (54 tests)
  • form.tsx (42 tests)
  • select.tsx (52 tests)

These tests ensure high coverage and validate rendering, user interactions, accessibility, callbacks, and edge cases for all components built using shadcn/ui (Radix UI + react-hook-form).

Dropdown Menu Tests (dropdown-menu.test.tsx)

  • Total: 54 tests

  • Covers:

    • Rendering of all dropdown components (Trigger, Content, Items, Submenus, Checkbox/Radio items, etc.)
    • User interactions (open/close, selection, keyboard navigation)
    • Conditional UI (disabled items, submenus, variants)
    • Callback validation (onOpenChange, onSelect, onCheckedChange)
    • Accessibility (ARIA roles like menu, menuitem, focus handling)
    • Edge cases (empty menu, rapid toggling, invalid props)
    • Async behavior (waiting for DOM updates)

Form Tests (form.test.tsx)

  • Total: 42 tests

  • Covers:

    • Rendering of all form components (Form, FormField, Label, Control, Message, etc.)
    • Form behavior (input updates, submission, reset)
    • Validation (required, min/max length, pattern, custom validation)
    • User interactions (typing, submitting, multiple fields)
    • Conditional UI (error messages, aria-invalid, disabled states)
    • Callback validation (onSubmit, value changes)
    • Accessibility (label linking, aria attributes)
    • Edge cases (missing props, rapid input, special characters)
    • Async handling (submission flow)

Select Tests (select.test.tsx)

  • Total: 52 tests

  • Covers:

    • Rendering of all select components (Trigger, Value, Items, Groups, Scroll buttons)
    • User interactions (open/close, option select, keyboard navigation)
    • Controlled vs uncontrolled behavior (value, defaultValue, onValueChange)
    • Conditional UI (disabled options, empty states)
    • Callback validation (onValueChange)
    • Accessibility (ARIA roles like combobox, listbox, option)
    • Edge cases (duplicate values, rapid interaction, null props)
    • Async behavior (dropdown open/close handling)
    • Icon rendering (Chevron, Check icons)

Coverage Summary

  • dropdown-menu.tsx → 100% coverage
  • form.tsx → ~97% coverage (one unreachable defensive line)
  • select.tsx → 100% coverage
  • Overall coverage: ~99%

Key Highlights

  • Tests use Jest + React Testing Library
  • Real component implementations are tested (not mocked)
  • Only external dependencies (Radix UI, react-hook-form, icons, utilities) are mocked
  • All sub-components are covered for each UI module
  • Focus on user behavior and accessibility, not internal implementation

Type of Change:

  • Bug Fix
  • Feature Development
  • Documentation

Testing:

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers

Screenshots (if applicable):

image

Checklist:

  • Code follows project style guidelines
  • Self-review completed
  • No console errors
  • TypeScript types are correct

closes #275 (closed)

Merge request reports