@datametria/vue-components 2.3.1 → 2.4.0

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

@@ -1,152 +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)
-  })
+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()
+  })
 })