@datametria/vue-components 2.2.0 → 2.3.1

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

@@ -1,180 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaAutocomplete from '../DatametriaAutocomplete.vue'
-import { datametriaTheme } from '../../theme/presets'
-import { THEME_INJECTION_KEY } from '../../theme/constants'
-
-const createWrapper = (props = {}, themeProps = {}) => {
-  return mount(DatametriaAutocomplete, {
-    props,
-    global: {
-      plugins: [{
-        install(app) {
-          app.provide(THEME_INJECTION_KEY, datametriaTheme)
-        }
-      }]
-    }
-  })
-}
-
-describe('DatametriaAutocomplete', () => {
-  const mockOptions = [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' }
-  ]
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('renders correctly', () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    expect(wrapper.find('.dm-autocomplete').exists()).toBe(true)
-  })
-
-  it('applies theme colors correctly', () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    expect(wrapper.find('.dm-autocomplete').exists()).toBe(true)
-  })
-
-  it('shows options when focused', async () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    const input = wrapper.find('.dm-autocomplete__input')
-    
-    await input.trigger('focus')
-    expect(wrapper.find('.dm-autocomplete__dropdown').exists()).toBe(true)
-  })
-
-  it('filters options based on search query', async () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    const input = wrapper.find('.dm-autocomplete__input')
-    
-    await input.setValue('Option 1')
-    await input.trigger('focus')
-    
-    const options = wrapper.findAll('.dm-autocomplete__option')
-    expect(options).toHaveLength(1)
-    expect(options[0].text()).toBe('Option 1')
-  })
-
-  it('emits update:modelValue when option is selected', async () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    const input = wrapper.find('.dm-autocomplete__input')
-    
-    await input.trigger('focus')
-    const option = wrapper.find('.dm-autocomplete__option')
-    await option.trigger('click')
-    
-    const autocomplete = wrapper.findComponent(DatametriaAutocomplete)
-    expect(autocomplete.emitted('update:modelValue')).toBeTruthy()
-  })
-
-  it('supports keyboard navigation', async () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    const input = wrapper.find('.dm-autocomplete__input')
-    
-    await input.trigger('focus')
-    await input.trigger('keydown', { key: 'ArrowDown' })
-    
-    expect(wrapper.find('.dm-autocomplete__option--active').exists()).toBe(true)
-  })
-
-  it('shows error state correctly', () => {
-    const wrapper = createWrapper({ 
-      options: mockOptions, 
-      error: 'Required field' 
-    })
-    
-    expect(wrapper.find('.dm-autocomplete__input--error').exists()).toBe(true)
-    expect(wrapper.find('.dm-autocomplete__error').text()).toBe('Required field')
-  })
-
-  it('supports disabled state', () => {
-    const wrapper = createWrapper({ 
-      options: mockOptions, 
-      disabled: true 
-    })
-    
-    const input = wrapper.find('.dm-autocomplete__input')
-    expect(input.attributes('disabled')).toBeDefined()
-  })
-
-  it('supports required field', () => {
-    const wrapper = createWrapper({ 
-      options: mockOptions, 
-      required: true,
-      label: 'Test Label'
-    })
-    
-    expect(wrapper.find('.dm-autocomplete__required').exists()).toBe(true)
-  })
-
-  it('supports custom placeholder', () => {
-    const placeholder = 'Search options...'
-    const wrapper = createWrapper({ 
-      options: mockOptions, 
-      placeholder 
-    })
-    
-    const input = wrapper.find('.dm-autocomplete__input')
-    expect(input.attributes('placeholder')).toBe(placeholder)
-  })
-
-  it('supports loading state', () => {
-    const wrapper = createWrapper({ 
-      options: mockOptions, 
-      loading: true 
-    })
-    
-    expect(wrapper.find('.dm-autocomplete__loading').exists()).toBe(true)
-  })
-
-  it('supports no results message', async () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    const input = wrapper.find('.dm-autocomplete__input')
-    
-    await input.setValue('nonexistent')
-    await input.trigger('focus')
-    
-    expect(wrapper.find('.dm-autocomplete__no-results').exists()).toBe(true)
-  })
-
-  it('closes dropdown when clicking outside', async () => {
-    const wrapper = createWrapper({ options: mockOptions })
-    const input = wrapper.find('.dm-autocomplete__input')
-    
-    await input.trigger('focus')
-    expect(wrapper.find('.dm-autocomplete__dropdown').exists()).toBe(true)
-    
-    // Simula clique fora do componente
-    document.body.click()
-    await new Promise(resolve => setTimeout(resolve, 250))
-    await wrapper.vm.$nextTick()
-    
-    expect(wrapper.find('.dm-autocomplete__dropdown').exists()).toBe(false)
-  })
-
-  it('supports multiple selection', async () => {
-    const wrapper = createWrapper({ 
-      options: mockOptions, 
-      multiple: true 
-    })
-    
-    const input = wrapper.find('.dm-autocomplete__input')
-    await input.trigger('focus')
-    
-    const option = wrapper.find('.dm-autocomplete__option')
-    await option.trigger('click')
-    
-    expect(wrapper.find('.dm-autocomplete__tag').exists()).toBe(true)
-  })
-
-  it('supports custom option template', () => {
-    const wrapper = createWrapper({ 
-      options: mockOptions.map(opt => ({ ...opt, description: `Description for ${opt.label}` }))
-    })
-    
-    expect(wrapper.find('.dm-autocomplete').exists()).toBe(true)
-  })
-})

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

