@datametria/vue-components 1.2.0 → 2.0.1

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

@@ -0,0 +1,203 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaNavbar from '../DatametriaNavbar.vue'
+
+describe('DatametriaNavbar', () => {
+  describe('Renderização', () => {
+    it('renderiza corretamente', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar').exists()).toBe(true)
+    })
+
+    it('renderiza brand text', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { brand: 'DATAMETRIA' }
+      })
+      expect(wrapper.text()).toContain('DATAMETRIA')
+    })
+
+    it('renderiza slot brand customizado', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { brand: '<div class="custom-brand">Custom</div>' }
+      })
+      expect(wrapper.find('.custom-brand').exists()).toBe(true)
+    })
+
+    it('renderiza slot menu', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div class="menu-items">Items</div>' }
+      })
+      expect(wrapper.find('.menu-items').exists()).toBe(true)
+    })
+
+    it('renderiza slot actions', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { actions: '<button>Login</button>' }
+      })
+      expect(wrapper.find('.dm-navbar__actions').exists()).toBe(true)
+    })
+  })
+
+  describe('Variants', () => {
+    it('aplica variant light por padrão', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--light')
+    })
+
+    it('aplica variant dark', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { variant: 'dark' }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--dark')
+    })
+
+    it('aplica variant primary', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { variant: 'primary' }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--primary')
+    })
+
+    it('aplica variant transparent', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { variant: 'transparent' }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--transparent')
+    })
+  })
+
+  describe('Props', () => {
+    it('aceita sticky', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { sticky: true }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--sticky')
+    })
+
+    it('aceita transparent', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { transparent: true }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--transparent')
+    })
+
+    it('aceita bordered', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { bordered: true }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--bordered')
+    })
+
+    it('aceita ariaLabel customizado', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { ariaLabel: 'Custom navigation' }
+      })
+      expect(wrapper.find('nav').attributes('aria-label')).toBe('Custom navigation')
+    })
+  })
+
+  describe('Mobile Menu', () => {
+    it('mostra toggle quando há slot menu', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__toggle').exists()).toBe(true)
+    })
+
+    it('não mostra toggle quando não há slot menu', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar__toggle').exists()).toBe(false)
+    })
+
+    it('abre menu ao clicar no toggle', async () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      
+      const toggle = wrapper.find('.dm-navbar__toggle')
+      await toggle.trigger('click')
+      
+      expect(wrapper.find('.dm-navbar__menu').classes()).toContain('dm-navbar__menu--open')
+    })
+
+    it('fecha menu ao clicar novamente no toggle', async () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      
+      const toggle = wrapper.find('.dm-navbar__toggle')
+      await toggle.trigger('click')
+      await toggle.trigger('click')
+      
+      expect(wrapper.find('.dm-navbar__menu').classes()).not.toContain('dm-navbar__menu--open')
+    })
+  })
+
+  describe('Acessibilidade', () => {
+    it('tem role navigation', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('nav').attributes('role')).toBe('navigation')
+    })
+
+    it('tem aria-label padrão', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('nav').attributes('aria-label')).toBe('Main navigation')
+    })
+
+    it('toggle tem aria-expanded', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-expanded')).toBe('false')
+    })
+
+    it('toggle atualiza aria-expanded quando aberto', async () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      
+      await wrapper.find('.dm-navbar__toggle').trigger('click')
+      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-expanded')).toBe('true')
+    })
+
+    it('toggle tem aria-controls', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-controls')).toBe('navbar-menu')
+    })
+
+    it('menu tem id correto', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__menu').attributes('id')).toBe('navbar-menu')
+    })
+  })
+
+  describe('Validação', () => {
+    it('valida variant inválido em desenvolvimento', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const originalEnv = process.env.NODE_ENV
+      process.env.NODE_ENV = 'development'
+
+      mount(DatametriaNavbar, {
+        props: { variant: 'invalid' as any }
+      })
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[DatametriaNavbar] Invalid variant "invalid"')
+      )
+
+      process.env.NODE_ENV = originalEnv
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('usa CSS Variables padronizadas', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar').exists()).toBe(true)
+    })
+  })
+})

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