@datametria/vue-components 1.2.0 → 2.0.1

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

@@ -0,0 +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)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaBreadcrumb from '../DatametriaBreadcrumb.vue'
+
+describe('DatametriaBreadcrumb', () => {
+  const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Details' }
+  ]
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    expect(wrapper.find('.dm-breadcrumb').exists()).toBe(true)
+  })
+
+  it('renders all items', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const itemElements = wrapper.findAll('.dm-breadcrumb__item')
+    expect(itemElements).toHaveLength(3)
+  })
+
+  it('renders links for items with href', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const links = wrapper.findAll('.dm-breadcrumb__link')
+    expect(links).toHaveLength(2)
+  })
+
+  it('renders current item without link', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const current = wrapper.find('.dm-breadcrumb__current')
+    expect(current.exists()).toBe(true)
+    expect(current.text()).toBe('Details')
+  })
+
+  it('renders separators', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const separators = wrapper.findAll('.dm-breadcrumb__separator')
+    expect(separators).toHaveLength(2)
+  })
+
+  it('uses custom separator', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items, separator: '>' }
+    })
+    const separator = wrapper.find('.dm-breadcrumb__separator')
+    expect(separator.text()).toBe('>')
+  })
+
+  it('emits click event', async () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    await wrapper.find('.dm-breadcrumb__link').trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('applies aria-current to last item', () => {
+    const wrapper = mount(DatametriaBreadcrumb, {
+      props: { items }
+    })
+    const current = wrapper.find('.dm-breadcrumb__current')
+    expect(current.attributes('aria-current')).toBe('page')
+  })
+})

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')
+  })
 })

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

@@ -0,0 +1,283 @@
+/**
+ * DatametriaButton Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaButton from '../DatametriaButton.vue'
+import { ButtonVariant, ButtonSize } from '../../types'
+
+describe('DatametriaButton', () => {
+  describe('Rendering', () => {
+    it('should render button with text', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Click me' }
+      })
+
+      expect(wrapper.text()).toContain('Click me')
+      expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('should render with default variant and size', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+      expect(wrapper.classes()).toContain('datametria-button--md')
+    })
+  })
+
+  describe('Variants', () => {
+    it('should render primary variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.PRIMARY },
+        slots: { default: 'Primary' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+    })
+
+    it('should render secondary variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.SECONDARY },
+        slots: { default: 'Secondary' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--secondary')
+    })
+
+    it('should render outline variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.OUTLINE },
+        slots: { default: 'Outline' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--outline')
+    })
+
+    it('should render ghost variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.GHOST },
+        slots: { default: 'Ghost' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--ghost')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('should render small size', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { size: ButtonSize.SM },
+        slots: { default: 'Small' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--sm')
+    })
+
+    it('should render medium size', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { size: ButtonSize.MD },
+        slots: { default: 'Medium' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--md')
+    })
+
+    it('should render large size', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { size: ButtonSize.LG },
+        slots: { default: 'Large' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--lg')
+    })
+  })
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { disabled: true },
+        slots: { default: 'Disabled' }
+      })
+
+      expect(wrapper.attributes('disabled')).toBeDefined()
+      expect(wrapper.classes()).toContain('datametria-button--disabled')
+    })
+
+    it('should show loading spinner', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      expect(wrapper.find('.spinner').exists()).toBe(true)
+      expect(wrapper.attributes('aria-busy')).toBe('true')
+    })
+
+    it('should be disabled when loading', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+
+    it('should render full width', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { fullWidth: true },
+        slots: { default: 'Full Width' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--full-width')
+    })
+  })
+
+  describe('Button Types', () => {
+    it('should render as button type by default', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.attributes('type')).toBe('button')
+    })
+
+    it('should render as submit type', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { type: 'submit' },
+        slots: { default: 'Submit' }
+      })
+
+      expect(wrapper.attributes('type')).toBe('submit')
+    })
+
+    it('should render as reset type', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { type: 'reset' },
+        slots: { default: 'Reset' }
+      })
+
+      expect(wrapper.attributes('type')).toBe('reset')
+    })
+  })
+
+  describe('Events', () => {
+    it('should emit click event', async () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Click' }
+      })
+
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted('click')).toBeTruthy()
+      expect(wrapper.emitted('click')?.[0]).toBeDefined()
+    })
+
+    it('should not emit click when disabled', async () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { disabled: true },
+        slots: { default: 'Disabled' }
+      })
+
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted('click')).toBeFalsy()
+    })
+
+    it('should not emit click when loading', async () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted('click')).toBeFalsy()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have aria-disabled when disabled', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { disabled: true },
+        slots: { default: 'Disabled' }
+      })
+
+      expect(wrapper.attributes('aria-disabled')).toBe('true')
+    })
+
+    it('should have aria-busy when loading', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      expect(wrapper.attributes('aria-busy')).toBe('true')
+    })
+
+    it('should have spinner with role and label', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      const spinner = wrapper.find('.spinner')
+      expect(spinner.attributes('role')).toBe('status')
+      expect(spinner.attributes('aria-label')).toBe('Carregando')
+    })
+  })
+
+  describe('CSS Variables Integration', () => {
+    it('should use CSS variables for styling', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      const button = wrapper.find('button')
+      const style = getComputedStyle(button.element)
+      
+      // Verifica que o componente está pronto para usar CSS variables
+      expect(button.classes()).toContain('datametria-button')
+    })
+
+    it('should apply variant classes for theming', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.PRIMARY },
+        slots: { default: 'Primary' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+    })
+  })
+
+  describe('Backward Compatibility', () => {
+    it('should maintain existing API', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: {
+          variant: ButtonVariant.PRIMARY,
+          size: ButtonSize.MD,
+          disabled: false,
+          loading: false,
+          fullWidth: false,
+          type: 'button'
+        },
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should work without ThemeProvider (fallback values)', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.find('button').exists()).toBe(true)
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+    })
+  })
+})