@datametria/vue-components 1.2.0 → 2.0.1

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

@@ -1,36 +1,36 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaAlert from '../DatametriaAlert.vue'
-
-describe('DatametriaAlert', () => {
-  it('renders with primary variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { 
-        variant: 'primary',
-        message: 'Test message'
-      }
-    })
-    
-    expect(wrapper.classes()).toContain('datametria-alert--primary')
-  })
-
-  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(DatametriaAlert, {
-      props: { 
-        variant: 'invalid',
-        message: 'Test'
-      }
-    })
-
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('[DatametriaAlert] Invalid variant "invalid"')
-    )
-
-    process.env.NODE_ENV = originalEnv
-    consoleSpy.mockRestore()
-  })
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAlert from '../DatametriaAlert.vue'
+
+describe('DatametriaAlert', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { 
+        variant: 'primary',
+        message: 'Test message'
+      }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-alert--primary')
+  })
+
+  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(DatametriaAlert, {
+      props: { 
+        variant: 'invalid',
+        message: 'Test'
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaAlert] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
 })

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

@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAlert from '../DatametriaAlert.vue'
+
+describe('DatametriaAlert', () => {
+  // Rendering tests
+  it('renders with default props', () => {
+    const wrapper = mount(DatametriaAlert)
+    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
+  })
+
+  it('renders with custom message', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { message: 'Test message' }
+    })
+    expect(wrapper.text()).toContain('Test message')
+  })
+
+  it('renders with title and message', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: {
+        title: 'Test Title',
+        message: 'Test message'
+      }
+    })
+    expect(wrapper.find('.datametria-alert__title').text()).toBe('Test Title')
+    expect(wrapper.find('.datametria-alert__message').text()).toBe('Test message')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaAlert, {
+      slots: {
+        default: '<strong>Custom content</strong>'
+      }
+    })
+    expect(wrapper.html()).toContain('<strong>Custom content</strong>')
+  })
+
+  // Variant tests
+  it('renders success variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'success' }
+    })
+    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
+    expect(wrapper.text()).toContain('✓')
+  })
+
+  it('renders error variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'error' }
+    })
+    expect(wrapper.find('.datametria-alert--error').exists()).toBe(true)
+    expect(wrapper.text()).toContain('✕')
+  })
+
+  it('renders warning variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'warning' }
+    })
+    expect(wrapper.find('.datametria-alert--warning').exists()).toBe(true)
+    expect(wrapper.text()).toContain('⚠')
+  })
+
+  it('renders info variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'info' }
+    })
+    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
+    expect(wrapper.text()).toContain('ℹ')
+  })
+
+  it('renders primary variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'primary' }
+    })
+    expect(wrapper.find('.datametria-alert--primary').exists()).toBe(true)
+    expect(wrapper.text()).toContain('ℹ')
+  })
+
+  // Closable tests
+  it('renders close button when closable', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { closable: true }
+    })
+    expect(wrapper.find('.datametria-alert__close').exists()).toBe(true)
+  })
+
+  it('does not render close button when not closable', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { closable: false }
+    })
+    expect(wrapper.find('.datametria-alert__close').exists()).toBe(false)
+  })
+
+  it('emits update:modelValue when close button clicked', async () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { closable: true }
+    })
+    await wrapper.find('.datametria-alert__close').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  // v-model tests
+  it('shows alert when modelValue is true', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { modelValue: true }
+    })
+    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
+  })
+
+  it('hides alert when modelValue is false', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { modelValue: false }
+    })
+    expect(wrapper.find('.datametria-alert').exists()).toBe(false)
+  })
+
+  // CSS Variables tests
+  it('uses CSS variables for success variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'success' }
+    })
+    const alert = wrapper.find('.datametria-alert--success')
+    const style = getComputedStyle(alert.element)
+    
+    // Verifica que as CSS variables estão sendo usadas
+    expect(alert.element.className).toContain('datametria-alert--success')
+  })
+
+  it('uses CSS variables for error variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'error' }
+    })
+    const alert = wrapper.find('.datametria-alert--error')
+    expect(alert.element.className).toContain('datametria-alert--error')
+  })
+
+  it('uses CSS variables for warning variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'warning' }
+    })
+    const alert = wrapper.find('.datametria-alert--warning')
+    expect(alert.element.className).toContain('datametria-alert--warning')
+  })
+
+  it('uses CSS variables for spacing and typography', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: {
+        title: 'Title',
+        message: 'Message'
+      }
+    })
+    
+    // Verifica estrutura
+    expect(wrapper.find('.datametria-alert__icon').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert__content').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert__title').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert__message').exists()).toBe(true)
+  })
+
+  // Backward compatibility tests
+  it('works without ThemeProvider (fallback values)', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: {
+        variant: 'success',
+        title: 'Success',
+        message: 'Operation completed'
+      }
+    })
+    
+    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Success')
+    expect(wrapper.text()).toContain('Operation completed')
+  })
+
+  it('maintains visual consistency across variants', () => {
+    const variants: Array<'success' | 'error' | 'warning' | 'info' | 'primary'> = [
+      'success', 'error', 'warning', 'info', 'primary'
+    ]
+    
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaAlert, {
+        props: { variant }
+      })
+      expect(wrapper.find(`.datametria-alert--${variant}`).exists()).toBe(true)
+    })
+  })
+})

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