@@ -1,75 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaBreadcrumb from '../DatametriaBreadcrumb.vue'
-
-describe('DatametriaBreadcrumb', () => {
-  const items = [
-    { label: 'Home', href: '/' },
-    { label: 'Products', href: '/products' },
-    { label: 'Details' }
-  ]
-
-  it('renders correctly', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    expect(wrapper.find('.dm-breadcrumb').exists()).toBe(true)
-  })
-
-  it('renders all items', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    const itemElements = wrapper.findAll('.dm-breadcrumb__item')
-    expect(itemElements).toHaveLength(3)
-  })
-
-  it('renders links for items with href', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    const links = wrapper.findAll('.dm-breadcrumb__link')
-    expect(links).toHaveLength(2)
-  })
-
-  it('renders current item without link', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    const current = wrapper.find('.dm-breadcrumb__current')
-    expect(current.exists()).toBe(true)
-    expect(current.text()).toBe('Details')
-  })
-
-  it('renders separators', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    const separators = wrapper.findAll('.dm-breadcrumb__separator')
-    expect(separators).toHaveLength(2)
-  })
-
-  it('uses custom separator', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items, separator: '>' }
-    })
-    const separator = wrapper.find('.dm-breadcrumb__separator')
-    expect(separator.text()).toBe('>')
-  })
-
-  it('emits click event', async () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    await wrapper.find('.dm-breadcrumb__link').trigger('click')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
-
-  it('applies aria-current to last item', () => {
-    const wrapper = mount(DatametriaBreadcrumb, {
-      props: { items }
-    })
-    const current = wrapper.find('.dm-breadcrumb__current')
-    expect(current.attributes('aria-current')).toBe('page')
-  })
-})

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

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaCheckbox from '../DatametriaCheckbox.vue'
-
-describe('DatametriaCheckbox', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(DatametriaCheckbox)
-    expect(wrapper.find('.datametria-checkbox').exists()).toBe(true)
-  })
-
-  it('renders label when provided', () => {
-    const wrapper = mount(DatametriaCheckbox, {
-      props: { label: 'Accept terms' }
-    })
-    expect(wrapper.find('.datametria-checkbox__label').text()).toBe('Accept terms')
-  })
-
-  it('binds checked state correctly', () => {
-    const wrapper = mount(DatametriaCheckbox, {
-      props: { modelValue: true }
-    })
-    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true)
-  })
-
-  it('emits update:modelValue on change', async () => {
-    const wrapper = mount(DatametriaCheckbox)
-    await wrapper.find('input').setValue(true)
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
-  })
-
-  it('applies disabled state', () => {
-    const wrapper = mount(DatametriaCheckbox, {
-      props: { disabled: true }
-    })
-    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
-  })
-
-  it('renders checkmark element', () => {
-    const wrapper = mount(DatametriaCheckbox)
-    expect(wrapper.find('.datametria-checkbox__checkmark').exists()).toBe(true)
-  })
-
-  it('uses CSS variables with fallbacks', () => {
-    const wrapper = mount(DatametriaCheckbox)
-    expect(wrapper.html()).toContain('datametria-checkbox')
-  })
-})

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

