@datametria/vue-components/src/components/__tests__/DatametriaPasswordInput.test.js

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

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