Skip to content

test : Added comprehensive unit test coverage for UI components (Skeleton, Slider, Sonner, Switch) with 100% Coverage

Prashanth requested to merge test/contribution6 into test_cases

Description

This MR adds comprehensive unit test coverage for four critical UI components in the src/components/ui directory.

Components Covered

  • Skeleton Component (tests/src/components/ui/skeleton.test.tsx) – 18 test cases
  • Slider Component (tests/src/components/ui/slider.test.tsx) – 32 test cases
  • Sonner Toaster Component (tests/src/components/ui/sonner.test.tsx) – 29 test cases
  • Switch Component (tests/src/components/ui/switch.test.tsx) – 34 test cases

Total: 113 test cases with 100% code coverage across all four components.

Test Coverage Scope

Each test suite covers:

  • Rendering with default and custom props
  • CSS class application and merging
  • Event handlers and user interactions
  • Accessibility attributes (ARIA)
  • Ref forwarding
  • Edge cases and boundary conditions
  • Disabled states
  • Keyboard navigation support

Additional Configuration Changes

  • tests/setup.ts

    • Added polyfills for ResizeObserver, matchMedia, and Pointer Events (required for Radix UI components in jsdom)

  • tsconfig.tests.json

    • Created test-specific TypeScript configuration with proper path aliases

  • vitest.config.ts

    • Added path alias resolution for @ imports

Type of Change

  • Bug Fix
  • Feature Development (Test Coverage)
  • Documentation

Testing

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers (via jsdom)

Test Results

Test Files: 4 passed (4) Tests: 113 passed (113)

Coverage Report

File % Statements % Branch % Functions % Lines
skeleton.tsx 100% 100% 100% 100%
slider.tsx 100% 100% 100% 100%
sonner.tsx 100% 100% 100% 100%
switch.tsx 100% 100% 100% 100%

Screenshot:

Screenshot_from_2026-03-28_16-28-38

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • No console errors
  • TypeScript types are correct
  • ESLint checks pass (0 errors)
  • Prettier formatting applied
  • All tests passing (113/113)
  • 100% test coverage achieved for targeted components
  • No source code modifications (tests only)

Test Coverage Details

Skeleton Component (18 tests)

Category Tests
Rendering 3
HTML Attributes 4
Children Content 5
Accessibility 2
Edge Cases 4

Slider Component (32 tests)

Category Tests
Rendering 3
Value Props 5
Disabled State 2
Orientation 2
Event Handlers 3
Ref Forwarding 2
Track and Range 2
Thumb 3
Accessibility 4
Edge Cases 6

Sonner Toaster Component (29 tests)

Category Tests
Rendering 6
Toast Options 5
Props Forwarding 5
Theme Handling 2
Toast Export 8
Edge Cases 3

Switch Component (34 tests)

Category Tests
Rendering 3
Checked State 5
Thumb Element 2
Disabled State 4
Event Handlers 4
Ref Forwarding 3
Accessibility 6
Edge Cases 7

Commands to Verify

Run all tests with coverage

npm run test:coverage

Run linting

npm run lint

Run formatting check

npm run format:check

Run type checking

npm run type-check

Run all CI checks locally

npm run ci-local

Closes #278 (closed)

Merge request reports