@datametria/vue-components 1.1.3 → 2.0.1

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

@@ -0,0 +1,305 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaPasswordInput from '../DatametriaPasswordInput.vue'
+
+describe('DatametriaPasswordInput', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        label: 'Senha'
+      }
+    })
+    expect(wrapper.find('.datametria-password-input').exists()).toBe(true)
+    expect(wrapper.find('label').text()).toContain('Senha')
+  })
+
+  it('toggles password visibility', async () => {
+    const wrapper = mount(DatametriaPasswordInput)
+    const input = wrapper.find('input')
+    const toggleButton = wrapper.find('.datametria-password-input__toggle')
+
+    expect(input.attributes('type')).toBe('password')
+
+    await toggleButton.trigger('click')
+    expect(input.attributes('type')).toBe('text')
+
+    await toggleButton.trigger('click')
+    expect(input.attributes('type')).toBe('password')
+  })
+
+  it('validates password strength', async () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        modelValue: '',
+        showStrength: true
+      }
+    })
+
+    // Weak password
+    await wrapper.setProps({ modelValue: 'abc' })
+    expect(wrapper.find('.datametria-password-input__strength-text--weak').exists()).toBe(true)
+
+    // Strong password
+    await wrapper.setProps({ modelValue: 'Abc123!@#' })
+    expect(wrapper.find('.datametria-password-input__strength-text--strong').exists()).toBe(true)
+  })
+
+  it('shows requirements when focused', async () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        showRequirements: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    
+    expect(wrapper.find('.datametria-password-input__requirements').exists()).toBe(false)
+
+    await input.trigger('focus')
+    expect(wrapper.find('.datametria-password-input__requirements').exists()).toBe(true)
+
+    await input.trigger('blur')
+    expect(wrapper.find('.datametria-password-input__requirements').exists()).toBe(false)
+  })
+
+  it('validates all requirements', async () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        modelValue: 'Abc123!@#',
+        showRequirements: true
+      }
+    })
+
+    await wrapper.find('input').trigger('focus')
+
+    const requirements = wrapper.findAll('.datametria-password-input__requirements-list li')
+    expect(requirements).toHaveLength(5)
+    
+    // All requirements should be valid
+    requirements.forEach(req => {
+      expect(req.classes()).toContain('valid')
+    })
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(DatametriaPasswordInput)
+    const input = wrapper.find('input')
+
+    await input.setValue('test123')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test123'])
+  })
+
+  it('emits strength-change event', async () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    await wrapper.setProps({ modelValue: 'Abc123!@#' })
+    await wrapper.vm.$nextTick()
+    
+    expect(wrapper.emitted('strength-change')).toBeTruthy()
+    expect(wrapper.emitted('strength-change')?.[0]?.[0]).toBe(100)
+  })
+
+  it('shows error message', () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        errorMessage: 'Senha inválida'
+      }
+    })
+
+    expect(wrapper.find('.datametria-password-input__error').text()).toBe('Senha inválida')
+    expect(wrapper.find('input').classes()).toContain('datametria-password-input__field--error')
+  })
+
+  it('shows help text', () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        helpText: 'Use uma senha forte'
+      }
+    })
+
+    expect(wrapper.find('.datametria-password-input__help').text()).toBe('Use uma senha forte')
+  })
+
+  it('marks required field', () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        label: 'Senha',
+        required: true
+      }
+    })
+
+    expect(wrapper.find('.datametria-password-input__required').exists()).toBe(true)
+    expect(wrapper.find('input').attributes('required')).toBeDefined()
+  })
+
+  it('disables input when disabled prop is true', () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        disabled: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.attributes('disabled')).toBeDefined()
+    expect(input.classes()).toContain('datametria-password-input__field--disabled')
+  })
+
+  it('sets correct autocomplete attribute', () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        autocomplete: 'new-password'
+      }
+    })
+
+    expect(wrapper.find('input').attributes('autocomplete')).toBe('new-password')
+  })
+
+  it('has proper ARIA attributes', async () => {
+    const wrapper = mount(DatametriaPasswordInput, {
+      props: {
+        errorMessage: 'Senha inválida',
+        showRequirements: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    
+    expect(input.attributes('aria-invalid')).toBe('true')
+    
+    await input.trigger('focus')
+    expect(input.attributes('aria-describedby')).toBeTruthy()
+  })
+
+  it('toggle button has proper accessibility', () => {
+    const wrapper = mount(DatametriaPasswordInput)
+    const toggleButton = wrapper.find('.datametria-password-input__toggle')
+
+    expect(toggleButton.attributes('aria-label')).toBe('Mostrar senha')
+    expect(toggleButton.attributes('type')).toBe('button')
+    expect(toggleButton.attributes('tabindex')).toBe('-1')
+  })
+
+  describe('CSS Variables Integration', () => {
+    it('uses semantic color tokens for strength indicators', async () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          modelValue: 'Abc123!@#',
+          showStrength: true
+        }
+      })
+
+      expect(wrapper.find('.datametria-password-input__strength-fill--strong').exists()).toBe(true)
+      expect(wrapper.find('.datametria-password-input__strength-text--strong').exists()).toBe(true)
+    })
+
+    it('uses error token for error states', () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          errorMessage: 'Error'
+        }
+      })
+
+      expect(wrapper.find('.datametria-password-input__field--error').exists()).toBe(true)
+      expect(wrapper.find('.datametria-password-input__error').exists()).toBe(true)
+    })
+
+    it('uses warning token for caps lock warning', async () => {
+      const wrapper = mount(DatametriaPasswordInput)
+      const input = wrapper.find('input')
+
+      const event = new KeyboardEvent('keyup', { key: 'A' })
+      Object.defineProperty(event, 'getModifierState', {
+        value: vi.fn(() => true)
+      })
+      
+      await input.element.dispatchEvent(event)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.datametria-password-input__warning').exists()).toBe(true)
+    })
+
+    it('uses success token for valid requirements', async () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          modelValue: 'Abc123!@#',
+          showRequirements: true
+        }
+      })
+
+      await wrapper.find('input').trigger('focus')
+      const validItems = wrapper.findAll('.datametria-password-input__requirements-list li.valid')
+      expect(validItems.length).toBe(5)
+    })
+
+    it('uses spacing tokens consistently', () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          label: 'Password',
+          showRequirements: true
+        }
+      })
+
+      expect(wrapper.find('.datametria-password-input').exists()).toBe(true)
+      expect(wrapper.find('.datametria-password-input__field').exists()).toBe(true)
+    })
+
+    it('uses typography tokens for text elements', () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          label: 'Password',
+          helpText: 'Help text'
+        }
+      })
+
+      expect(wrapper.find('.datametria-password-input__label').exists()).toBe(true)
+      expect(wrapper.find('.datametria-password-input__help').exists()).toBe(true)
+    })
+
+    it('uses transition tokens for animations', async () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          modelValue: '',
+          showStrength: true
+        }
+      })
+
+      await wrapper.setProps({ modelValue: 'test' })
+      expect(wrapper.find('.datametria-password-input__strength-fill').exists()).toBe(true)
+    })
+  })
+
+  describe('Backward Compatibility', () => {
+    it('works without ThemeProvider', () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          label: 'Password',
+          modelValue: 'Abc123!@#',
+          showStrength: true,
+          showRequirements: true
+        }
+      })
+
+      expect(wrapper.find('.datametria-password-input').exists()).toBe(true)
+      expect(wrapper.find('.datametria-password-input__strength').exists()).toBe(true)
+    })
+
+    it('maintains original visual appearance with fallback values', async () => {
+      const wrapper = mount(DatametriaPasswordInput, {
+        props: {
+          modelValue: 'weak',
+          showStrength: true
+        }
+      })
+
+      expect(wrapper.find('.datametria-password-input__strength-fill--weak').exists()).toBe(true)
+
+      await wrapper.setProps({ modelValue: 'Abc123!@#' })
+      expect(wrapper.find('.datametria-password-input__strength-fill--strong').exists()).toBe(true)
+    })
+  })
+})

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