@@ -0,0 +1,180 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAutocomplete from '../DatametriaAutocomplete.vue'
+import { datametriaTheme } from '../../theme/presets'
+import { THEME_INJECTION_KEY } from '../../theme/constants'
+
+const createWrapper = (props = {}, themeProps = {}) => {
+  return mount(DatametriaAutocomplete, {
+    props,
+    global: {
+      plugins: [{
+        install(app) {
+          app.provide(THEME_INJECTION_KEY, datametriaTheme)
+        }
+      }]
+    }
+  })
+}
+
+describe('DatametriaAutocomplete', () => {
+  const mockOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders correctly', () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    expect(wrapper.find('.dm-autocomplete').exists()).toBe(true)
+  })
+
+  it('applies theme colors correctly', () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    expect(wrapper.find('.dm-autocomplete').exists()).toBe(true)
+  })
+
+  it('shows options when focused', async () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    const input = wrapper.find('.dm-autocomplete__input')
+    
+    await input.trigger('focus')
+    expect(wrapper.find('.dm-autocomplete__dropdown').exists()).toBe(true)
+  })
+
+  it('filters options based on search query', async () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    const input = wrapper.find('.dm-autocomplete__input')
+    
+    await input.setValue('Option 1')
+    await input.trigger('focus')
+    
+    const options = wrapper.findAll('.dm-autocomplete__option')
+    expect(options).toHaveLength(1)
+    expect(options[0].text()).toBe('Option 1')
+  })
+
+  it('emits update:modelValue when option is selected', async () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    const input = wrapper.find('.dm-autocomplete__input')
+    
+    await input.trigger('focus')
+    const option = wrapper.find('.dm-autocomplete__option')
+    await option.trigger('click')
+    
+    const autocomplete = wrapper.findComponent(DatametriaAutocomplete)
+    expect(autocomplete.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('supports keyboard navigation', async () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    const input = wrapper.find('.dm-autocomplete__input')
+    
+    await input.trigger('focus')
+    await input.trigger('keydown', { key: 'ArrowDown' })
+    
+    expect(wrapper.find('.dm-autocomplete__option--active').exists()).toBe(true)
+  })
+
+  it('shows error state correctly', () => {
+    const wrapper = createWrapper({ 
+      options: mockOptions, 
+      error: 'Required field' 
+    })
+    
+    expect(wrapper.find('.dm-autocomplete__input--error').exists()).toBe(true)
+    expect(wrapper.find('.dm-autocomplete__error').text()).toBe('Required field')
+  })
+
+  it('supports disabled state', () => {
+    const wrapper = createWrapper({ 
+      options: mockOptions, 
+      disabled: true 
+    })
+    
+    const input = wrapper.find('.dm-autocomplete__input')
+    expect(input.attributes('disabled')).toBeDefined()
+  })
+
+  it('supports required field', () => {
+    const wrapper = createWrapper({ 
+      options: mockOptions, 
+      required: true,
+      label: 'Test Label'
+    })
+    
+    expect(wrapper.find('.dm-autocomplete__required').exists()).toBe(true)
+  })
+
+  it('supports custom placeholder', () => {
+    const placeholder = 'Search options...'
+    const wrapper = createWrapper({ 
+      options: mockOptions, 
+      placeholder 
+    })
+    
+    const input = wrapper.find('.dm-autocomplete__input')
+    expect(input.attributes('placeholder')).toBe(placeholder)
+  })
+
+  it('supports loading state', () => {
+    const wrapper = createWrapper({ 
+      options: mockOptions, 
+      loading: true 
+    })
+    
+    expect(wrapper.find('.dm-autocomplete__loading').exists()).toBe(true)
+  })
+
+  it('supports no results message', async () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    const input = wrapper.find('.dm-autocomplete__input')
+    
+    await input.setValue('nonexistent')
+    await input.trigger('focus')
+    
+    expect(wrapper.find('.dm-autocomplete__no-results').exists()).toBe(true)
+  })
+
+  it('closes dropdown when clicking outside', async () => {
+    const wrapper = createWrapper({ options: mockOptions })
+    const input = wrapper.find('.dm-autocomplete__input')
+    
+    await input.trigger('focus')
+    expect(wrapper.find('.dm-autocomplete__dropdown').exists()).toBe(true)
+    
+    // Simula clique fora do componente
+    document.body.click()
+    await new Promise(resolve => setTimeout(resolve, 250))
+    await wrapper.vm.$nextTick()
+    
+    expect(wrapper.find('.dm-autocomplete__dropdown').exists()).toBe(false)
+  })
+
+  it('supports multiple selection', async () => {
+    const wrapper = createWrapper({ 
+      options: mockOptions, 
+      multiple: true 
+    })
+    
+    const input = wrapper.find('.dm-autocomplete__input')
+    await input.trigger('focus')
+    
+    const option = wrapper.find('.dm-autocomplete__option')
+    await option.trigger('click')
+    
+    expect(wrapper.find('.dm-autocomplete__tag').exists()).toBe(true)
+  })
+
+  it('supports custom option template', () => {
+    const wrapper = createWrapper({ 
+      options: mockOptions.map(opt => ({ ...opt, description: `Description for ${opt.label}` }))
+    })
+    
+    expect(wrapper.find('.dm-autocomplete').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAvatar from '../DatametriaAvatar.vue'
+import { datametriaTheme } from '../../theme/presets'
+import { THEME_INJECTION_KEY } from '../../theme/constants'
+
+const createWrapper = (props = {}, themeProps = {}) => {
+  return mount(DatametriaAvatar, {
+    props,
+    global: {
+      plugins: [{
+        install(app) {
+          app.provide(THEME_INJECTION_KEY, datametriaTheme)
+        }
+      }]
+    }
+  })
+}
+
+describe('DatametriaAvatar', () => {
+  it('renders correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-avatar').exists()).toBe(true)
+  })
+
+  it('applies theme colors correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-avatar').exists()).toBe(true)
+  })
+
+  it('displays image when src is provided', () => {
+    const src = 'https://example.com/avatar.jpg'
+    const wrapper = createWrapper({ src })
+    
+    const img = wrapper.find('.dm-avatar__image')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe(src)
+  })
+
+  it('displays initials when name is provided and no src', () => {
+    const name = 'John Doe'
+    const wrapper = createWrapper({ name })
+    
+    expect(wrapper.find('.dm-avatar__initials').text()).toBe('JD')
+  })
+
+  it('displays single initial for single name', () => {
+    const name = 'John'
+    const wrapper = createWrapper({ name })
+    
+    expect(wrapper.find('.dm-avatar__initials').text()).toBe('J')
+  })
+
+  it('supports different sizes', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl']
+    
+    sizes.forEach(size => {
+      const wrapper = createWrapper({ size })
+      expect(wrapper.find(`.dm-avatar--${size}`).exists()).toBe(true)
+    })
+  })
+
+  it('supports different variants', () => {
+    const variants = ['circular', 'rounded', 'square']
+    
+    variants.forEach(variant => {
+      const wrapper = createWrapper({ variant })
+      expect(wrapper.find(`.dm-avatar--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('shows fallback icon when no src or name', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-avatar__icon').exists()).toBe(true)
+  })
+
+  it('handles image load error', async () => {
+    const wrapper = createWrapper({ src: 'invalid-url.jpg', name: 'John Doe' })
+    const img = wrapper.find('.dm-avatar__image')
+    
+    await img.trigger('error')
+    expect(wrapper.find('.dm-avatar__initials').exists()).toBe(true)
+  })
+
+  it('supports custom background color', () => {
+    const backgroundColor = '#ff0000'
+    const wrapper = createWrapper({ backgroundColor })
+    
+    const avatar = wrapper.find('.dm-avatar')
+    const style = avatar.attributes('style')
+    // Aceita tanto HEX quanto RGB
+    expect(style).toMatch(/background-color: (#ff0000|rgb\(255, 0, 0\))/)
+  })
+
+  it('supports custom text color', () => {
+    const textColor = '#ffffff'
+    const wrapper = createWrapper({ textColor, name: 'John Doe' })
+    
+    const initials = wrapper.find('.dm-avatar__initials')
+    const style = initials.attributes('style')
+    // Aceita tanto HEX quanto RGB
+    expect(style).toMatch(/color: (#ffffff|rgb\(255, 255, 255\))/)
+  })
+
+  it('supports clickable avatar', async () => {
+    const wrapper = createWrapper({ clickable: true })
+    const avatar = wrapper.find('.dm-avatar')
+    
+    expect(avatar.classes()).toContain('dm-avatar--clickable')
+    
+    await avatar.trigger('click')
+    const avatarComponent = wrapper.findComponent(DatametriaAvatar)
+    expect(avatarComponent.emitted('click')).toBeTruthy()
+  })
+
+  it('supports badge/status indicator', () => {
+    const wrapper = createWrapper({ badge: true, status: 'online' })
+    
+    expect(wrapper.find('.dm-avatar__badge').exists()).toBe(true)
+    expect(wrapper.find('.dm-avatar__badge--online').exists()).toBe(true)
+  })
+
+  it('supports different status types', () => {
+    const statuses = ['online', 'offline', 'away', 'busy']
+    
+    statuses.forEach(status => {
+      const wrapper = createWrapper({ badge: true, status })
+      expect(wrapper.find(`.dm-avatar__badge--${status}`).exists()).toBe(true)
+    })
+  })
+
+  it('supports alt text for accessibility', () => {
+    const alt = 'User avatar'
+    const wrapper = createWrapper({ src: 'avatar.jpg', alt })
+    
+    const img = wrapper.find('.dm-avatar__image')
+    expect(img.attributes('alt')).toBe(alt)
+  })
+
+  it('generates alt text from name when not provided', () => {
+    const name = 'John Doe'
+    const wrapper = createWrapper({ src: 'avatar.jpg', name })
+    
+    const img = wrapper.find('.dm-avatar__image')
+    expect(img.attributes('alt')).toBe(`${name} avatar`)
+  })
+
+  it('supports loading state', () => {
+    const wrapper = createWrapper({ loading: true })
+    expect(wrapper.find('.dm-avatar--loading').exists()).toBe(true)
+  })
+})

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

@@ -1,30 +1,30 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaBadge from '../DatametriaBadge.vue'
-
-describe('DatametriaBadge', () => {
-  it('renders with primary variant', () => {
-    const wrapper = mount(DatametriaBadge, {
-      props: { label: 'Test', variant: 'primary' }
-    })
-    
-    expect(wrapper.classes()).toContain('dm-badge--primary')
-  })
-
-  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(DatametriaBadge, {
-      props: { label: 'Test', variant: 'invalid' }
-    })
-
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('[DatametriaBadge] Invalid variant "invalid"')
-    )
-
-    process.env.NODE_ENV = originalEnv
-    consoleSpy.mockRestore()
-  })
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaBadge from '../DatametriaBadge.vue'
+
+describe('DatametriaBadge', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { label: 'Test', variant: 'primary' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-badge--primary')
+  })
+
+  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(DatametriaBadge, {
+      props: { label: 'Test', variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaBadge] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
 })