taro-uno-ui 0.9.0-beta

package/src/components/form/Slider/Slider.test.tsx

@@ -0,0 +1,553 @@
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import { Slider } from './Slider'
+import type { SliderProps, SliderRef } from './Slider.types'
+
+describe('Slider Component', () => {
+  const defaultProps: SliderProps = {
+    min: 0,
+    max: 100,
+    onChange: vi.fn(),
+    onChangeComplete: vi.fn()
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('renders slider with default props', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('renders slider with different sizes', () => {
+      const sizes: Array<SliderProps['size']> = ['small', 'medium', 'large']
+
+      sizes.forEach(size => {
+        const { container } = render(<Slider {...defaultProps} size={size} />)
+        expect(container.firstChild).toBeInTheDocument()
+        // Size affects styling, not CSS classes in this implementation
+      })
+    })
+
+    it('renders slider with different variants', () => {
+      const variants: Array<SliderProps['variant']> = ['default', 'primary', 'success', 'warning', 'error']
+
+      variants.forEach(variant => {
+        const { container } = render(<Slider {...defaultProps} variant={variant} />)
+        expect(container.firstChild).toBeInTheDocument()
+        // Variant affects styling, not CSS classes in this implementation
+      })
+    })
+
+    it('renders slider with disabled state', () => {
+      render(<Slider {...defaultProps} disabled={true} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('renders vertical slider', () => {
+      render(<Slider {...defaultProps} vertical={true} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('renders reversed slider', () => {
+      render(<Slider {...defaultProps} reverse={true} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('renders slider with marks', () => {
+      const marks = {
+        0: '0',
+        25: '25',
+        50: '50',
+        75: '75',
+        100: '100'
+      }
+
+      render(<Slider {...defaultProps} marks={marks} />)
+
+      // Check that marks are rendered in the marks container (not tooltip)
+      const marksContainer = screen.getByRole('slider').nextElementSibling
+      Object.values(marks).forEach(markText => {
+        const markElements = screen.getAllByText(markText)
+        // At least one should be in the marks container
+        expect(markElements.length).toBeGreaterThan(0)
+      })
+    })
+
+    it('renders slider with tooltip', () => {
+      render(<Slider {...defaultProps} tooltip={{ formatter: (value) => `${value}%` }} />)
+
+      expect(screen.getByTestId('slider-tooltip')).toBeInTheDocument()
+    })
+  })
+
+  describe('Value Handling', () => {
+    it('handles controlled value', () => {
+      const { rerender } = render(<Slider {...defaultProps} value={50} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+
+      rerender(<Slider {...defaultProps} value={75} />)
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles uncontrolled value with defaultValue', () => {
+      render(<Slider {...defaultProps} defaultValue={50} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('calls onChange when value changes', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      fireEvent.click(slider)
+
+      expect(defaultProps.onChange).toHaveBeenCalled()
+    })
+
+    it('calls onChangeComplete when interaction completes', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      fireEvent.mouseDown(slider)
+      fireEvent.mouseUp(slider)
+
+      expect(defaultProps.onChangeComplete).toHaveBeenCalled()
+    })
+
+    it('respects min and max bounds', () => {
+      render(<Slider {...defaultProps} min={10} max={90} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles step increments', () => {
+      render(<Slider {...defaultProps} step={10} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('handles mouse drag interaction', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      fireEvent.mouseDown(slider)
+
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles touch interaction', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      fireEvent.touchStart(slider)
+
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles keyboard interaction', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+      expect(defaultProps.onChange).toHaveBeenCalled()
+    })
+
+    it('handles keyboard arrow keys correctly', () => {
+      const onChange = vi.fn()
+      render(<Slider {...defaultProps} value={50} onChange={onChange} />)
+
+      const slider = screen.getByRole('slider')
+
+      // Test right arrow
+      fireEvent.keyDown(slider, { key: 'ArrowRight' })
+      expect(onChange).toHaveBeenCalledWith(51)
+
+      // Test left arrow
+      fireEvent.keyDown(slider, { key: 'ArrowLeft' })
+      expect(onChange).toHaveBeenCalledWith(49)
+
+      // Test up arrow
+      fireEvent.keyDown(slider, { key: 'ArrowUp' })
+      expect(onChange).toHaveBeenCalledWith(50)
+
+      // Test down arrow
+      fireEvent.keyDown(slider, { key: 'ArrowDown' })
+      expect(onChange).toHaveBeenCalledWith(48)
+    })
+
+    it('handles keyboard navigation keys', () => {
+      const onChange = vi.fn()
+      render(<Slider {...defaultProps} value={50} onChange={onChange} />)
+
+      const slider = screen.getByRole('slider')
+
+      // Test home key
+      fireEvent.keyDown(slider, { key: 'Home' })
+      expect(onChange).toHaveBeenCalledWith(0)
+
+      // Test end key
+      fireEvent.keyDown(slider, { key: 'End' })
+      expect(onChange).toHaveBeenCalledWith(100)
+
+      // Test page up
+      fireEvent.keyDown(slider, { key: 'PageUp' })
+      expect(onChange).toHaveBeenCalledWith(60)
+
+      // Test page down
+      fireEvent.keyDown(slider, { key: 'PageDown' })
+      expect(onChange).toHaveBeenCalledWith(40)
+    })
+
+    it('handles disabled state interactions', () => {
+      render(<Slider {...defaultProps} disabled={true} />)
+
+      const slider = screen.getByRole('slider')
+      fireEvent.click(slider)
+
+      expect(defaultProps.onChange).not.toHaveBeenCalled()
+    })
+
+    it('handles included track display', () => {
+      render(<Slider {...defaultProps} value={50} included={true} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles excluded track display', () => {
+      render(<Slider {...defaultProps} value={50} included={false} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+  })
+
+  describe('Marks Functionality', () => {
+    it('displays marks correctly', () => {
+      const marks = {
+        0: 'Start',
+        50: 'Middle',
+        100: 'End'
+      }
+
+      render(<Slider {...defaultProps} marks={marks} />)
+
+      expect(screen.getAllByText('Start').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('Middle').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('End').length).toBeGreaterThan(0)
+    })
+
+    it('handles custom mark rendering', () => {
+      const marks = {
+        0: { label: 'Start', style: { color: 'red' } },
+        50: { label: 'Middle', style: { color: 'blue' } },
+        100: { label: 'End', style: { color: 'green' } }
+      }
+
+      render(<Slider {...defaultProps} marks={marks} />)
+
+      expect(screen.getAllByText('Start').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('Middle').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('End').length).toBeGreaterThan(0)
+    })
+
+    it('snaps to mark values when clicking on marks', () => {
+      const marks = {
+        0: '0',
+        25: '25',
+        50: '50',
+        75: '75',
+        100: '100'
+      }
+
+      render(<Slider {...defaultProps} marks={marks} />)
+
+      const mark25 = screen.getByText('25')
+      fireEvent.click(mark25)
+
+      expect(defaultProps.onChange).toHaveBeenCalled()
+    })
+  })
+
+  describe('Tooltip Functionality', () => {
+    it('displays tooltip with default formatter', () => {
+      render(<Slider {...defaultProps} value={50} tooltip={true} />)
+
+      const tooltip = screen.getByTestId('slider-tooltip')
+      expect(tooltip).toBeInTheDocument()
+      expect(tooltip).toHaveTextContent('50')
+    })
+
+    it('displays tooltip with custom formatter', () => {
+      const customFormatter = (value: number) => `${value}%`
+      render(<Slider {...defaultProps} value={50} tooltip={{ formatter: customFormatter }} />)
+
+      const tooltip = screen.getByTestId('slider-tooltip')
+      expect(tooltip).toBeInTheDocument()
+      expect(tooltip).toHaveTextContent('50%')
+    })
+
+    it('hides tooltip when tooltip is false', () => {
+      render(<Slider {...defaultProps} value={50} tooltip={false} />)
+
+      const tooltip = screen.queryByTestId('slider-tooltip')
+      expect(tooltip).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Ref Methods', () => {
+    it('provides ref methods', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} ref={ref} />)
+
+      expect(ref.current).toBeTruthy()
+      expect(ref.current?.getValue).toBeDefined()
+      expect(ref.current?.setValue).toBeDefined()
+      expect(ref.current?.focus).toBeDefined()
+      expect(ref.current?.blur).toBeDefined()
+    })
+
+    it('getValue returns current value', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} value={50} ref={ref} />)
+
+      expect(ref.current?.getValue()).toBe(50)
+    })
+
+    it('setValue updates value', () => {
+      const ref = React.createRef<SliderRef>()
+      const onChange = vi.fn()
+      render(<Slider {...defaultProps} ref={ref} onChange={onChange} />)
+
+      ref.current?.setValue(75)
+      expect(onChange).toHaveBeenCalledWith(75)
+    })
+
+    it('focus and blur methods work', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} ref={ref} />)
+
+      // Test focus method
+      expect(() => ref.current?.focus()).not.toThrow()
+
+      // Test blur method
+      expect(() => ref.current?.blur()).not.toThrow()
+    })
+
+    it('disable and enable methods work', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} ref={ref} />)
+
+      ref.current?.disable()
+      expect(ref.current?.isDisabled()).toBe(true)
+
+      ref.current?.enable()
+      expect(ref.current?.isDisabled()).toBe(false)
+    })
+
+    it('reset method works', () => {
+      const ref = React.createRef<SliderRef>()
+      const onChange = vi.fn()
+      render(<Slider {...defaultProps} defaultValue={50} ref={ref} onChange={onChange} />)
+
+      ref.current?.reset()
+      expect(onChange).toHaveBeenCalledWith(50)
+    })
+
+    it('getPercentage method works', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} min={0} max={100} value={25} ref={ref} />)
+
+      expect(ref.current?.getPercentage()).toBe(25)
+    })
+
+    it('getPercentageFromValue method works', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} min={0} max={100} ref={ref} />)
+
+      expect(ref.current?.getPercentageFromValue(25)).toBe(25)
+    })
+
+    it('getValueFromPercentage method works', () => {
+      const ref = React.createRef<SliderRef>()
+      render(<Slider {...defaultProps} min={0} max={100} ref={ref} />)
+
+      expect(ref.current?.getValueFromPercentage(25)).toBe(25)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper accessibility attributes', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+      expect(slider).toHaveAttribute('aria-valuemin', '0')
+      expect(slider).toHaveAttribute('aria-valuemax', '100')
+      expect(slider).toHaveAttribute('aria-valuenow', '0')
+      expect(slider).toHaveAttribute('aria-disabled', 'false')
+      expect(slider).toHaveAttribute('tabIndex', '0')
+    })
+
+    it('supports custom accessibility props', () => {
+      render(
+        <Slider
+          {...defaultProps}
+          accessibilityLabel="Volume control"
+          aria-label="Custom volume slider"
+        />
+      )
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveAttribute('aria-label', 'Custom volume slider')
+    })
+
+    it('handles accessibility state for disabled slider', () => {
+      render(<Slider {...defaultProps} disabled={true} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveAttribute('aria-disabled', 'true')
+      expect(slider).toHaveAttribute('tabIndex', '-1')
+    })
+
+    it('updates accessibility attributes when value changes', () => {
+      const { rerender } = render(<Slider {...defaultProps} value={25} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toHaveAttribute('aria-valuenow', '25')
+
+      rerender(<Slider {...defaultProps} value={75} />)
+      expect(slider).toHaveAttribute('aria-valuenow', '75')
+    })
+
+    it('is keyboard accessible', () => {
+      render(<Slider {...defaultProps} />)
+
+      const slider = screen.getByRole('slider')
+
+      // Test keyboard focus
+      slider.focus()
+      expect(slider).toHaveFocus()
+
+      // Test keyboard interaction
+      fireEvent.keyDown(slider, { key: 'ArrowRight' })
+      expect(defaultProps.onChange).toHaveBeenCalled()
+    })
+
+    it('supports screen reader announcements', () => {
+      render(
+        <Slider
+          {...defaultProps}
+          value={50}
+          aria-label="Volume slider"
+        />
+      )
+
+      const slider = screen.getByRole('slider', { name: /Volume slider/i })
+      expect(slider).toBeInTheDocument()
+      expect(slider).toHaveAttribute('aria-valuenow', '50')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles min equal to max', () => {
+      render(<Slider {...defaultProps} min={50} max={50} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles negative values', () => {
+      render(<Slider {...defaultProps} min={-100} max={0} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles decimal step', () => {
+      render(<Slider {...defaultProps} step={0.1} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles very large step', () => {
+      render(<Slider {...defaultProps} step={50} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+
+    it('handles undefined tooltip', () => {
+      render(<Slider {...defaultProps} tooltip={undefined} />)
+
+      const tooltip = screen.queryByTestId('slider-tooltip')
+      expect(tooltip).not.toBeInTheDocument()
+    })
+
+    it('handles empty marks object', () => {
+      render(<Slider {...defaultProps} marks={{}} />)
+
+      const slider = screen.getByRole('slider')
+      expect(slider).toBeInTheDocument()
+    })
+  })
+
+  describe('Performance', () => {
+    it('renders efficiently with multiple sliders', () => {
+      const { rerender } = render(
+        <div>
+          {[1, 2, 3, 4, 5].map(i => (
+            <Slider key={i} {...defaultProps} aria-label={`Slider ${i}`} />
+          ))}
+        </div>
+      )
+
+      expect(screen.getAllByRole('slider')).toHaveLength(5)
+
+      rerender(
+        <div>
+          {[1, 2, 3, 4, 5, 6].map(i => (
+            <Slider key={i} {...defaultProps} aria-label={`Slider ${i}`} />
+          ))}
+        </div>
+      )
+
+      expect(screen.getAllByRole('slider')).toHaveLength(6)
+    })
+
+    it('handles rapid value changes efficiently', () => {
+      const onChange = vi.fn()
+      render(<Slider {...defaultProps} onChange={onChange} />)
+
+      const slider = screen.getByRole('slider')
+
+      // Simulate rapid changes
+      for (let i = 0; i < 10; i++) {
+        fireEvent.click(slider)
+      }
+
+      expect(onChange).toHaveBeenCalledTimes(10)
+    })
+  })
+})