@@ -1,234 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaDatePicker from '../DatametriaDatePicker.vue'
-import { datametriaTheme } from '../../theme/presets'
-import { THEME_INJECTION_KEY } from '../../theme/constants'
-
-const createWrapper = (props = {}, themeProps = {}) => {
-  return mount(DatametriaDatePicker, {
-    props,
-    global: {
-      plugins: [{
-        install(app) {
-          app.provide(THEME_INJECTION_KEY, datametriaTheme)
-        }
-      }]
-    }
-  })
-}
-
-describe('DatametriaDatePicker', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('renders correctly', () => {
-    const wrapper = createWrapper()
-    expect(wrapper.find('.dm-datepicker').exists()).toBe(true)
-  })
-
-  it('applies theme colors correctly', () => {
-    const wrapper = createWrapper()
-    expect(wrapper.find('.dm-datepicker').exists()).toBe(true)
-  })
-
-  it('displays input field', () => {
-    const wrapper = createWrapper()
-    expect(wrapper.find('.dm-datepicker__input').exists()).toBe(true)
-  })
-
-  it('shows calendar when input is clicked', async () => {
-    const wrapper = createWrapper()
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('click')
-    expect(wrapper.find('.dm-datepicker__calendar').exists()).toBe(true)
-  })
-
-  it('supports initial value', () => {
-    const initialDate = '2023-12-25'
-    const wrapper = createWrapper({ modelValue: initialDate })
-    
-    const input = wrapper.find('.dm-datepicker__input')
-    expect(input.element.value).toContain('/12/2023')
-  })
-
-  it('emits update:modelValue when date is selected', async () => {
-    const wrapper = createWrapper()
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('click')
-    await wrapper.vm.$nextTick()
-    
-    const dateCells = wrapper.findAll('.dm-datepicker__day')
-    const validCell = dateCells.find(cell => 
-      !cell.classes().includes('dm-datepicker__day--disabled') &&
-      !cell.classes().includes('dm-datepicker__day--other-month')
-    )
-    
-    if (validCell) {
-      await validCell.trigger('click')
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-    }
-  })
-
-  it('supports different date formats', () => {
-    const formats = ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD']
-    
-    formats.forEach(format => {
-      const wrapper = createWrapper({ format })
-      expect(wrapper.find('.dm-datepicker').exists()).toBe(true)
-    })
-  })
-
-  it('supports min and max dates', () => {
-    const minDate = '2023-01-01'
-    const maxDate = '2023-12-31'
-    const wrapper = createWrapper({ minDate, maxDate })
-    
-    expect(wrapper.find('.dm-datepicker').exists()).toBe(true)
-  })
-
-  it('disables dates outside min/max range', async () => {
-    const wrapper = createWrapper({ 
-      min: '2023-12-10', 
-      max: '2023-12-20' 
-    })
-    
-    const input = wrapper.find('.dm-datepicker__input')
-    await input.trigger('click')
-    await wrapper.vm.$nextTick()
-    
-    const calendar = wrapper.find('.dm-datepicker__calendar')
-    expect(calendar.exists()).toBe(true)
-  })
-
-  it('supports disabled state', () => {
-    const wrapper = createWrapper({ disabled: true })
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    expect(input.attributes('disabled')).toBeDefined()
-  })
-
-  it('supports readonly state', () => {
-    const wrapper = createWrapper({ readonly: true })
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    expect(input.attributes('readonly')).toBeDefined()
-  })
-
-  it('shows error state', () => {
-    const wrapper = createWrapper({ errorMessage: 'Invalid date' })
-    
-    expect(wrapper.find('.dm-datepicker__input--error').exists()).toBe(true)
-    expect(wrapper.find('.dm-datepicker__error').text()).toBe('Invalid date')
-  })
-
-  it('supports custom placeholder', () => {
-    const placeholder = 'Select date...'
-    const wrapper = createWrapper({ placeholder })
-    
-    const input = wrapper.find('.dm-datepicker__input')
-    expect(input.attributes('placeholder')).toBe(placeholder)
-  })
-
-  it('supports label', () => {
-    const label = 'Birth Date'
-    const wrapper = createWrapper({ label })
-    
-    expect(wrapper.find('.dm-datepicker__label').text()).toBe(label)
-  })
-
-  it('supports required field', () => {
-    const wrapper = createWrapper({ required: true, label: 'Date' })
-    
-    expect(wrapper.find('.dm-datepicker__required').exists()).toBe(true)
-  })
-
-  it('navigates between months', async () => {
-    const wrapper = createWrapper()
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('click')
-    
-    const nextButton = wrapper.find('.dm-datepicker__nav-next')
-    await nextButton.trigger('click')
-    
-    expect(wrapper.find('.dm-datepicker__calendar').exists()).toBe(true)
-  })
-
-  it('navigates between years', async () => {
-    const wrapper = createWrapper()
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('click')
-    await wrapper.vm.$nextTick()
-    
-    const monthYearButton = wrapper.find('.dm-datepicker__month-year')
-    if (monthYearButton.exists()) {
-      await monthYearButton.trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.find('.dm-datepicker__year-picker').exists()).toBe(true)
-    }
-  })
-
-  it('supports keyboard navigation', async () => {
-    const wrapper = createWrapper()
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('focus')
-    await wrapper.vm.$nextTick()
-    await input.trigger('keydown', { key: 'Enter' })
-    await wrapper.vm.$nextTick()
-    
-    // Verifica se o evento foi disparado ou se o calendário abriu
-    const hasCalendar = wrapper.find('.dm-datepicker__calendar').exists()
-    const hasOpenEvent = wrapper.emitted('open')
-    // Test passes if input exists and no error thrown
-    expect(input.exists()).toBe(true)
-  })
-
-  it('closes calendar when clicking outside', async () => {
-    const wrapper = createWrapper()
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('click')
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('.dm-datepicker__calendar').exists()).toBe(true)
-    
-    // Simula clique fora
-    document.body.click()
-    await wrapper.vm.$nextTick()
-    
-    // Como o calendário pode não fechar imediatamente, verificamos se ainda existe
-    expect(wrapper.find('.dm-datepicker__calendar').exists()).toBe(false)
-  })
-
-  it('supports today button', async () => {
-    const wrapper = createWrapper({ showToday: true })
-    const input = wrapper.find('.dm-datepicker__input')
-    
-    await input.trigger('click')
-    
-    const todayButton = wrapper.find('.dm-datepicker__today')
-    expect(todayButton.exists()).toBe(true)
-    
-    await todayButton.trigger('click')
-    const datePicker = wrapper.findComponent(DatametriaDatePicker)
-    expect(datePicker.emitted('update:modelValue')).toBeTruthy()
-  })
-
-  it('supports clear button', async () => {
-    const wrapper = createWrapper({ 
-      modelValue: '2023-12-25', 
-      clearable: true 
-    })
-    
-    const clearButton = wrapper.find('.dm-datepicker__clear')
-    expect(clearButton.exists()).toBe(true)
-    
-    await clearButton.trigger('click')
-    const datePicker = wrapper.findComponent(DatametriaDatePicker)
-    expect(datePicker.emitted('update:modelValue')).toBeTruthy()
-  })
-})

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

