@datametria/vue-components 2.3.0 → 2.4.0

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

@@ -0,0 +1,211 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSteps from '../DatametriaSteps.vue'
+
+describe('DatametriaSteps', () => {
+  const items = [
+    { title: 'Passo 1', description: 'Descrição 1' },
+    { title: 'Passo 2', description: 'Descrição 2' },
+    { title: 'Passo 3', description: 'Descrição 3' }
+  ]
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    expect(wrapper.find('.datametria-steps').exists()).toBe(true)
+  })
+
+  it('renders all items', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems).toHaveLength(3)
+  })
+
+  it('renders item titles', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    expect(wrapper.text()).toContain('Passo 1')
+    expect(wrapper.text()).toContain('Passo 2')
+    expect(wrapper.text()).toContain('Passo 3')
+  })
+
+  it('renders item descriptions', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    expect(wrapper.text()).toContain('Descrição 1')
+    expect(wrapper.text()).toContain('Descrição 2')
+    expect(wrapper.text()).toContain('Descrição 3')
+  })
+
+  it('renders horizontal direction by default', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    expect(wrapper.find('.datametria-steps--horizontal').exists()).toBe(true)
+  })
+
+  it('renders vertical direction', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, direction: 'vertical' }
+    })
+    expect(wrapper.find('.datametria-steps--vertical').exists()).toBe(true)
+  })
+
+  it('sets active step correctly', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 1 }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[0].classes()).toContain('is-finish')
+    expect(stepItems[1].classes()).toContain('is-process')
+    expect(stepItems[2].classes()).toContain('is-wait')
+  })
+
+  it('shows finish status for completed steps', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 2 }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[0].classes()).toContain('is-finish')
+    expect(stepItems[1].classes()).toContain('is-finish')
+  })
+
+  it('shows process status for current step', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 1 }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[1].classes()).toContain('is-process')
+  })
+
+  it('shows wait status for pending steps', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 0 }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[1].classes()).toContain('is-wait')
+    expect(stepItems[2].classes()).toContain('is-wait')
+  })
+
+  it('renders check icon for finished steps', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 1 }
+    })
+    const icons = wrapper.findAll('.icon-check')
+    expect(icons.length).toBeGreaterThan(0)
+  })
+
+  it('renders number for non-finished steps', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 0 }
+    })
+    const numbers = wrapper.findAll('.icon-number')
+    expect(numbers.length).toBeGreaterThan(0)
+  })
+
+  it('supports custom status per item', () => {
+    const customItems = [
+      { title: 'Passo 1', status: 'finish' as const },
+      { title: 'Passo 2', status: 'error' as const },
+      { title: 'Passo 3' }
+    ]
+    const wrapper = mount(DatametriaSteps, {
+      props: { items: customItems, active: 0 }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[0].classes()).toContain('is-finish')
+    expect(stepItems[1].classes()).toContain('is-error')
+  })
+
+  it('renders error icon for error status', () => {
+    const errorItems = [
+      { title: 'Passo 1', status: 'error' as const }
+    ]
+    const wrapper = mount(DatametriaSteps, {
+      props: { items: errorItems }
+    })
+    expect(wrapper.find('.icon-error').exists()).toBe(true)
+  })
+
+  it('supports global status override', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, status: 'error' }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    stepItems.forEach(item => {
+      expect(item.classes()).toContain('is-error')
+    })
+  })
+
+  it('renders simple mode without descriptions', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, simple: true }
+    })
+    expect(wrapper.find('.datametria-steps--simple').exists()).toBe(true)
+  })
+
+  it('adds is-last class to last item', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[2].classes()).toContain('is-last')
+  })
+
+  it('does not add is-last class to non-last items', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    const stepItems = wrapper.findAll('.datametria-steps__item')
+    expect(stepItems[0].classes()).not.toContain('is-last')
+    expect(stepItems[1].classes()).not.toContain('is-last')
+  })
+
+  it('renders lines between steps', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    const lines = wrapper.findAll('.datametria-steps__line')
+    expect(lines).toHaveLength(2) // 3 items = 2 lines
+  })
+
+  it('does not render line for first step', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items }
+    })
+    const firstItem = wrapper.findAll('.datametria-steps__item')[0]
+    expect(firstItem.find('.datametria-steps__line').exists()).toBe(false)
+  })
+
+  it('renders with single item', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items: [{ title: 'Único' }] }
+    })
+    expect(wrapper.findAll('.datametria-steps__item')).toHaveLength(1)
+    expect(wrapper.findAll('.datametria-steps__line')).toHaveLength(0)
+  })
+
+  it('handles items without description', () => {
+    const simpleItems = [
+      { title: 'Passo 1' },
+      { title: 'Passo 2' }
+    ]
+    const wrapper = mount(DatametriaSteps, {
+      props: { items: simpleItems }
+    })
+    expect(wrapper.findAll('.datametria-steps__description')).toHaveLength(0)
+  })
+
+  it('renders step numbers correctly', () => {
+    const wrapper = mount(DatametriaSteps, {
+      props: { items, active: 0 }
+    })
+    const numbers = wrapper.findAll('.icon-number')
+    expect(numbers[0].text()).toBe('1')
+  })
+})

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

