@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/__tests__/DatametriaRadio.test.ts

@@ -0,0 +1,195 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaRadio from '../DatametriaRadio.vue'
+import DatametriaRadioGroup from '../DatametriaRadioGroup.vue'
+
+describe('DatametriaRadio', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { label: 'Test Radio', modelValue: 'test' }
+    })
+    expect(wrapper.find('.datametria-radio').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Test Radio')
+  })
+
+  it('renders with slot content', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 'test' },
+      slots: { default: 'Slot Content' }
+    })
+    expect(wrapper.text()).toContain('Slot Content')
+  })
+
+  it('emits update:modelValue when clicked', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 'option1' }
+    })
+
+    const input = wrapper.find('input[type="radio"]')
+    await input.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['option1'])
+    expect(wrapper.emitted('change')?.[0]).toEqual(['option1'])
+  })
+
+  it('handles disabled state', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { disabled: true, modelValue: 'test' }
+    })
+
+    expect(wrapper.find('.datametria-radio').classes()).toContain('is-disabled')
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+
+    const input = wrapper.find('input')
+    await input.trigger('change')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('exposes inputRef', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 'test' }
+    })
+    expect(wrapper.vm.inputRef).toBeDefined()
+  })
+
+  it('renders without label when not provided', () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 'test' }
+    })
+    expect(wrapper.find('.datametria-radio__label').exists()).toBe(false)
+  })
+
+  it('works within radio group', async () => {
+    const wrapper = mount(DatametriaRadioGroup, {
+      props: {
+        modelValue: 'option1',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value })
+      },
+      slots: {
+        default: `
+          <DatametriaRadio modelValue="option1" label="Option 1" />
+          <DatametriaRadio modelValue="option2" label="Option 2" />
+        `
+      },
+      global: {
+        components: { DatametriaRadio }
+      }
+    })
+
+    const radios = wrapper.findAllComponents(DatametriaRadio)
+    expect(radios).toHaveLength(2)
+    expect(radios[0].classes()).toContain('is-checked')
+    expect(radios[1].classes()).not.toContain('is-checked')
+  })
+
+  it('updates group value when radio is selected', async () => {
+    const wrapper = mount(DatametriaRadioGroup, {
+      props: {
+        modelValue: 'option1',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value })
+      },
+      slots: {
+        default: `
+          <DatametriaRadio modelValue="option1" label="Option 1" />
+          <DatametriaRadio modelValue="option2" label="Option 2" />
+        `
+      },
+      global: {
+        components: { DatametriaRadio }
+      }
+    })
+
+    const radios = wrapper.findAllComponents(DatametriaRadio)
+    const input = radios[1].find('input')
+    await input.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['option2'])
+  })
+
+  it('only one radio can be selected in group', async () => {
+    const wrapper = mount(DatametriaRadioGroup, {
+      props: {
+        modelValue: 'option1',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value })
+      },
+      slots: {
+        default: `
+          <DatametriaRadio modelValue="option1" label="Option 1" />
+          <DatametriaRadio modelValue="option2" label="Option 2" />
+          <DatametriaRadio modelValue="option3" label="Option 3" />
+        `
+      },
+      global: {
+        components: { DatametriaRadio }
+      }
+    })
+
+    await wrapper.setProps({ modelValue: 'option2' })
+    await wrapper.vm.$nextTick()
+
+    const radios = wrapper.findAllComponents(DatametriaRadio)
+    expect(radios[0].classes()).not.toContain('is-checked')
+    expect(radios[1].classes()).toContain('is-checked')
+    expect(radios[2].classes()).not.toContain('is-checked')
+  })
+
+  it('emits change event', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 'test' }
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('change')
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')?.[0]).toEqual(['test'])
+  })
+
+  it('applies checked class when selected in group', async () => {
+    const wrapper = mount(DatametriaRadioGroup, {
+      props: { modelValue: 'option1' },
+      slots: {
+        default: `<DatametriaRadio modelValue="option1" label="Option 1" />`
+      },
+      global: {
+        components: { DatametriaRadio }
+      }
+    })
+
+    const radio = wrapper.findComponent(DatametriaRadio)
+    expect(radio.classes()).toContain('is-checked')
+  })
+
+  it('supports string values', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 'string-value' }
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['string-value'])
+  })
+
+  it('supports number values', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: 123 }
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([123])
+  })
+
+  it('supports boolean values', async () => {
+    const wrapper = mount(DatametriaRadio, {
+      props: { modelValue: true }
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+})

package/src/components/__tests__/DatametriaSelect.test.ts

@@ -1,77 +1,77 @@
-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()
-  })
-})
+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()
+  })
+})