@@ -0,0 +1,90 @@
+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%')
+  })
+})

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

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaRadio from '../DatametriaRadio.vue'
+
+describe('DatametriaRadio', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1' }
+    })
+    expect(wrapper.find('.dm-radio').exists()).toBe(true)
+  })
+
+  it('renders label when provided', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', label: 'Option 1' }
+    })
+    expect(wrapper.find('.dm-radio__text').text()).toBe('Option 1')
+  })
+
+  it('checks radio when modelValue matches value', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', modelValue: 'option1' }
+    })
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue on change', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1' }
+    })
+    await wrapper.find('input').trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['option1'])
+  })
+
+  it('applies disabled state', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', disabled: true }
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('does not emit when disabled', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', disabled: true }
+    })
+    await wrapper.find('input').trigger('change')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('shows error message when provided', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', name: 'test', error: 'Error text' }
+    })
+    expect(wrapper.find('.dm-radio__error').text()).toBe('Error text')
+  })
+
+  it('applies name attribute', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', name: 'radio-group' }
+    })
+    expect(wrapper.find('input').attributes('name')).toBe('radio-group')
+  })
+
+  it('applies aria-label', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1', ariaLabel: 'Select option' }
+    })
+    expect(wrapper.find('input').attributes('aria-label')).toBe('Select option')
+  })
+
+  it('uses CSS variables with fallbacks', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { value: 'option1' }
+    })
+    expect(wrapper.html()).toContain('dm-radio')
+  })
+})

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