@@ -0,0 +1,129 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSwitch from '../DatametriaSwitch.vue'
+
+describe('DatametriaSwitch', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaSwitch)
+    expect(wrapper.find('.datametria-switch').exists()).toBe(true)
+  })
+
+  it('toggles value on click', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: false }
+    })
+
+    await wrapper.find('.datametria-switch').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    expect(wrapper.emitted('change')?.[0]).toEqual([true])
+  })
+
+  it('applies checked class when true', () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: true }
+    })
+    expect(wrapper.find('.is-checked').exists()).toBe(true)
+  })
+
+  it('handles disabled state', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { disabled: true }
+    })
+
+    expect(wrapper.find('.is-disabled').exists()).toBe(true)
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('handles loading state', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { loading: true }
+    })
+
+    expect(wrapper.find('.is-loading').exists()).toBe(true)
+    expect(wrapper.find('.datametria-switch__loading').exists()).toBe(true)
+    expect(wrapper.find('.spinner').exists()).toBe(true)
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('applies custom active color', () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: true, activeColor: '#ff0000' }
+    })
+    const core = wrapper.find('.datametria-switch__core')
+    expect(core.attributes('style')).toContain('background-color: rgb(255, 0, 0)')
+  })
+
+  it('applies custom inactive color', () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: false, inactiveColor: '#00ff00' }
+    })
+    const core = wrapper.find('.datametria-switch__core')
+    expect(core.attributes('style')).toContain('background-color: rgb(0, 255, 0)')
+  })
+
+  it('has correct aria attributes', () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: true }
+    })
+    const button = wrapper.find('button')
+    expect(button.attributes('role')).toBe('switch')
+    expect(button.attributes('aria-checked')).toBe('true')
+  })
+
+  it('updates aria-checked when value changes', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: false }
+    })
+    
+    await wrapper.setProps({ modelValue: true })
+    expect(wrapper.find('button').attributes('aria-checked')).toBe('true')
+  })
+
+  it('emits change event with correct value', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: false }
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('change')?.[0]).toEqual([true])
+  })
+
+  it('does not emit when disabled', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: false, disabled: true }
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('change')).toBeUndefined()
+  })
+
+  it('does not emit when loading', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: false, loading: true }
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('change')).toBeUndefined()
+  })
+
+  it('toggles from true to false', async () => {
+    const wrapper = mount(DatametriaSwitch, {
+      props: { modelValue: true }
+    })
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('has button type', () => {
+    const wrapper = mount(DatametriaSwitch)
+    expect(wrapper.find('button').attributes('type')).toBe('button')
+  })
+})

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

