@datametria/vue-components/src/components/__tests__/DatametriaBadge.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 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)
      })
    })
  })
})