@datametria/vue-components/src/components/__tests__/DatametriaInput.test.ts

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 } from 'vitest'
import { mount } from '@vue/test-utils'
import DatametriaInput from '../DatametriaInput.vue'

describe('DatametriaInput', () => {
  it('renders correctly', () => {
    const wrapper = mount(DatametriaInput)
    expect(wrapper.find('.datametria-input').exists()).toBe(true)
  })

  it('renders label when provided', () => {
    const wrapper = mount(DatametriaInput, {
      props: { label: 'Test Label' }
    })
    expect(wrapper.find('.datametria-input__label').text()).toContain('Test Label')
  })

  it('shows required asterisk when required', () => {
    const wrapper = mount(DatametriaInput, {
      props: { label: 'Test', required: true }
    })
    expect(wrapper.find('.datametria-input__required').exists()).toBe(true)
  })

  it('binds modelValue correctly', () => {
    const wrapper = mount(DatametriaInput, {
      props: { modelValue: 'test value' }
    })
    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('test value')
  })

  it('emits update:modelValue on input', async () => {
    const wrapper = mount(DatametriaInput)
    const input = wrapper.find('input')
    await input.setValue('new value')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
  })

  it('applies disabled state', () => {
    const wrapper = mount(DatametriaInput, {
      props: { disabled: true }
    })
    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
  })

  it('shows error message when provided', () => {
    const wrapper = mount(DatametriaInput, {
      props: { errorMessage: 'Error text' }
    })
    expect(wrapper.find('.datametria-input__error').text()).toBe('Error text')
  })

  it('applies error class when error exists', () => {
    const wrapper = mount(DatametriaInput, {
      props: { errorMessage: 'Error' }
    })
    expect(wrapper.find('.datametria-input__field--error').exists()).toBe(true)
  })

  it('applies placeholder', () => {
    const wrapper = mount(DatametriaInput, {
      props: { placeholder: 'Enter text' }
    })
    expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
  })

  it('uses CSS variables with fallbacks', () => {
    const wrapper = mount(DatametriaInput)
    const styles = wrapper.find('.datametria-input').attributes('style')
    expect(wrapper.html()).toContain('datametria-input')
  })
})