visua-vue/test/VInput.spec.ts

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import VInput from '../src/components/input/VInput.vue'

const globalConfig = {
  global: {
    mocks: {
      $primevue: {
        config: {}
      }
    },
    stubs: {
      VHint: true,
      VDivider: true,
      Password: true,
      Textarea: true,
      VLabel: true,
    }
  }
}

const noStubVLabelConfig = {
  ...globalConfig.global,
  stubs: {
    ...globalConfig.global.stubs,
    VLabel: false,
  }
}

const noStubTextareaConfig = {
  ...globalConfig.global,
  stubs: {
    ...globalConfig.global.stubs,
    Textarea: false,
  }
}

const noStubPasswordConfig = {
  ...globalConfig.global,
  stubs: {
    ...globalConfig.global.stubs,
    Textarea: false,
  }
}

describe('VInput.vue', () => {
  it('renders InputText by default', () => {
    const wrapper = mount(VInput, globalConfig)
    expect(wrapper.find('input').exists()).toBe(true)
  })

  it('renders VLabel when labelVisible is true and passes the label prop', () => {
    const wrapper = mount(VInput, {
      props: {
        labelVisible: true,
        label: 'Username'
      },
      global: noStubVLabelConfig
    })

    const labelComponent = wrapper.findComponent({ name: 'VLabel' })
    expect(labelComponent.exists()).toBe(true)
    expect(labelComponent.props('label')).toBe('Username')
    expect(wrapper.text()).toContain('Username')
  })

  it('does not render VLabel when labelVisible is false', () => {
    const wrapper = mount(VInput, {
      props: {
        labelVisible: false,
        label: 'Username'
      },
      global: noStubVLabelConfig
    })

    const labelComponent = wrapper.findComponent({ name: 'VLabel' })
    expect(labelComponent.exists()).toBe(false)
  })

  // Test : update:modelValue from InputText
  it('emits update:modelValue when input value changes', async () => {
    const wrapper = mount(VInput, {
      props: {
        modelValue: ''
      },
      global: globalConfig.global
    })

    const input = wrapper.find('input')
    await input.setValue('new value')

    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
  })

  // Test : value-change from InputText
  it('emits value-change when InputText emits valueChange', async () => {
    const wrapper = mount(VInput, {
      props: {
        modelValue: ''
      },
      global: globalConfig.global
    })

    const inputText = wrapper.findComponent({ name: 'InputText' })
    inputText.vm.$emit('valueChange', 'changed')

    await wrapper.vm.$nextTick()

    expect(wrapper.emitted('value-change')).toBeTruthy()
    expect(wrapper.emitted('value-change')![0]).toEqual(['changed'])
  })

    // Test : value-change from Textarea
  it('emits value-change when Textarea emits valueChange', async () => {
    const wrapper = mount(VInput, {
      props: {
        isTextarea: true,
        modelValue: ''
      },
      global: noStubTextareaConfig
    })

    const textarea = wrapper.findComponent({ name: 'Textarea' })
    textarea.vm.$emit('valueChange', 'textarea changed')

    await wrapper.vm.$nextTick()

    expect(wrapper.emitted('value-change')).toBeTruthy()
    expect(wrapper.emitted('value-change')![0]).toEqual(['textarea changed'])
  })

  // Test : value-change from Password
  it('emits value-change when Password emits valueChange', async () => {
    const wrapper = mount(VInput, {
      props: {
        isPassword: true,
        modelValue: ''
      },
      global: noStubPasswordConfig
    })

    const password = wrapper.findComponent({ name: 'Password' })
    password.vm.$emit('valueChange', 'password changed')

    await wrapper.vm.$nextTick()

    expect(wrapper.emitted('value-change')).toBeTruthy()
    expect(wrapper.emitted('value-change')![0]).toEqual(['password changed'])
  })

  // Test : update:modelValue from Password
  it('emits update:modelValue when Password value changes', async () => {
    const wrapper = mount(VInput, {
      props: {
        isPassword: true,
        modelValue: ''
      },
      global: noStubPasswordConfig
    })

    const password = wrapper.findComponent({ name: 'Password' })
    password.vm.$emit('update:modelValue', 'new-password')

    await wrapper.vm.$nextTick()

    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new-password'])
  })

  // Test : change from Password
  it('emits change when Password emits change', async () => {
    const wrapper = mount(VInput, {
      props: {
        isPassword: true,
        modelValue: ''
      },
      global: noStubPasswordConfig
    })

    const password = wrapper.findComponent({ name: 'Password' })
    password.vm.$emit('change', 'password-changed')

    await wrapper.vm.$nextTick()

    expect(wrapper.emitted('change')).toBeTruthy()
    expect(wrapper.emitted('change')![0]).toEqual(['password-changed'])
  })

})