@@ -0,0 +1,205 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ref, provide } from 'vue'
+import DatametriaTabPane from '../DatametriaTabPane.vue'
+
+describe('DatametriaTabPane', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test Tab' },
+      slots: { default: 'Tab Content' }
+    })
+    expect(wrapper.find('.datametria-tab-pane').exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test' },
+      slots: { default: 'Content' }
+    })
+    expect(wrapper.text()).toContain('Content')
+  })
+
+  it('applies active class when active', () => {
+    const activePane = ref('test')
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test', name: 'test' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane,
+            registerPane: () => {},
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+    expect(wrapper.find('.is-active').exists()).toBe(true)
+  })
+
+  it('hides when not active', () => {
+    const activePane = ref('other')
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test', name: 'test' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane,
+            registerPane: () => {},
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+    expect(wrapper.find('.datametria-tab-pane').attributes('hidden')).toBeDefined()
+  })
+
+  it('generates correct id from label', () => {
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test Tab' }
+    })
+    expect(wrapper.find('.datametria-tab-pane').attributes('id')).toBe('pane-test-tab')
+  })
+
+  it('uses name prop for id if provided', () => {
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test', name: 'custom' }
+    })
+    expect(wrapper.find('.datametria-tab-pane').attributes('id')).toBe('pane-custom')
+  })
+
+  it('sets correct aria-labelledby', () => {
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test Tab' }
+    })
+    expect(wrapper.find('.datametria-tab-pane').attributes('aria-labelledby')).toBe('tab-test-tab')
+  })
+
+  it('supports lazy loading', async () => {
+    const activePane = ref('other')
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test', name: 'test', lazy: true },
+      slots: { default: 'Lazy Content' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane,
+            registerPane: () => {},
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+
+    // Content should not be rendered initially
+    expect(wrapper.text()).toBe('')
+
+    // Activate the pane
+    activePane.value = 'test'
+    await wrapper.vm.$nextTick()
+
+    // Content should now be rendered
+    expect(wrapper.text()).toContain('Lazy Content')
+  })
+
+  it('registers pane on mount', () => {
+    let registered = false
+    const registerPane = () => { registered = true }
+
+    mount(DatametriaTabPane, {
+      props: { label: 'Test' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane: ref('test'),
+            registerPane,
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+
+    expect(registered).toBe(true)
+  })
+
+  it('unregisters pane on unmount', () => {
+    let unregistered = false
+    const unregisterPane = () => { unregistered = true }
+
+    const wrapper = mount(DatametriaTabPane, {
+      props: { label: 'Test' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane: ref('test'),
+            registerPane: () => {},
+            unregisterPane
+          }
+        }
+      }
+    })
+
+    wrapper.unmount()
+    expect(unregistered).toBe(true)
+  })
+
+  it('passes icon prop to registration', () => {
+    let registeredPane: any = null
+    const registerPane = (pane: any) => { registeredPane = pane }
+
+    mount(DatametriaTabPane, {
+      props: { label: 'Test', icon: '🔥' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane: ref('test'),
+            registerPane,
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+
+    expect(registeredPane?.icon).toBe('🔥')
+  })
+
+  it('passes badge prop to registration', () => {
+    let registeredPane: any = null
+    const registerPane = (pane: any) => { registeredPane = pane }
+
+    mount(DatametriaTabPane, {
+      props: { label: 'Test', badge: '5' },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane: ref('test'),
+            registerPane,
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+
+    expect(registeredPane?.badge).toBe('5')
+  })
+
+  it('passes disabled prop to registration', () => {
+    let registeredPane: any = null
+    const registerPane = (pane: any) => { registeredPane = pane }
+
+    mount(DatametriaTabPane, {
+      props: { label: 'Test', disabled: true },
+      global: {
+        provide: {
+          datametriaTabs: {
+            activePane: ref('test'),
+            registerPane,
+            unregisterPane: () => {}
+          }
+        }
+      }
+    })
+
+    expect(registeredPane?.disabled).toBe(true)
+  })
+})