@sabrenski/spire-ui 0.0.1

package/src/components/Slider/Slider.test.ts

@@ -0,0 +1,416 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Slider from './Slider.vue'
+import { valueToPercent, percentToValue, snapToStep, clamp, getClosestThumb } from './utils'
+
+describe('Slider utils', () => {
+  describe('valueToPercent', () => {
+    it('converts value to percentage', () => {
+      expect(valueToPercent(50, 0, 100)).toBe(50)
+      expect(valueToPercent(0, 0, 100)).toBe(0)
+      expect(valueToPercent(100, 0, 100)).toBe(100)
+    })
+
+    it('handles custom min/max range', () => {
+      expect(valueToPercent(50, 0, 200)).toBe(25)
+      expect(valueToPercent(150, 100, 200)).toBe(50)
+    })
+
+    it('returns 0 when min equals max', () => {
+      expect(valueToPercent(50, 50, 50)).toBe(0)
+    })
+  })
+
+  describe('percentToValue', () => {
+    it('converts percentage to value', () => {
+      expect(percentToValue(50, 0, 100)).toBe(50)
+      expect(percentToValue(0, 0, 100)).toBe(0)
+      expect(percentToValue(100, 0, 100)).toBe(100)
+    })
+
+    it('handles custom min/max range', () => {
+      expect(percentToValue(25, 0, 200)).toBe(50)
+      expect(percentToValue(50, 100, 200)).toBe(150)
+    })
+  })
+
+  describe('snapToStep', () => {
+    it('snaps to nearest step', () => {
+      expect(snapToStep(23, 5, 0)).toBe(25)
+      expect(snapToStep(22, 5, 0)).toBe(20)
+      expect(snapToStep(2.3, 0.5, 0)).toBe(2.5)
+    })
+
+    it('respects min offset', () => {
+      expect(snapToStep(13, 5, 3)).toBe(13)
+      expect(snapToStep(14, 5, 3)).toBe(13)
+      expect(snapToStep(16, 5, 3)).toBe(18)
+    })
+  })
+
+  describe('clamp', () => {
+    it('clamps value between min and max', () => {
+      expect(clamp(50, 0, 100)).toBe(50)
+      expect(clamp(-10, 0, 100)).toBe(0)
+      expect(clamp(150, 0, 100)).toBe(100)
+    })
+  })
+
+  describe('getClosestThumb', () => {
+    it('returns closest thumb', () => {
+      expect(getClosestThumb(30, 20, 80)).toBe('min')
+      expect(getClosestThumb(70, 20, 80)).toBe('max')
+    })
+
+    it('returns min when equidistant', () => {
+      expect(getClosestThumb(50, 20, 80)).toBe('min')
+    })
+  })
+})
+
+describe('Slider', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('.ui-slider').exists()).toBe(true)
+      expect(wrapper.find('.ui-slider__track').exists()).toBe(true)
+      expect(wrapper.find('.ui-slider__thumb').exists()).toBe(true)
+    })
+
+    it('renders range mode with two thumbs', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80] }
+      })
+      const thumbs = wrapper.findAll('.ui-slider__thumb')
+      expect(thumbs).toHaveLength(2)
+    })
+
+    it('applies disabled class', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, disabled: true }
+      })
+      expect(wrapper.find('.ui-slider--disabled').exists()).toBe(true)
+    })
+
+    it('applies size classes', () => {
+      const sm = mount(Slider, { props: { modelValue: 50, size: 'sm' } })
+      const lg = mount(Slider, { props: { modelValue: 50, size: 'lg' } })
+
+      expect(sm.find('.ui-slider--sm').exists()).toBe(true)
+      expect(lg.find('.ui-slider--lg').exists()).toBe(true)
+    })
+
+    it('applies range class in range mode', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80] }
+      })
+      expect(wrapper.find('.ui-slider--range').exists()).toBe(true)
+    })
+  })
+
+  describe('Single value mode', () => {
+    it('positions thumb correctly', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 100 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      expect(thumb.attributes('style')).toContain('left: 50%')
+    })
+
+    it('positions range fill correctly', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 100 }
+      })
+      const range = wrapper.find('.ui-slider__range')
+      expect(range.attributes('style')).toContain('left: 0%')
+      expect(range.attributes('style')).toContain('right: 50%')
+    })
+  })
+
+  describe('Range mode', () => {
+    it('positions both thumbs correctly', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80], min: 0, max: 100 }
+      })
+      const thumbs = wrapper.findAll('.ui-slider__thumb')
+      expect(thumbs[0].attributes('style')).toContain('left: 20%')
+      expect(thumbs[1].attributes('style')).toContain('left: 80%')
+    })
+
+    it('positions range fill correctly', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80], min: 0, max: 100 }
+      })
+      const range = wrapper.find('.ui-slider__range')
+      expect(range.attributes('style')).toContain('left: 20%')
+      expect(range.attributes('style')).toContain('right: 20%')
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('increases value with ArrowRight', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, step: 1 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([51])
+    })
+
+    it('decreases value with ArrowLeft', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, step: 1 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'ArrowLeft' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([49])
+    })
+
+    it('goes to min with Home key', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'Home' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([0])
+    })
+
+    it('goes to max with End key', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, max: 100 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'End' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([100])
+    })
+
+    it('respects step size', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, step: 10 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([60])
+    })
+
+    it('emits change event after keyboard interaction', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, step: 1 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('change')).toBeTruthy()
+    })
+
+    it('does not respond when disabled', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, disabled: true }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+  })
+
+  describe('Range keyboard navigation', () => {
+    it('moves min thumb independently', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80] }
+      })
+      const minThumb = wrapper.findAll('.ui-slider__thumb')[0]
+      await minThumb.trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[21, 80]])
+    })
+
+    it('moves max thumb independently', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80] }
+      })
+      const maxThumb = wrapper.findAll('.ui-slider__thumb')[1]
+      await maxThumb.trigger('keydown', { key: 'ArrowLeft' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([[20, 79]])
+    })
+
+    it('prevents min thumb from crossing max', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [79, 80] }
+      })
+      const minThumb = wrapper.findAll('.ui-slider__thumb')[0]
+      await minThumb.trigger('keydown', { key: 'ArrowRight' })
+      await minThumb.trigger('keydown', { key: 'ArrowRight' })
+
+      const emits = wrapper.emitted('update:modelValue')!
+      expect(emits[emits.length - 1]).toEqual([[80, 80]])
+    })
+
+    it('prevents max thumb from crossing min', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 21] }
+      })
+      const maxThumb = wrapper.findAll('.ui-slider__thumb')[1]
+      await maxThumb.trigger('keydown', { key: 'ArrowLeft' })
+      await maxThumb.trigger('keydown', { key: 'ArrowLeft' })
+
+      const emits = wrapper.emitted('update:modelValue')!
+      expect(emits[emits.length - 1]).toEqual([[20, 20]])
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has slider role on thumbs', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      expect(thumb.attributes('role')).toBe('slider')
+    })
+
+    it('has correct ARIA attributes', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 100 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      expect(thumb.attributes('aria-valuemin')).toBe('0')
+      expect(thumb.attributes('aria-valuemax')).toBe('100')
+      expect(thumb.attributes('aria-valuenow')).toBe('50')
+    })
+
+    it('has aria-disabled when disabled', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, disabled: true }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      expect(thumb.attributes('aria-disabled')).toBe('true')
+    })
+
+    it('thumbs are focusable', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      expect(thumb.attributes('tabindex')).toBe('0')
+    })
+
+    it('range mode has appropriate ARIA on both thumbs', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [20, 80], min: 0, max: 100 }
+      })
+      const thumbs = wrapper.findAll('.ui-slider__thumb')
+
+      expect(thumbs[0].attributes('aria-valuemin')).toBe('0')
+      expect(thumbs[0].attributes('aria-valuemax')).toBe('80')
+      expect(thumbs[0].attributes('aria-valuenow')).toBe('20')
+      expect(thumbs[0].attributes('aria-label')).toBe('Minimum value')
+
+      expect(thumbs[1].attributes('aria-valuemin')).toBe('20')
+      expect(thumbs[1].attributes('aria-valuemax')).toBe('100')
+      expect(thumbs[1].attributes('aria-valuenow')).toBe('80')
+      expect(thumbs[1].attributes('aria-label')).toBe('Maximum value')
+    })
+  })
+
+  describe('Tooltip', () => {
+    it('does not show tooltip by default', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('.ui-slider__tooltip').exists()).toBe(false)
+    })
+
+    it('does not show tooltip when not dragging even with showTooltip', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, showTooltip: true }
+      })
+      expect(wrapper.find('.ui-slider__tooltip').exists()).toBe(false)
+    })
+  })
+
+  describe('Ticks', () => {
+    it('does not show ticks by default', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, step: 10 }
+      })
+      expect(wrapper.find('.ui-slider__ticks').exists()).toBe(false)
+    })
+
+    it('shows ticks when showTicks is true', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, step: 10, showTicks: true }
+      })
+      expect(wrapper.find('.ui-slider__ticks').exists()).toBe(true)
+    })
+
+    it('renders correct number of ticks (excluding first and last)', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 100, step: 20, showTicks: true }
+      })
+      const ticks = wrapper.findAll('.ui-slider__tick')
+      expect(ticks).toHaveLength(4)
+    })
+
+    it('positions ticks correctly (excluding edges)', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 100, step: 25, showTicks: true }
+      })
+      const ticks = wrapper.findAll('.ui-slider__tick')
+      expect(ticks).toHaveLength(3)
+      expect(ticks[0].attributes('style')).toContain('left: 25%')
+      expect(ticks[1].attributes('style')).toContain('left: 50%')
+      expect(ticks[2].attributes('style')).toContain('left: 75%')
+    })
+
+    it('does not render ticks if too many steps', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 1000, step: 1, showTicks: true }
+      })
+      expect(wrapper.find('.ui-slider__tick').exists()).toBe(false)
+    })
+
+    it('does not render ticks if only two steps (would be empty)', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 0, max: 100, step: 100, showTicks: true }
+      })
+      expect(wrapper.find('.ui-slider__tick').exists()).toBe(false)
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('handles min equals max', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 50, min: 50, max: 50 }
+      })
+      expect(wrapper.find('.ui-slider').exists()).toBe(true)
+    })
+
+    it('handles negative values', () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: -25, min: -100, max: 0 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      expect(thumb.attributes('style')).toContain('left: 75%')
+    })
+
+    it('handles decimal step values', async () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: 0.5, min: 0, max: 1, step: 0.1 }
+      })
+      const thumb = wrapper.find('.ui-slider__thumb')
+      await thumb.trigger('keydown', { key: 'ArrowRight' })
+
+      const emitted = wrapper.emitted('update:modelValue')![0][0] as number
+      expect(emitted).toBeCloseTo(0.6, 5)
+    })
+  })
+})