@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/__tests__/slider.test.tsx

@@ -0,0 +1,493 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Slider } from '../slider'
+
+describe('Slider Component', () => {
+  describe('Basic Rendering', () => {
+    it('renders correctly with default props', () => {
+      render(<Slider data-testid="slider" />)
+      
+      const slider = screen.getByTestId('slider')
+      expect(slider).toBeInTheDocument()
+      expect(slider).toHaveClass('w-full')
+    })
+
+    it('applies custom className', () => {
+      render(<Slider className="custom-slider" data-testid="slider" />)
+      
+      const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
+      expect(sliderContainer).toHaveClass('custom-slider')
+    })
+
+    it('renders with default value', () => {
+      render(<Slider defaultValue={[25]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuenow', '25')
+    })
+
+    it('renders with controlled value', () => {
+      render(<Slider value={[50]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuenow', '50')
+    })
+  })
+
+  describe('Size Variants', () => {
+    it('renders sm size correctly', () => {
+      render(<Slider size="sm" data-testid="slider" />)
+      
+      const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
+      expect(sliderContainer).toHaveClass('h-5')
+    })
+
+    it('renders default size correctly', () => {
+      render(<Slider size="default" data-testid="slider" />)
+      
+      const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
+      expect(sliderContainer).toHaveClass('h-6')
+    })
+
+    it('renders md size correctly', () => {
+      render(<Slider size="md" data-testid="slider" />)
+      
+      const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
+      expect(sliderContainer).toHaveClass('h-8')
+    })
+
+    it('renders lg size correctly', () => {
+      render(<Slider size="lg" data-testid="slider" />)
+      
+      const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
+      expect(sliderContainer).toHaveClass('h-10')
+    })
+  })
+
+  describe('Track Variants', () => {
+    it('renders default track variant correctly', () => {
+      render(<Slider trackVariant="default" data-testid="slider" />)
+      
+      const track = screen.getByTestId('slider').querySelector('.bg-muted')
+      expect(track).toBeInTheDocument()
+    })
+
+    it('renders primary track variant correctly', () => {
+      render(<Slider trackVariant="primary" data-testid="slider" />)
+      
+      const track = screen.getByTestId('slider').querySelector('.bg-primary\\/20')
+      expect(track).toBeInTheDocument()
+    })
+
+    it('renders secondary track variant correctly', () => {
+      render(<Slider trackVariant="secondary" data-testid="slider" />)
+      
+      const track = screen.getByTestId('slider').querySelector('.bg-secondary\\/20')
+      expect(track).toBeInTheDocument()
+    })
+
+    it('renders success track variant correctly', () => {
+      render(<Slider trackVariant="success" data-testid="slider" />)
+      
+      const track = screen.getByTestId('slider').querySelector('.bg-success\\/20')
+      expect(track).toBeInTheDocument()
+    })
+
+    it('renders error track variant correctly', () => {
+      render(<Slider trackVariant="error" data-testid="slider" />)
+      
+      const track = screen.getByTestId('slider').querySelector('.bg-error\\/20')
+      expect(track).toBeInTheDocument()
+    })
+  })
+
+  describe('Range Variants', () => {
+    it('renders default range variant correctly', () => {
+      render(<Slider rangeVariant="default" data-testid="slider" />)
+      
+      const range = screen.getByTestId('slider').querySelector('.bg-foreground')
+      expect(range).toBeInTheDocument()
+    })
+
+    it('renders primary range variant correctly', () => {
+      render(<Slider rangeVariant="primary" data-testid="slider" />)
+      
+      const range = screen.getByTestId('slider').querySelector('.bg-primary')
+      expect(range).toBeInTheDocument()
+    })
+
+    it('renders success range variant correctly', () => {
+      render(<Slider rangeVariant="success" data-testid="slider" />)
+      
+      const range = screen.getByTestId('slider').querySelector('.bg-success')
+      expect(range).toBeInTheDocument()
+    })
+
+    it('renders error range variant correctly', () => {
+      render(<Slider rangeVariant="error" data-testid="slider" />)
+      
+      const range = screen.getByTestId('slider').querySelector('.bg-error')
+      expect(range).toBeInTheDocument()
+    })
+  })
+
+  describe('Thumb Variants', () => {
+    it('renders default thumb variant correctly', () => {
+      render(<Slider thumbVariant="default" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('border-foreground')
+    })
+
+    it('renders primary thumb variant correctly', () => {
+      render(<Slider thumbVariant="primary" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('border-primary')
+    })
+
+    it('renders success thumb variant correctly', () => {
+      render(<Slider thumbVariant="success" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('border-success')
+    })
+
+    it('renders error thumb variant correctly', () => {
+      render(<Slider thumbVariant="error" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('border-error')
+    })
+  })
+
+  describe('Thumb Sizes', () => {
+    it('renders sm thumb size correctly', () => {
+      render(<Slider thumbSize="sm" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('h-3', 'w-3')
+    })
+
+    it('renders default thumb size correctly', () => {
+      render(<Slider thumbSize="default" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('h-4', 'w-4')
+    })
+
+    it('renders md thumb size correctly', () => {
+      render(<Slider thumbSize="md" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('h-5', 'w-5')
+    })
+
+    it('renders lg thumb size correctly', () => {
+      render(<Slider thumbSize="lg" data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('h-6', 'w-6')
+    })
+  })
+
+  describe('Value Label', () => {
+    it('does not show value label by default', () => {
+      render(<Slider defaultValue={[25]} data-testid="slider" />)
+      
+      expect(screen.queryByText('25')).not.toBeInTheDocument()
+    })
+
+    it('shows value label when enabled', () => {
+      render(<Slider defaultValue={[25]} showValueLabel data-testid="slider" />)
+      
+      expect(screen.getByText('25')).toBeInTheDocument()
+    })
+
+    it('applies custom value label className', () => {
+      render(
+        <Slider 
+          defaultValue={[25]} 
+          showValueLabel 
+          valueLabelClassName="custom-label"
+          data-testid="slider" 
+        />
+      )
+      
+      const label = screen.getByText('25').parentElement
+      expect(label).toHaveClass('custom-label')
+    })
+
+    it('formats value label with custom formatter', () => {
+      const formatter = (value: number) => `${value}%`
+      render(
+        <Slider 
+          defaultValue={[25]} 
+          showValueLabel 
+          valueLabelFormat={formatter}
+          data-testid="slider" 
+        />
+      )
+      
+      expect(screen.getByText('25%')).toBeInTheDocument()
+    })
+
+    it('shows range for multiple values', () => {
+      render(
+        <Slider 
+          defaultValue={[25, 75]} 
+          showValueLabel 
+          data-testid="slider" 
+        />
+      )
+      
+      expect(screen.getByText('25 - 75')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props and Configuration', () => {
+    it('handles min and max values', () => {
+      render(<Slider min={10} max={90} defaultValue={[50]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuemin', '10')
+      expect(thumb).toHaveAttribute('aria-valuemax', '90')
+      expect(thumb).toHaveAttribute('aria-valuenow', '50')
+    })
+
+    it('handles step value', () => {
+      render(<Slider step={5} defaultValue={[25]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuenow', '25')
+    })
+
+    it('handles multiple thumbs', () => {
+      render(<Slider defaultValue={[25, 75]} data-testid="slider" />)
+      
+      const thumbs = screen.getAllByRole('slider')
+      expect(thumbs).toHaveLength(2)
+      expect(thumbs[0]).toHaveAttribute('aria-valuenow', '25')
+      expect(thumbs[1]).toHaveAttribute('aria-valuenow', '75')
+    })
+  })
+
+  describe('Disabled State', () => {
+    it('renders disabled state correctly', () => {
+      render(<Slider disabled data-testid="slider" />)
+      
+      const sliderContainer = screen.getByTestId('slider').querySelector('[data-disabled]')
+      expect(sliderContainer).toHaveAttribute('data-disabled', 'true')
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-disabled', 'true')
+      expect(thumb).toHaveAttribute('tabIndex', '-1')
+    })
+
+    it('does not handle interactions when disabled', () => {
+      const onValueChange = jest.fn()
+      render(<Slider disabled onValueChange={onValueChange} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      fireEvent.mouseDown(thumb)
+      
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Event Handling', () => {
+    it('calls onValueChange when value changes', () => {
+      const onValueChange = jest.fn()
+      render(<Slider onValueChange={onValueChange} defaultValue={[25]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      fireEvent.mouseDown(thumb)
+      
+      // Simulate mouse move
+      fireEvent(document, new MouseEvent('mousemove', {
+        clientX: 100,
+        bubbles: true
+      }))
+      
+      expect(onValueChange).toHaveBeenCalled()
+    })
+
+    it('handles track click', () => {
+      const onValueChange = jest.fn()
+      render(<Slider onValueChange={onValueChange} data-testid="slider" />)
+      
+      const track = screen.getByTestId('slider').querySelector('.bg-muted')
+      if (track) {
+        fireEvent.click(track, { clientX: 50 })
+        expect(onValueChange).toHaveBeenCalled()
+      }
+    })
+
+    it('updates controlled value', () => {
+      const TestComponent = () => {
+        const [value, setValue] = React.useState([25])
+        return (
+          <div>
+            <Slider value={value} onValueChange={setValue} data-testid="slider" />
+            <span data-testid="current-value">{value[0]}</span>
+          </div>
+        )
+      }
+      
+      render(<TestComponent />)
+      
+      expect(screen.getByTestId('current-value')).toHaveTextContent('25')
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuenow', '25')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      render(<Slider defaultValue={[50]} min={0} max={100} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('role', 'slider')
+      expect(thumb).toHaveAttribute('aria-valuemin', '0')
+      expect(thumb).toHaveAttribute('aria-valuemax', '100')
+      expect(thumb).toHaveAttribute('aria-valuenow', '50')
+      expect(thumb).toHaveAttribute('tabIndex', '0')
+    })
+
+    it('has proper aria-label for multiple thumbs', () => {
+      render(<Slider defaultValue={[25, 75]} data-testid="slider" />)
+      
+      const thumbs = screen.getAllByRole('slider')
+      expect(thumbs[0]).toHaveAttribute('aria-label', 'Thumb 1')
+      expect(thumbs[1]).toHaveAttribute('aria-label', 'Thumb 2')
+    })
+
+    it('handles keyboard navigation', () => {
+      render(<Slider defaultValue={[50]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('tabIndex', '0')
+      
+      thumb.focus()
+      expect(thumb).toHaveFocus()
+    })
+  })
+
+  describe('Ref Forwarding', () => {
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Slider ref={ref} data-testid="slider" />)
+      
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+      expect(ref.current).toBe(screen.getByTestId('slider'))
+    })
+  })
+
+  describe('DisplayName', () => {
+    it('maintains displayName', () => {
+      expect(Slider.displayName).toBe('Slider')
+    })
+  })
+
+  describe('HTML Attributes', () => {
+    it('passes through HTML attributes', () => {
+      render(
+        <Slider 
+          data-testid="slider"
+          id="test-slider"
+          aria-describedby="slider-description"
+        />
+      )
+      
+      const slider = screen.getByTestId('slider')
+      expect(slider).toHaveAttribute('id', 'test-slider')
+      expect(slider).toHaveAttribute('aria-describedby', 'slider-description')
+    })
+  })
+
+  describe('Complex Combinations', () => {
+    it('renders with all variants and options', () => {
+      render(
+        <Slider
+          size="lg"
+          trackVariant="primary"
+          rangeVariant="success"
+          thumbVariant="error"
+          thumbSize="md"
+          showValueLabel
+          valueLabelFormat={(v) => `${v}px`}
+          min={0}
+          max={200}
+          step={10}
+          defaultValue={[50, 150]}
+          data-testid="slider"
+        />
+      )
+      
+      const slider = screen.getByTestId('slider')
+      expect(slider).toBeInTheDocument()
+      
+      const thumbs = screen.getAllByRole('slider')
+      expect(thumbs).toHaveLength(2)
+      
+      expect(screen.getByText('50px - 150px')).toBeInTheDocument()
+    })
+
+    it('handles variant inheritance correctly', () => {
+      render(<Slider thumbVariant="success" data-testid="slider" />)
+      
+      // Track should inherit from thumb variant
+      const track = screen.getByTestId('slider').querySelector('.bg-success\\/20')
+      expect(track).toBeInTheDocument()
+      
+      // Range should inherit from thumb variant
+      const range = screen.getByTestId('slider').querySelector('.bg-success')
+      expect(range).toBeInTheDocument()
+      
+      // Thumb should use its own variant
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveClass('border-success')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty defaultValue', () => {
+      render(<Slider defaultValue={[]} data-testid="slider" />)
+      
+      const slider = screen.getByTestId('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles undefined value', () => {
+      render(<Slider value={undefined} data-testid="slider" />)
+      
+      const slider = screen.getByTestId('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles extreme min/max values', () => {
+      render(<Slider min={-100} max={1000} defaultValue={[0]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuemin', '-100')
+      expect(thumb).toHaveAttribute('aria-valuemax', '1000')
+    })
+
+    it('handles very small step values', () => {
+      render(<Slider step={0.1} min={0} max={1} defaultValue={[0.5]} data-testid="slider" />)
+      
+      const thumb = screen.getByRole('slider')
+      expect(thumb).toHaveAttribute('aria-valuenow', '0.5')
+    })
+
+    it('handles single value array', () => {
+      render(<Slider defaultValue={[42]} showValueLabel data-testid="slider" />)
+      
+      expect(screen.getByText('42')).toBeInTheDocument()
+      
+      const thumbs = screen.getAllByRole('slider')
+      expect(thumbs).toHaveLength(1)
+    })
+  })
+})