@datametria/vue-components/src/components/__tests__/DatametriaSelect.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 DatametriaSelect from '../DatametriaSelect.vue'

describe('DatametriaSelect', () => {
  const options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' }
  ]

  it('renders correctly', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options }
    })
    expect(wrapper.find('.datametria-select').exists()).toBe(true)
  })

  it('renders label when provided', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options, label: 'Select Label' }
    })
    expect(wrapper.find('.datametria-select__label').text()).toContain('Select Label')
  })

  it('shows required indicator', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options, label: 'Test', required: true }
    })
    expect(wrapper.find('.datametria-select__required').exists()).toBe(true)
  })

  it('renders all options', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options }
    })
    const optionElements = wrapper.findAll('option')
    expect(optionElements.length).toBeGreaterThanOrEqual(3)
  })

  it('renders placeholder option', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options, placeholder: 'Choose option' }
    })
    const firstOption = wrapper.find('option')
    expect(firstOption.text()).toBe('Choose option')
  })

  it('binds modelValue correctly', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options, modelValue: '2' }
    })
    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('2')
  })

  it('emits update:modelValue on change', async () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options }
    })
    await wrapper.find('select').setValue('2')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2'])
  })

  it('shows error message', () => {
    const wrapper = mount(DatametriaSelect, {
      props: { options, errorMessage: 'Error text' }
    })
    expect(wrapper.find('.datametria-select__error').text()).toBe('Error text')
  })

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