nuxt-app/app/components/register/__tests__/PasswordInput.test.ts

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import PasswordInput from '../PasswordInput.vue'

describe('PasswordInput', () => {
  it('renders with type=password by default', () => {
    const wrapper = mount(PasswordInput, {
      props: { modelValue: '' },
      global: {
        stubs: {
          UInput: {
            template: '<input :type="type" :disabled="disabled" :value="modelValue" />',
            props: ['type', 'disabled', 'modelValue', 'placeholder'],
          },
          UButton: {
            template: '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
            props: ['disabled', 'icon', 'variant', 'size'],
            emits: ['click'],
          },
          UFormField: {
            template: '<div><span>{{ label }}</span><slot /></div>',
            props: ['label', 'required'],
          },
        },
      },
    })
    const input = wrapper.find('input')
    expect(input.attributes('type')).toBe('password')
  })

  it('toggles to type=text when button clicked', async () => {
    const wrapper = mount(PasswordInput, {
      props: { modelValue: '' },
      global: {
        stubs: {
          UInput: {
            template: '<input :type="type" :disabled="disabled" :value="modelValue" />',
            props: ['type', 'disabled', 'modelValue', 'placeholder'],
          },
          UButton: {
            template: '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
            props: ['disabled', 'icon', 'variant', 'size'],
            emits: ['click'],
          },
          UFormField: {
            template: '<div><span>{{ label }}</span><slot /></div>',
            props: ['label', 'required'],
          },
        },
      },
    })
    const btn = wrapper.find('button')
    await btn.trigger('click')
    expect(wrapper.find('input').attributes('type')).toBe('text')
  })

  it('renders label when provided', () => {
    const wrapper = mount(PasswordInput, {
      props: { modelValue: '', label: 'Test Label' },
      global: {
        stubs: {
          UInput: {
            template: '<input :type="type" :disabled="disabled" :value="modelValue" />',
            props: ['type', 'disabled', 'modelValue', 'placeholder'],
          },
          UButton: {
            template: '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
            props: ['disabled', 'icon', 'variant', 'size'],
            emits: ['click'],
          },
          UFormField: {
            template: '<div><span>{{ label }}</span><slot /></div>',
            props: ['label', 'required'],
          },
        },
      },
    })
    expect(wrapper.text()).toContain('Test Label')
  })

  it('disables input when disabled prop is true', () => {
    const wrapper = mount(PasswordInput, {
      props: { modelValue: '', disabled: true },
      global: {
        stubs: {
          UInput: {
            template: '<input :type="type" :disabled="disabled" :value="modelValue" />',
            props: ['type', 'disabled', 'modelValue', 'placeholder'],
          },
          UButton: {
            template: '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
            props: ['disabled', 'icon', 'variant', 'size'],
            emits: ['click'],
          },
          UFormField: {
            template: '<div><span>{{ label }}</span><slot /></div>',
            props: ['label', 'required'],
          },
        },
      },
    })
    expect(wrapper.find('input').element.disabled).toBe(true)
  })
})