@datametria/vue-components/src/components/__tests__/DatametriaAvatar.test.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

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