@datametria/vue-components 1.2.0 → 2.0.1

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

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSelect from '../DatametriaSelect.vue'
+
+describe('DatametriaSelect', () => {
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options }
+    })
+    expect(wrapper.find('.datametria-select').exists()).toBe(true)
+  })
+
+  it('renders label when provided', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, label: 'Select Label' }
+    })
+    expect(wrapper.find('.datametria-select__label').text()).toContain('Select Label')
+  })
+
+  it('shows required indicator', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, label: 'Test', required: true }
+    })
+    expect(wrapper.find('.datametria-select__required').exists()).toBe(true)
+  })
+
+  it('renders all options', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options }
+    })
+    const optionElements = wrapper.findAll('option')
+    expect(optionElements.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('renders placeholder option', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, placeholder: 'Choose option' }
+    })
+    const firstOption = wrapper.find('option')
+    expect(firstOption.text()).toBe('Choose option')
+  })
+
+  it('binds modelValue correctly', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, modelValue: '2' }
+    })
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('2')
+  })
+
+  it('emits update:modelValue on change', async () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options }
+    })
+    await wrapper.find('select').setValue('2')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2'])
+  })
+
+  it('shows error message', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, errorMessage: 'Error text' }
+    })
+    expect(wrapper.find('.datametria-select__error').text()).toBe('Error text')
+  })
+
+  it('applies disabled state', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, disabled: true }
+    })
+    expect(wrapper.find('select').attributes('disabled')).toBeDefined()
+  })
+})

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

@@ -0,0 +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)
+    })
+  })
+})

package/src/components/__tests__/DatametriaSortableTable.test.js

@@ -0,0 +1,168 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSortableTable from '../DatametriaSortableTable.vue'
+
+describe('DatametriaSortableTable', () => {
+  const columns = [
+    { key: 'id', label: 'ID', width: '80px' },
+    { key: 'name', label: 'Nome' },
+    { key: 'email', label: 'Email' },
+    { key: 'status', label: 'Status' }
+  ]
+
+  const data = [
+    { id: 1, name: 'João Silva', email: 'joao@example.com', status: 'Ativo' },
+    { id: 2, name: 'Maria Santos', email: 'maria@example.com', status: 'Inativo' },
+    { id: 3, name: 'Pedro Costa', email: 'pedro@example.com', status: 'Ativo' },
+    { id: 4, name: 'Ana Oliveira', email: 'ana@example.com', status: 'Ativo' }
+  ]
+
+  it('renders table with data', () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data }
+    })
+
+    expect(wrapper.find('.datametria-sortable-table').exists()).toBe(true)
+    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(4)
+  })
+
+  it('renders search input when searchable', () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, searchable: true }
+    })
+
+    expect(wrapper.find('.datametria-sortable-table__search-input').exists()).toBe(true)
+  })
+
+  it('filters data by search query', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, searchable: true }
+    })
+
+    const searchInput = wrapper.find('.datametria-sortable-table__search-input')
+    await searchInput.setValue('João')
+
+    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(1)
+    expect(wrapper.text()).toContain('João Silva')
+  })
+
+  it('sorts data when clicking column header', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, paginated: false }
+    })
+
+    const nameHeader = wrapper.findAll('.datametria-sortable-table__th')[1]
+    await nameHeader.trigger('click')
+
+    const rows = wrapper.findAll('.datametria-sortable-table__tr')
+    expect(rows[0].text()).toContain('Ana Oliveira')
+    expect(rows[3].text()).toContain('Pedro Costa')
+  })
+
+  it('toggles sort order on second click', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, paginated: false }
+    })
+
+    const nameHeader = wrapper.findAll('.datametria-sortable-table__th')[1]
+    await nameHeader.trigger('click') // Ascending
+    await nameHeader.trigger('click') // Descending
+
+    const rows = wrapper.findAll('.datametria-sortable-table__tr')
+    expect(rows[0].text()).toContain('Pedro Costa')
+    expect(rows[3].text()).toContain('Ana Oliveira')
+  })
+
+  it('renders checkboxes when selectable', () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, selectable: true }
+    })
+
+    expect(wrapper.findAll('input[type="checkbox"]').length).toBeGreaterThan(0)
+  })
+
+  it('selects row when checkbox clicked', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, selectable: true }
+    })
+
+    const firstCheckbox = wrapper.findAll('input[type="checkbox"]')[1]
+    await firstCheckbox.setValue(true)
+
+    expect(wrapper.emitted('selection-change')).toBeTruthy()
+  })
+
+  it('renders pagination controls when paginated', () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, paginated: true, pageSize: 2 }
+    })
+
+    expect(wrapper.find('.datametria-sortable-table__pagination').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Página 1 de 2')
+  })
+
+  it('changes page when pagination button clicked', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, paginated: true, pageSize: 2 }
+    })
+
+    const nextButton = wrapper.findAll('.datametria-sortable-table__pagination-btn')[2]
+    await nextButton.trigger('click')
+
+    expect(wrapper.text()).toContain('Página 2 de 2')
+  })
+
+  it('renders column filters when filterable', () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, filterable: true }
+    })
+
+    expect(wrapper.findAll('.datametria-sortable-table__filter-input').length).toBeGreaterThan(0)
+  })
+
+  it('filters by column filter', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, filterable: true }
+    })
+
+    const statusFilter = wrapper.findAll('.datametria-sortable-table__filter-input')[3]
+    await statusFilter.setValue('Inativo')
+
+    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(1)
+    expect(wrapper.text()).toContain('Maria Santos')
+  })
+
+  it('shows empty state when no data', () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data: [] }
+    })
+
+    expect(wrapper.find('.datametria-sortable-table__empty').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Nenhum dado encontrado')
+  })
+
+  it('disables sorting for specific columns', async () => {
+    const columnsWithNonSortable = [
+      { key: 'id', label: 'ID', sortable: false },
+      { key: 'name', label: 'Nome' }
+    ]
+
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns: columnsWithNonSortable, data }
+    })
+
+    const idHeader = wrapper.findAll('.datametria-sortable-table__th')[0]
+    expect(idHeader.classes()).not.toContain('datametria-sortable-table__th--sortable')
+  })
+
+  it('changes page size', async () => {
+    const wrapper = mount(DatametriaSortableTable, {
+      props: { columns, data, paginated: true, pageSize: 2, pageSizeOptions: [2, 5, 10] }
+    })
+
+    const pageSizeSelect = wrapper.find('.datametria-sortable-table__page-size')
+    await pageSizeSelect.setValue(5)
+
+    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(4)
+  })
+})

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

