@datametria/vue-components/src/components/__tests__/DatametriaSlider.test.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

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)
    })
  })
})