@datametria/vue-components 2.3.0 → 2.4.0

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

@@ -1,201 +1,201 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaCard from '../DatametriaCard.vue'
-
-describe('DatametriaCard', () => {
-  describe('Rendering', () => {
-    it('renders correctly with default props', () => {
-      const wrapper = mount(DatametriaCard)
-      expect(wrapper.find('.datametria-card').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
-    })
-
-    it('renders title when provided', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Test Card' }
-      })
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__title').text()).toBe('Test Card')
-    })
-
-    it('renders default slot content', () => {
-      const wrapper = mount(DatametriaCard, {
-        slots: {
-          default: '<p>Card content</p>'
-        }
-      })
-      expect(wrapper.find('.datametria-card__content').html()).toContain('Card content')
-    })
-
-    it('renders header slot when provided', () => {
-      const wrapper = mount(DatametriaCard, {
-        slots: {
-          header: '<div class="custom-header">Custom Header</div>'
-        }
-      })
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
-      expect(wrapper.find('.custom-header').text()).toBe('Custom Header')
-    })
-
-    it('renders footer slot when provided', () => {
-      const wrapper = mount(DatametriaCard, {
-        slots: {
-          footer: '<div class="custom-footer">Footer</div>'
-        }
-      })
-      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
-      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
-    })
-
-    it('does not render header when no title or header slot', () => {
-      const wrapper = mount(DatametriaCard)
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(false)
-    })
-
-    it('does not render footer when no footer slot', () => {
-      const wrapper = mount(DatametriaCard)
-      expect(wrapper.find('.datametria-card__footer').exists()).toBe(false)
-    })
-  })
-
-  describe('Padding', () => {
-    it('applies padding by default', () => {
-      const wrapper = mount(DatametriaCard)
-      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(false)
-    })
-
-    it('removes padding when padding prop is false', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { padding: false }
-      })
-      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(true)
-    })
-
-    it('applies padding when padding prop is true', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { padding: true }
-      })
-      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(false)
-    })
-  })
-
-  describe('CSS Variables', () => {
-    it('uses CSS variables for background color', () => {
-      const wrapper = mount(DatametriaCard)
-      const card = wrapper.find('.datametria-card')
-      const styles = card.element.style.cssText || window.getComputedStyle(card.element).cssText
-      
-      // Component should use CSS variables in its styles
-      expect(wrapper.html()).toContain('datametria-card')
-    })
-
-    it('uses CSS variables for border radius', () => {
-      const wrapper = mount(DatametriaCard)
-      expect(wrapper.find('.datametria-card').exists()).toBe(true)
-    })
-
-    it('uses CSS variables for shadows', () => {
-      const wrapper = mount(DatametriaCard)
-      expect(wrapper.find('.datametria-card').exists()).toBe(true)
-    })
-
-    it('uses CSS variables for spacing', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Test' }
-      })
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
-    })
-
-    it('uses CSS variables for typography', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Test' }
-      })
-      expect(wrapper.find('.datametria-card__title').exists()).toBe(true)
-    })
-
-    it('uses CSS variables for border colors', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Test' },
-        slots: { footer: '<div>Footer</div>' }
-      })
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
-    })
-  })
-
-  describe('Complex Scenarios', () => {
-    it('renders complete card with all sections', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Complete Card' },
-        slots: {
-          default: '<p>Main content</p>',
-          footer: '<button>Action</button>'
-        }
-      })
-      
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__title').text()).toBe('Complete Card')
-      expect(wrapper.html()).toContain('Main content')
-      expect(wrapper.html()).toContain('Action')
-    })
-
-    it('renders card with custom header and footer', () => {
-      const wrapper = mount(DatametriaCard, {
-        slots: {
-          header: '<div class="custom">Custom Header</div>',
-          default: '<p>Content</p>',
-          footer: '<div class="custom">Custom Footer</div>'
-        }
-      })
-      
-      expect(wrapper.findAll('.custom')).toHaveLength(2)
-      expect(wrapper.html()).toContain('Custom Header')
-      expect(wrapper.html()).toContain('Custom Footer')
-    })
-
-    it('renders card without padding and with all sections', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { 
-          title: 'No Padding Card',
-          padding: false 
-        },
-        slots: {
-          default: '<table>Table content</table>',
-          footer: '<div>Footer</div>'
-        }
-      })
-      
-      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(true)
-      expect(wrapper.html()).toContain('Table content')
-    })
-  })
-
-  describe('Backward Compatibility', () => {
-    it('works without ThemeProvider', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Test' },
-        slots: {
-          default: '<p>Content</p>',
-          footer: '<div>Footer</div>'
-        }
-      })
-      
-      expect(wrapper.find('.datametria-card').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
-    })
-
-    it('maintains original visual appearance', () => {
-      const wrapper = mount(DatametriaCard, {
-        props: { title: 'Original Style' }
-      })
-      
-      const card = wrapper.find('.datametria-card')
-      expect(card.exists()).toBe(true)
-      expect(wrapper.find('.datametria-card__title').text()).toBe('Original Style')
-    })
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaCard from '../DatametriaCard.vue'
+
+describe('DatametriaCard', () => {
+  describe('Rendering', () => {
+    it('renders correctly with default props', () => {
+      const wrapper = mount(DatametriaCard)
+      expect(wrapper.find('.datametria-card').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
+    })
+
+    it('renders title when provided', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Test Card' }
+      })
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__title').text()).toBe('Test Card')
+    })
+
+    it('renders default slot content', () => {
+      const wrapper = mount(DatametriaCard, {
+        slots: {
+          default: '<p>Card content</p>'
+        }
+      })
+      expect(wrapper.find('.datametria-card__content').html()).toContain('Card content')
+    })
+
+    it('renders header slot when provided', () => {
+      const wrapper = mount(DatametriaCard, {
+        slots: {
+          header: '<div class="custom-header">Custom Header</div>'
+        }
+      })
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
+      expect(wrapper.find('.custom-header').text()).toBe('Custom Header')
+    })
+
+    it('renders footer slot when provided', () => {
+      const wrapper = mount(DatametriaCard, {
+        slots: {
+          footer: '<div class="custom-footer">Footer</div>'
+        }
+      })
+      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
+      expect(wrapper.find('.custom-footer').text()).toBe('Footer')
+    })
+
+    it('does not render header when no title or header slot', () => {
+      const wrapper = mount(DatametriaCard)
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(false)
+    })
+
+    it('does not render footer when no footer slot', () => {
+      const wrapper = mount(DatametriaCard)
+      expect(wrapper.find('.datametria-card__footer').exists()).toBe(false)
+    })
+  })
+
+  describe('Padding', () => {
+    it('applies padding by default', () => {
+      const wrapper = mount(DatametriaCard)
+      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(false)
+    })
+
+    it('removes padding when padding prop is false', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { padding: false }
+      })
+      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(true)
+    })
+
+    it('applies padding when padding prop is true', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { padding: true }
+      })
+      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(false)
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('uses CSS variables for background color', () => {
+      const wrapper = mount(DatametriaCard)
+      const card = wrapper.find('.datametria-card')
+      const styles = card.element.style.cssText || window.getComputedStyle(card.element).cssText
+      
+      // Component should use CSS variables in its styles
+      expect(wrapper.html()).toContain('datametria-card')
+    })
+
+    it('uses CSS variables for border radius', () => {
+      const wrapper = mount(DatametriaCard)
+      expect(wrapper.find('.datametria-card').exists()).toBe(true)
+    })
+
+    it('uses CSS variables for shadows', () => {
+      const wrapper = mount(DatametriaCard)
+      expect(wrapper.find('.datametria-card').exists()).toBe(true)
+    })
+
+    it('uses CSS variables for spacing', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Test' }
+      })
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
+    })
+
+    it('uses CSS variables for typography', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Test' }
+      })
+      expect(wrapper.find('.datametria-card__title').exists()).toBe(true)
+    })
+
+    it('uses CSS variables for border colors', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Test' },
+        slots: { footer: '<div>Footer</div>' }
+      })
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
+    })
+  })
+
+  describe('Complex Scenarios', () => {
+    it('renders complete card with all sections', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Complete Card' },
+        slots: {
+          default: '<p>Main content</p>',
+          footer: '<button>Action</button>'
+        }
+      })
+      
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__title').text()).toBe('Complete Card')
+      expect(wrapper.html()).toContain('Main content')
+      expect(wrapper.html()).toContain('Action')
+    })
+
+    it('renders card with custom header and footer', () => {
+      const wrapper = mount(DatametriaCard, {
+        slots: {
+          header: '<div class="custom">Custom Header</div>',
+          default: '<p>Content</p>',
+          footer: '<div class="custom">Custom Footer</div>'
+        }
+      })
+      
+      expect(wrapper.findAll('.custom')).toHaveLength(2)
+      expect(wrapper.html()).toContain('Custom Header')
+      expect(wrapper.html()).toContain('Custom Footer')
+    })
+
+    it('renders card without padding and with all sections', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { 
+          title: 'No Padding Card',
+          padding: false 
+        },
+        slots: {
+          default: '<table>Table content</table>',
+          footer: '<div>Footer</div>'
+        }
+      })
+      
+      expect(wrapper.find('.datametria-card--no-padding').exists()).toBe(true)
+      expect(wrapper.html()).toContain('Table content')
+    })
+  })
+
+  describe('Backward Compatibility', () => {
+    it('works without ThemeProvider', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Test' },
+        slots: {
+          default: '<p>Content</p>',
+          footer: '<div>Footer</div>'
+        }
+      })
+      
+      expect(wrapper.find('.datametria-card').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__header').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__content').exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__footer').exists()).toBe(true)
+    })
+
+    it('maintains original visual appearance', () => {
+      const wrapper = mount(DatametriaCard, {
+        props: { title: 'Original Style' }
+      })
+      
+      const card = wrapper.find('.datametria-card')
+      expect(card.exists()).toBe(true)
+      expect(wrapper.find('.datametria-card__title').text()).toBe('Original Style')
+    })
+  })
+})

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