@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSpinner from '../DatametriaSpinner.vue'
+
+describe('DatametriaSpinner', () => {
+  // Rendering tests
+  it('renders with default props', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
+  })
+
+  it('renders with label', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { label: 'Loading...' }
+    })
+    expect(wrapper.find('.dm-spinner__label').text()).toBe('Loading...')
+  })
+
+  it('renders without label', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner__label').exists()).toBe(false)
+  })
+
+  it('renders with custom aria-label', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { ariaLabel: 'Custom loading' }
+    })
+    expect(wrapper.attributes('aria-label')).toBe('Custom loading')
+  })
+
+  it('has role status', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.attributes('role')).toBe('status')
+  })
+
+  // Size tests
+  it('renders small size', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { size: 'sm' }
+    })
+    expect(wrapper.find('.dm-spinner--sm').exists()).toBe(true)
+  })
+
+  it('renders medium size', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { size: 'md' }
+    })
+    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
+  })
+
+  it('renders large size', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { size: 'lg' }
+    })
+    expect(wrapper.find('.dm-spinner--lg').exists()).toBe(true)
+  })
+
+  // Variant tests
+  it('renders primary variant', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { variant: 'primary' }
+    })
+    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
+  })
+
+  it('renders secondary variant', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { variant: 'secondary' }
+    })
+    expect(wrapper.find('.dm-spinner--secondary').exists()).toBe(true)
+  })
+
+  it('renders white variant', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { variant: 'white' }
+    })
+    expect(wrapper.find('.dm-spinner--white').exists()).toBe(true)
+  })
+
+  // SVG structure tests
+  it('renders SVG element', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner__svg').exists()).toBe(true)
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('renders circle element', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner__circle').exists()).toBe(true)
+    expect(wrapper.find('circle').exists()).toBe(true)
+  })
+
+  it('circle has correct attributes', () => {
+    const wrapper = mount(DatametriaSpinner)
+    const circle = wrapper.find('circle')
+    expect(circle.attributes('cx')).toBe('25')
+    expect(circle.attributes('cy')).toBe('25')
+    expect(circle.attributes('r')).toBe('20')
+    expect(circle.attributes('fill')).toBe('none')
+    expect(circle.attributes('stroke-width')).toBe('4')
+  })
+
+  // CSS Variables tests
+  it('uses CSS variables for colors', () => {
+    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
+    
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaSpinner, {
+        props: { variant }
+      })
+      expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('uses CSS variables for spacing', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { label: 'Test' }
+    })
+    
+    // Verifica estrutura
+    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner__label').exists()).toBe(true)
+  })
+
+  // Backward compatibility tests
+  it('works without ThemeProvider (fallback values)', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: {
+        variant: 'primary',
+        size: 'md',
+        label: 'Loading'
+      }
+    })
+    
+    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Loading')
+  })
+
+  it('maintains visual consistency across variants and sizes', () => {
+    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
+    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
+    
+    variants.forEach(variant => {
+      sizes.forEach(size => {
+        const wrapper = mount(DatametriaSpinner, {
+          props: { variant, size }
+        })
+        expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
+        expect(wrapper.find(`.dm-spinner--${size}`).exists()).toBe(true)
+      })
+    })
+  })
+})