@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/__tests__/DatametriaSlider.test.ts

@@ -1,261 +1,261 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaSlider from '../DatametriaSlider.vue'
-
-describe('DatametriaSlider', () => {
-  describe('Renderização', () => {
-    it('renderiza corretamente', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      expect(wrapper.find('.dm-slider').exists()).toBe(true)
-    })
-
-    it('renderiza label', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, label: 'Volume' }
-      })
-      expect(wrapper.text()).toContain('Volume')
-    })
-
-    it('renderiza valor quando showValue=true', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 75, showValue: true }
-      })
-      expect(wrapper.find('.dm-slider__value').text()).toBe('75')
-    })
-
-    it('não renderiza valor quando showValue=false', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 75, showValue: false }
-      })
-      expect(wrapper.find('.dm-slider__value').exists()).toBe(false)
-    })
-
-    it('renderiza min/max quando showMinMax=true', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, min: 0, max: 100, showMinMax: true }
-      })
-      expect(wrapper.find('.dm-slider__min').text()).toBe('0')
-      expect(wrapper.find('.dm-slider__max').text()).toBe('100')
-    })
-
-    it('renderiza required indicator', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, label: 'Volume', required: true }
-      })
-      expect(wrapper.find('.dm-slider__required').exists()).toBe(true)
-    })
-  })
-
-  describe('Props', () => {
-    it('aceita modelValue', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 60 }
-      })
-      expect(wrapper.props('modelValue')).toBe(60)
-    })
-
-    it('aceita min e max', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, min: 10, max: 90 }
-      })
-      const input = wrapper.find('input')
-      expect(input.attributes('min')).toBe('10')
-      expect(input.attributes('max')).toBe('90')
-    })
-
-    it('aceita step', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, step: 5 }
-      })
-      expect(wrapper.find('input').attributes('step')).toBe('5')
-    })
-
-    it('aceita disabled', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, disabled: true }
-      })
-      expect(wrapper.find('.dm-slider').classes()).toContain('dm-slider--disabled')
-      expect(wrapper.find('input').element.disabled).toBe(true)
-    })
-
-    it('aceita errorMessage', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, errorMessage: 'Valor inválido' }
-      })
-      expect(wrapper.find('.dm-slider__error').text()).toBe('Valor inválido')
-    })
-
-    it('aceita helperText', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, helperText: 'Ajuste o volume' }
-      })
-      expect(wrapper.find('.dm-slider__helper').text()).toBe('Ajuste o volume')
-    })
-
-    it('aceita formatter customizado', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: {
-          modelValue: 50,
-          showValue: true,
-          formatter: (v: number) => `${v}%`
-        }
-      })
-      expect(wrapper.find('.dm-slider__value').text()).toBe('50%')
-    })
-  })
-
-  describe('Interação', () => {
-    it('emite update:modelValue ao mudar input', async () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      
-      const input = wrapper.find('input')
-      await input.setValue(75)
-      
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([75])
-    })
-
-    it('emite change ao mudar valor', async () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      
-      const input = wrapper.find('input')
-      await input.trigger('change')
-      
-      expect(wrapper.emitted('change')).toBeTruthy()
-    })
-
-    it('emite focus ao focar', async () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      
-      await wrapper.find('input').trigger('focus')
-      expect(wrapper.emitted('focus')).toBeTruthy()
-    })
-
-    it('emite blur ao desfocar', async () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      
-      await wrapper.find('input').trigger('blur')
-      expect(wrapper.emitted('blur')).toBeTruthy()
-    })
-  })
-
-  describe('Progress', () => {
-    it('calcula progressPercentage corretamente', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, min: 0, max: 100 }
-      })
-      
-      const progress = wrapper.find('.dm-slider__progress')
-      expect(progress.attributes('style')).toContain('width: 50%')
-    })
-
-    it('calcula progressPercentage com min diferente de 0', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, min: 25, max: 75 }
-      })
-      
-      const progress = wrapper.find('.dm-slider__progress')
-      expect(progress.attributes('style')).toContain('width: 50%')
-    })
-  })
-
-  describe('Acessibilidade', () => {
-    it('input tem type range', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      expect(wrapper.find('input').attributes('type')).toBe('range')
-    })
-
-    it('input tem aria-valuemin', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, min: 10 }
-      })
-      expect(wrapper.find('input').attributes('aria-valuemin')).toBe('10')
-    })
-
-    it('input tem aria-valuemax', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, max: 90 }
-      })
-      expect(wrapper.find('input').attributes('aria-valuemax')).toBe('90')
-    })
-
-    it('input tem aria-valuenow', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 60 }
-      })
-      expect(wrapper.find('input').attributes('aria-valuenow')).toBe('60')
-    })
-
-    it('input tem aria-valuetext com formatter', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: {
-          modelValue: 50,
-          formatter: (v: number) => `${v}%`
-        }
-      })
-      expect(wrapper.find('input').attributes('aria-valuetext')).toBe('50%')
-    })
-
-    it('error tem role alert', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, errorMessage: 'Erro' }
-      })
-      expect(wrapper.find('.dm-slider__error').attributes('role')).toBe('alert')
-    })
-
-    it('input tem aria-describedby quando há error', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50, errorMessage: 'Erro' }
-      })
-      const input = wrapper.find('input')
-      expect(input.attributes('aria-describedby')).toBeDefined()
-    })
-  })
-
-  describe('Métodos Expostos', () => {
-    it('expõe método focus', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      const exposed = wrapper.vm as any
-      expect(typeof exposed.focus).toBe('function')
-    })
-
-    it('expõe método blur', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      const exposed = wrapper.vm as any
-      expect(typeof exposed.blur).toBe('function')
-    })
-
-    it('expõe inputRef', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      const exposed = wrapper.vm as any
-      expect(exposed.inputRef).toBeDefined()
-    })
-  })
-
-  describe('CSS Variables', () => {
-    it('usa CSS Variables padronizadas', () => {
-      const wrapper = mount(DatametriaSlider, {
-        props: { modelValue: 50 }
-      })
-      expect(wrapper.find('.dm-slider').exists()).toBe(true)
-    })
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSlider from '../DatametriaSlider.vue'
+
+describe('DatametriaSlider', () => {
+  describe('Renderização', () => {
+    it('renderiza corretamente', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('.dm-slider').exists()).toBe(true)
+    })
+
+    it('renderiza label', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, label: 'Volume' }
+      })
+      expect(wrapper.text()).toContain('Volume')
+    })
+
+    it('renderiza valor quando showValue=true', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 75, showValue: true }
+      })
+      expect(wrapper.find('.dm-slider__value').text()).toBe('75')
+    })
+
+    it('não renderiza valor quando showValue=false', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 75, showValue: false }
+      })
+      expect(wrapper.find('.dm-slider__value').exists()).toBe(false)
+    })
+
+    it('renderiza min/max quando showMinMax=true', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 0, max: 100, showMinMax: true }
+      })
+      expect(wrapper.find('.dm-slider__min').text()).toBe('0')
+      expect(wrapper.find('.dm-slider__max').text()).toBe('100')
+    })
+
+    it('renderiza required indicator', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, label: 'Volume', required: true }
+      })
+      expect(wrapper.find('.dm-slider__required').exists()).toBe(true)
+    })
+  })
+
+  describe('Props', () => {
+    it('aceita modelValue', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 60 }
+      })
+      expect(wrapper.props('modelValue')).toBe(60)
+    })
+
+    it('aceita min e max', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 10, max: 90 }
+      })
+      const input = wrapper.find('input')
+      expect(input.attributes('min')).toBe('10')
+      expect(input.attributes('max')).toBe('90')
+    })
+
+    it('aceita step', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, step: 5 }
+      })
+      expect(wrapper.find('input').attributes('step')).toBe('5')
+    })
+
+    it('aceita disabled', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, disabled: true }
+      })
+      expect(wrapper.find('.dm-slider').classes()).toContain('dm-slider--disabled')
+      expect(wrapper.find('input').element.disabled).toBe(true)
+    })
+
+    it('aceita errorMessage', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, errorMessage: 'Valor inválido' }
+      })
+      expect(wrapper.find('.dm-slider__error').text()).toBe('Valor inválido')
+    })
+
+    it('aceita helperText', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, helperText: 'Ajuste o volume' }
+      })
+      expect(wrapper.find('.dm-slider__helper').text()).toBe('Ajuste o volume')
+    })
+
+    it('aceita formatter customizado', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: {
+          modelValue: 50,
+          showValue: true,
+          formatter: (v: number) => `${v}%`
+        }
+      })
+      expect(wrapper.find('.dm-slider__value').text()).toBe('50%')
+    })
+  })
+
+  describe('Interação', () => {
+    it('emite update:modelValue ao mudar input', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      const input = wrapper.find('input')
+      await input.setValue(75)
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([75])
+    })
+
+    it('emite change ao mudar valor', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      const input = wrapper.find('input')
+      await input.trigger('change')
+      
+      expect(wrapper.emitted('change')).toBeTruthy()
+    })
+
+    it('emite focus ao focar', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      await wrapper.find('input').trigger('focus')
+      expect(wrapper.emitted('focus')).toBeTruthy()
+    })
+
+    it('emite blur ao desfocar', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      await wrapper.find('input').trigger('blur')
+      expect(wrapper.emitted('blur')).toBeTruthy()
+    })
+  })
+
+  describe('Progress', () => {
+    it('calcula progressPercentage corretamente', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 0, max: 100 }
+      })
+      
+      const progress = wrapper.find('.dm-slider__progress')
+      expect(progress.attributes('style')).toContain('width: 50%')
+    })
+
+    it('calcula progressPercentage com min diferente de 0', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 25, max: 75 }
+      })
+      
+      const progress = wrapper.find('.dm-slider__progress')
+      expect(progress.attributes('style')).toContain('width: 50%')
+    })
+  })
+
+  describe('Acessibilidade', () => {
+    it('input tem type range', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('input').attributes('type')).toBe('range')
+    })
+
+    it('input tem aria-valuemin', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 10 }
+      })
+      expect(wrapper.find('input').attributes('aria-valuemin')).toBe('10')
+    })
+
+    it('input tem aria-valuemax', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, max: 90 }
+      })
+      expect(wrapper.find('input').attributes('aria-valuemax')).toBe('90')
+    })
+
+    it('input tem aria-valuenow', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 60 }
+      })
+      expect(wrapper.find('input').attributes('aria-valuenow')).toBe('60')
+    })
+
+    it('input tem aria-valuetext com formatter', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: {
+          modelValue: 50,
+          formatter: (v: number) => `${v}%`
+        }
+      })
+      expect(wrapper.find('input').attributes('aria-valuetext')).toBe('50%')
+    })
+
+    it('error tem role alert', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, errorMessage: 'Erro' }
+      })
+      expect(wrapper.find('.dm-slider__error').attributes('role')).toBe('alert')
+    })
+
+    it('input tem aria-describedby quando há error', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, errorMessage: 'Erro' }
+      })
+      const input = wrapper.find('input')
+      expect(input.attributes('aria-describedby')).toBeDefined()
+    })
+  })
+
+  describe('Métodos Expostos', () => {
+    it('expõe método focus', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      const exposed = wrapper.vm as any
+      expect(typeof exposed.focus).toBe('function')
+    })
+
+    it('expõe método blur', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      const exposed = wrapper.vm as any
+      expect(typeof exposed.blur).toBe('function')
+    })
+
+    it('expõe inputRef', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      const exposed = wrapper.vm as any
+      expect(exposed.inputRef).toBeDefined()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('usa CSS Variables padronizadas', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('.dm-slider').exists()).toBe(true)
+    })
+  })
+})