@datametria/vue-components 2.3.1 → 2.4.0

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

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