@@ -1,90 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaProgress from '../DatametriaProgress.vue'
-
-describe('DatametriaProgress', () => {
-  it('renders with value', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 50 }
-    })
-    expect(wrapper.find('.dm-progress').exists()).toBe(true)
-    expect(wrapper.find('.dm-progress__bar').attributes('style')).toContain('width: 50%')
-  })
-
-  it('renders with label', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 75, label: 'Loading' }
-    })
-    expect(wrapper.find('.dm-progress__label').text()).toBe('Loading')
-  })
-
-  it('shows value by default', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 60, label: 'Test' }
-    })
-    expect(wrapper.find('.dm-progress__value').text()).toBe('60%')
-  })
-
-  it('hides value when showValue is false', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 60, label: 'Test', showValue: false }
-    })
-    expect(wrapper.find('.dm-progress__value').exists()).toBe(false)
-  })
-
-  it('clamps value to 0-100 range', () => {
-    const wrapper1 = mount(DatametriaProgress, { props: { value: -10 } })
-    expect(wrapper1.find('.dm-progress__bar').attributes('style')).toContain('width: 0%')
-
-    const wrapper2 = mount(DatametriaProgress, { props: { value: 150 } })
-    expect(wrapper2.find('.dm-progress__bar').attributes('style')).toContain('width: 100%')
-  })
-
-  it('renders primary variant', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 50, variant: 'primary' }
-    })
-    expect(wrapper.find('.dm-progress__bar--primary').exists()).toBe(true)
-  })
-
-  it('renders success variant', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 50, variant: 'success' }
-    })
-    expect(wrapper.find('.dm-progress__bar--success').exists()).toBe(true)
-  })
-
-  it('renders warning variant', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 50, variant: 'warning' }
-    })
-    expect(wrapper.find('.dm-progress__bar--warning').exists()).toBe(true)
-  })
-
-  it('renders error variant', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 50, variant: 'error' }
-    })
-    expect(wrapper.find('.dm-progress__bar--error').exists()).toBe(true)
-  })
-
-  it('has correct ARIA attributes', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 75, label: 'Progress' }
-    })
-    const track = wrapper.find('.dm-progress__track')
-    expect(track.attributes('role')).toBe('progressbar')
-    expect(track.attributes('aria-valuenow')).toBe('75')
-    expect(track.attributes('aria-valuemin')).toBe('0')
-    expect(track.attributes('aria-valuemax')).toBe('100')
-    expect(track.attributes('aria-label')).toBe('Progress')
-  })
-
-  it('works without ThemeProvider', () => {
-    const wrapper = mount(DatametriaProgress, {
-      props: { value: 80, label: 'Test', variant: 'success' }
-    })
-    expect(wrapper.find('.dm-progress__bar--success').exists()).toBe(true)
-    expect(wrapper.find('.dm-progress__bar').attributes('style')).toContain('width: 80%')
-  })
-})