@@ -0,0 +1,204 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaCheckbox from '../DatametriaCheckbox.vue'
+import DatametriaCheckboxGroup from '../DatametriaCheckboxGroup.vue'
+
+describe('DatametriaCheckbox', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: { label: 'Test Checkbox' }
+    })
+    expect(wrapper.find('.datametria-checkbox').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Test Checkbox')
+  })
+
+  it('renders with slot content', () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      slots: { default: 'Slot Content' }
+    })
+    expect(wrapper.text()).toContain('Slot Content')
+  })
+
+  it('handles v-model correctly', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: {
+        modelValue: false,
+        'onUpdate:modelValue': (value: boolean) => wrapper.setProps({ modelValue: value })
+      }
+    })
+
+    const input = wrapper.find('input[type="checkbox"]')
+    await input.setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    expect(wrapper.emitted('change')?.[0]).toEqual([true])
+  })
+
+  it('applies checked class when checked', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: { modelValue: true }
+    })
+    expect(wrapper.find('.datametria-checkbox').classes()).toContain('is-checked')
+  })
+
+  it('handles disabled state', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: { disabled: true }
+    })
+
+    expect(wrapper.find('.datametria-checkbox').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('handles indeterminate state', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: { indeterminate: true }
+    })
+
+    expect(wrapper.find('.datametria-checkbox').classes()).toContain('is-indeterminate')
+    
+    await wrapper.vm.$nextTick()
+    const input = wrapper.find('input').element as HTMLInputElement
+    expect(input.indeterminate).toBe(true)
+  })
+
+  it('supports custom true/false values', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: {
+        modelValue: 'yes',
+        trueValue: 'yes',
+        falseValue: 'no',
+        'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value })
+      }
+    })
+
+    expect(wrapper.find('.datametria-checkbox').classes()).toContain('is-checked')
+
+    const input = wrapper.find('input')
+    await input.setValue(false)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['no'])
+  })
+
+  it('exposes inputRef', () => {
+    const wrapper = mount(DatametriaCheckbox)
+    expect(wrapper.vm.inputRef).toBeDefined()
+  })
+
+  it('works within checkbox group', async () => {
+    const wrapper = mount(DatametriaCheckboxGroup, {
+      props: {
+        modelValue: ['option1'],
+        'onUpdate:modelValue': (value: string[]) => wrapper.setProps({ modelValue: value })
+      },
+      slots: {
+        default: `
+          <DatametriaCheckbox modelValue="option1" label="Option 1" />
+          <DatametriaCheckbox modelValue="option2" label="Option 2" />
+        `
+      },
+      global: {
+        components: { DatametriaCheckbox }
+      }
+    })
+
+    const checkboxes = wrapper.findAllComponents(DatametriaCheckbox)
+    expect(checkboxes).toHaveLength(2)
+    expect(checkboxes[0].classes()).toContain('is-checked')
+    expect(checkboxes[1].classes()).not.toContain('is-checked')
+  })
+
+  it('updates group value when checkbox is toggled', async () => {
+    const wrapper = mount(DatametriaCheckboxGroup, {
+      props: {
+        modelValue: [],
+        'onUpdate:modelValue': (value: string[]) => wrapper.setProps({ modelValue: value })
+      },
+      slots: {
+        default: `
+          <DatametriaCheckbox modelValue="option1" label="Option 1" />
+        `
+      },
+      global: {
+        components: { DatametriaCheckbox }
+      }
+    })
+
+    const checkbox = wrapper.findComponent(DatametriaCheckbox)
+    const input = checkbox.find('input')
+    await input.setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option1']])
+  })
+
+  it('removes value from group when unchecked', async () => {
+    const wrapper = mount(DatametriaCheckboxGroup, {
+      props: {
+        modelValue: ['option1', 'option2'],
+        'onUpdate:modelValue': (value: string[]) => wrapper.setProps({ modelValue: value })
+      },
+      slots: {
+        default: `
+          <DatametriaCheckbox modelValue="option1" label="Option 1" />
+        `
+      },
+      global: {
+        components: { DatametriaCheckbox }
+      }
+    })
+
+    const checkbox = wrapper.findComponent(DatametriaCheckbox)
+    const input = checkbox.find('input')
+    await input.setValue(false)
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['option2']])
+  })
+
+  it('emits change event', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: { modelValue: false }
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue(true)
+
+    expect(wrapper.emitted('change')).toBeTruthy()
+    expect(wrapper.emitted('change')?.[0]).toEqual([true])
+  })
+
+  it('updates indeterminate property reactively', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: { indeterminate: false }
+    })
+
+    const input = wrapper.find('input').element as HTMLInputElement
+    expect(input.indeterminate).toBe(false)
+
+    await wrapper.setProps({ indeterminate: true })
+    await wrapper.vm.$nextTick()
+    expect(input.indeterminate).toBe(true)
+  })
+
+  it('renders without label when not provided', () => {
+    const wrapper = mount(DatametriaCheckbox)
+    expect(wrapper.find('.datametria-checkbox__label').exists()).toBe(false)
+  })
+
+  it('applies correct classes for all states', async () => {
+    const wrapper = mount(DatametriaCheckbox, {
+      props: {
+        modelValue: true,
+        disabled: true,
+        indeterminate: true
+      }
+    })
+
+    const checkbox = wrapper.find('.datametria-checkbox')
+    expect(checkbox.classes()).toContain('is-checked')
+    expect(checkbox.classes()).toContain('is-disabled')
+    expect(checkbox.classes()).toContain('is-indeterminate')
+  })
+})