@datametria/vue-components 2.3.1 → 2.4.0

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

@@ -1,167 +1,167 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaBadge from '../DatametriaBadge.vue'
-
-describe('DatametriaBadge', () => {
-  // Rendering tests
-  it('renders with default props', () => {
-    const wrapper = mount(DatametriaBadge)
-    expect(wrapper.find('.dm-badge').exists()).toBe(true)
-    expect(wrapper.find('.dm-badge--primary').exists()).toBe(true)
-    expect(wrapper.find('.dm-badge--md').exists()).toBe(true)
-  })
-
-  it('renders with label prop', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { label: 'Test Badge' }
-    })
-    expect(wrapper.text()).toBe('Test Badge')
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(DatametriaBadge, {
-      slots: {
-        default: '<strong>Custom Badge</strong>'
-      }
-    })
-    expect(wrapper.html()).toContain('<strong>Custom Badge</strong>')
-  })
-
-  it('renders with aria-label', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { ariaLabel: 'Status badge' }
-    })
-    expect(wrapper.attributes('aria-label')).toBe('Status badge')
-  })
-
-  // Variant tests
-  it('renders primary variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { variant: 'primary' }
-    })
-    expect(wrapper.find('.dm-badge--primary').exists()).toBe(true)
-  })
-
-  it('renders secondary variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { variant: 'secondary' }
-    })
-    expect(wrapper.find('.dm-badge--secondary').exists()).toBe(true)
-  })
-
-  it('renders success variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { variant: 'success' }
-    })
-    expect(wrapper.find('.dm-badge--success').exists()).toBe(true)
-  })
-
-  it('renders warning variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { variant: 'warning' }
-    })
-    expect(wrapper.find('.dm-badge--warning').exists()).toBe(true)
-  })
-
-  it('renders error variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { variant: 'error' }
-    })
-    expect(wrapper.find('.dm-badge--error').exists()).toBe(true)
-  })
-
-  it('renders info variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { variant: 'info' }
-    })
-    expect(wrapper.find('.dm-badge--info').exists()).toBe(true)
-  })
-
-  // Size tests
-  it('renders small size', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { size: 'sm' }
-    })
-    expect(wrapper.find('.dm-badge--sm').exists()).toBe(true)
-  })
-
-  it('renders medium size', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { size: 'md' }
-    })
-    expect(wrapper.find('.dm-badge--md').exists()).toBe(true)
-  })
-
-  it('renders large size', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { size: 'lg' }
-    })
-    expect(wrapper.find('.dm-badge--lg').exists()).toBe(true)
-  })
-
-  // CSS Variables tests
-  it('uses CSS variables for colors', () => {
-    const variants: Array<'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'> = [
-      'primary', 'secondary', 'success', 'warning', 'error', 'info'
-    ]
-    
-    variants.forEach(variant => {
-      const wrapper = mount(DatametriaBadge, {
-        props: { variant }
-      })
-      expect(wrapper.find(`.dm-badge--${variant}`).exists()).toBe(true)
-    })
-  })
-
-  it('uses CSS variables for typography', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { label: 'Test' }
-    })
-    
-    // Verifica estrutura
-    expect(wrapper.find('.dm-badge').exists()).toBe(true)
-  })
-
-  it('uses CSS variables for spacing', () => {
-    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
-    
-    sizes.forEach(size => {
-      const wrapper = mount(DatametriaBadge, {
-        props: { size }
-      })
-      expect(wrapper.find(`.dm-badge--${size}`).exists()).toBe(true)
-    })
-  })
-
-  // Backward compatibility tests
-  it('works without ThemeProvider (fallback values)', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: {
-        variant: 'success',
-        size: 'md',
-        label: 'Success'
-      }
-    })
-    
-    expect(wrapper.find('.dm-badge--success').exists()).toBe(true)
-    expect(wrapper.find('.dm-badge--md').exists()).toBe(true)
-    expect(wrapper.text()).toBe('Success')
-  })
-
-  it('maintains visual consistency across variants and sizes', () => {
-    const variants: Array<'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'> = [
-      'primary', 'secondary', 'success', 'warning', 'error', 'info'
-    ]
-    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
-    
-    variants.forEach(variant => {
-      sizes.forEach(size => {
-        const wrapper = mount(DatametriaBadge, {
-          props: { variant, size, label: 'Test' }
-        })
-        expect(wrapper.find(`.dm-badge--${variant}`).exists()).toBe(true)
-        expect(wrapper.find(`.dm-badge--${size}`).exists()).toBe(true)
-      })
-    })
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaBadge from '../DatametriaBadge.vue'
+
+describe('DatametriaBadge', () => {
+  // Rendering tests
+  it('renders with default props', () => {
+    const wrapper = mount(DatametriaBadge)
+    expect(wrapper.find('.dm-badge').exists()).toBe(true)
+    expect(wrapper.find('.dm-badge--primary').exists()).toBe(true)
+    expect(wrapper.find('.dm-badge--md').exists()).toBe(true)
+  })
+
+  it('renders with label prop', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { label: 'Test Badge' }
+    })
+    expect(wrapper.text()).toBe('Test Badge')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaBadge, {
+      slots: {
+        default: '<strong>Custom Badge</strong>'
+      }
+    })
+    expect(wrapper.html()).toContain('<strong>Custom Badge</strong>')
+  })
+
+  it('renders with aria-label', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { ariaLabel: 'Status badge' }
+    })
+    expect(wrapper.attributes('aria-label')).toBe('Status badge')
+  })
+
+  // Variant tests
+  it('renders primary variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { variant: 'primary' }
+    })
+    expect(wrapper.find('.dm-badge--primary').exists()).toBe(true)
+  })
+
+  it('renders secondary variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { variant: 'secondary' }
+    })
+    expect(wrapper.find('.dm-badge--secondary').exists()).toBe(true)
+  })
+
+  it('renders success variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { variant: 'success' }
+    })
+    expect(wrapper.find('.dm-badge--success').exists()).toBe(true)
+  })
+
+  it('renders warning variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { variant: 'warning' }
+    })
+    expect(wrapper.find('.dm-badge--warning').exists()).toBe(true)
+  })
+
+  it('renders error variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { variant: 'error' }
+    })
+    expect(wrapper.find('.dm-badge--error').exists()).toBe(true)
+  })
+
+  it('renders info variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { variant: 'info' }
+    })
+    expect(wrapper.find('.dm-badge--info').exists()).toBe(true)
+  })
+
+  // Size tests
+  it('renders small size', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { size: 'sm' }
+    })
+    expect(wrapper.find('.dm-badge--sm').exists()).toBe(true)
+  })
+
+  it('renders medium size', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { size: 'md' }
+    })
+    expect(wrapper.find('.dm-badge--md').exists()).toBe(true)
+  })
+
+  it('renders large size', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { size: 'lg' }
+    })
+    expect(wrapper.find('.dm-badge--lg').exists()).toBe(true)
+  })
+
+  // CSS Variables tests
+  it('uses CSS variables for colors', () => {
+    const variants: Array<'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'> = [
+      'primary', 'secondary', 'success', 'warning', 'error', 'info'
+    ]
+    
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaBadge, {
+        props: { variant }
+      })
+      expect(wrapper.find(`.dm-badge--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('uses CSS variables for typography', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { label: 'Test' }
+    })
+    
+    // Verifica estrutura
+    expect(wrapper.find('.dm-badge').exists()).toBe(true)
+  })
+
+  it('uses CSS variables for spacing', () => {
+    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
+    
+    sizes.forEach(size => {
+      const wrapper = mount(DatametriaBadge, {
+        props: { size }
+      })
+      expect(wrapper.find(`.dm-badge--${size}`).exists()).toBe(true)
+    })
+  })
+
+  // Backward compatibility tests
+  it('works without ThemeProvider (fallback values)', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: {
+        variant: 'success',
+        size: 'md',
+        label: 'Success'
+      }
+    })
+    
+    expect(wrapper.find('.dm-badge--success').exists()).toBe(true)
+    expect(wrapper.find('.dm-badge--md').exists()).toBe(true)
+    expect(wrapper.text()).toBe('Success')
+  })
+
+  it('maintains visual consistency across variants and sizes', () => {
+    const variants: Array<'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'> = [
+      'primary', 'secondary', 'success', 'warning', 'error', 'info'
+    ]
+    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
+    
+    variants.forEach(variant => {
+      sizes.forEach(size => {
+        const wrapper = mount(DatametriaBadge, {
+          props: { variant, size, label: 'Test' }
+        })
+        expect(wrapper.find(`.dm-badge--${variant}`).exists()).toBe(true)
+        expect(wrapper.find(`.dm-badge--${size}`).exists()).toBe(true)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,187 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaBreadcrumb from '../DatametriaBreadcrumb.vue'
+
+describe('DatametriaBreadcrumb', () => {
+  const items = [
+    { label: 'Home', to: '/' },
+    { label: 'Produtos', to: '/produtos' },
+    { label: 'Detalhes' }
+  ]
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    expect(wrapper.find('.datametria-breadcrumb').exists()).toBe(true)
+  })
+
+  it('renders all items', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const itemElements = wrapper.findAll('.datametria-breadcrumb__item')
+    expect(itemElements).toHaveLength(3)
+  })
+
+  it('renders item labels correctly', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    expect(wrapper.text()).toContain('Home')
+    expect(wrapper.text()).toContain('Produtos')
+    expect(wrapper.text()).toContain('Detalhes')
+  })
+
+  it('renders default separator', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const separators = wrapper.findAll('.datametria-breadcrumb__separator')
+    expect(separators).toHaveLength(2) // 3 items = 2 separators
+    expect(separators[0].text()).toBe('/')
+  })
+
+  it('renders custom separator', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items, separator: '>' }
+    })
+    const separators = wrapper.findAll('.datametria-breadcrumb__separator')
+    expect(separators[0].text()).toBe('>')
+  })
+
+  it('renders custom separator slot', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items },
+      slots: {
+        separator: '<span class="custom-sep">→</span>'
+      }
+    })
+    expect(wrapper.find('.custom-sep').exists()).toBe(true)
+    expect(wrapper.find('.custom-sep').text()).toBe('→')
+  })
+
+  it('does not render separator after last item', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const lastItem = wrapper.findAll('.datametria-breadcrumb__item')[2]
+    expect(lastItem.find('.datametria-breadcrumb__separator').exists()).toBe(false)
+  })
+
+  it('renders router-link for items with "to" prop', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items },
+      global: {
+        stubs: {
+          'router-link': {
+            template: '<a><slot /></a>',
+            props: ['to']
+          }
+        }
+      }
+    })
+    const links = wrapper.findAll('a')
+    expect(links.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('renders span for items without "to" prop', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const lastLink = wrapper.findAll('.datametria-breadcrumb__link')[2]
+    expect(lastLink.element.tagName).toBe('SPAN')
+  })
+
+  it('adds is-active class to last item', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const links = wrapper.findAll('.datametria-breadcrumb__link')
+    expect(links[2].classes()).toContain('is-active')
+  })
+
+  it('does not add is-active class to non-last items', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const links = wrapper.findAll('.datametria-breadcrumb__link')
+    expect(links[0].classes()).not.toContain('is-active')
+    expect(links[1].classes()).not.toContain('is-active')
+  })
+
+  it('adds aria-current="page" to last item', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const links = wrapper.findAll('.datametria-breadcrumb__link')
+    expect(links[2].attributes('aria-current')).toBe('page')
+  })
+
+  it('does not add aria-current to non-last items', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const links = wrapper.findAll('.datametria-breadcrumb__link')
+    expect(links[0].attributes('aria-current')).toBeUndefined()
+    expect(links[1].attributes('aria-current')).toBeUndefined()
+  })
+
+  it('has proper ARIA label', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Breadcrumb')
+  })
+
+  it('renders with single item', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items: [{ label: 'Home' }] }
+    })
+    expect(wrapper.findAll('.datametria-breadcrumb__item')).toHaveLength(1)
+    expect(wrapper.findAll('.datametria-breadcrumb__separator')).toHaveLength(0)
+  })
+
+  it('handles object-based routes', () => {
+    const itemsWithObjectRoute = [
+      { label: 'Home', to: { name: 'home' } },
+      { label: 'Profile' }
+    ]
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items: itemsWithObjectRoute },
+      global: {
+        stubs: {
+          'router-link': {
+            template: '<a><slot /></a>',
+            props: ['to']
+          }
+        }
+      }
+    })
+    expect(wrapper.find('.datametria-breadcrumb').exists()).toBe(true)
+  })
+
+  it('adds is-last class to last item', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const itemElements = wrapper.findAll('.datametria-breadcrumb__item')
+    expect(itemElements[2].classes()).toContain('is-last')
+  })
+
+  it('does not add is-last class to non-last items', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const itemElements = wrapper.findAll('.datametria-breadcrumb__item')
+    expect(itemElements[0].classes()).not.toContain('is-last')
+    expect(itemElements[1].classes()).not.toContain('is-last')
+  })
+
+  it('renders empty when items array is empty', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items: [] }
+    })
+    expect(wrapper.findAll('.datametria-breadcrumb__item')).toHaveLength(0)
+  })
+})

package/src/components/__tests__/DatametriaButton.test.js

@@ -1,31 +1,31 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaButton from '../DatametriaButton.vue'
-import { ButtonVariant } from '../../types'
-
-describe('DatametriaButton', () => {
-  it('validates invalid variant in development', () => {
-    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    const originalEnv = process.env.NODE_ENV
-    process.env.NODE_ENV = 'development'
-
-    mount(DatametriaButton, {
-      props: { variant: 'invalid' }
-    })
-
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('[DatametriaButton] Invalid variant "invalid"')
-    )
-
-    process.env.NODE_ENV = originalEnv
-    consoleSpy.mockRestore()
-  })
-
-  it('renders with primary variant', () => {
-    const wrapper = mount(DatametriaButton, {
-      props: { variant: ButtonVariant.PRIMARY }
-    })
-    
-    expect(wrapper.classes()).toContain('datametria-button--primary')
-  })
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaButton from '../DatametriaButton.vue'
+import { ButtonVariant } from '../../types'
+
+describe('DatametriaButton', () => {
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaButton, {
+      props: { variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaButton] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaButton, {
+      props: { variant: ButtonVariant.PRIMARY }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-button--primary')
+  })
 })