@datametria/vue-components/src/components/__tests__/DatametriaSpinner.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 DatametriaSpinner from '../DatametriaSpinner.vue'

describe('DatametriaSpinner', () => {
  // Rendering tests
  it('renders with default props', () => {
    const wrapper = mount(DatametriaSpinner)
    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
  })

  it('renders with label', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { label: 'Loading...' }
    })
    expect(wrapper.find('.dm-spinner__label').text()).toBe('Loading...')
  })

  it('renders without label', () => {
    const wrapper = mount(DatametriaSpinner)
    expect(wrapper.find('.dm-spinner__label').exists()).toBe(false)
  })

  it('renders with custom aria-label', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { ariaLabel: 'Custom loading' }
    })
    expect(wrapper.attributes('aria-label')).toBe('Custom loading')
  })

  it('has role status', () => {
    const wrapper = mount(DatametriaSpinner)
    expect(wrapper.attributes('role')).toBe('status')
  })

  // Size tests
  it('renders small size', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { size: 'sm' }
    })
    expect(wrapper.find('.dm-spinner--sm').exists()).toBe(true)
  })

  it('renders medium size', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { size: 'md' }
    })
    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
  })

  it('renders large size', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { size: 'lg' }
    })
    expect(wrapper.find('.dm-spinner--lg').exists()).toBe(true)
  })

  // Variant tests
  it('renders primary variant', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { variant: 'primary' }
    })
    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
  })

  it('renders secondary variant', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { variant: 'secondary' }
    })
    expect(wrapper.find('.dm-spinner--secondary').exists()).toBe(true)
  })

  it('renders white variant', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { variant: 'white' }
    })
    expect(wrapper.find('.dm-spinner--white').exists()).toBe(true)
  })

  // SVG structure tests
  it('renders SVG element', () => {
    const wrapper = mount(DatametriaSpinner)
    expect(wrapper.find('.dm-spinner__svg').exists()).toBe(true)
    expect(wrapper.find('svg').exists()).toBe(true)
  })

  it('renders circle element', () => {
    const wrapper = mount(DatametriaSpinner)
    expect(wrapper.find('.dm-spinner__circle').exists()).toBe(true)
    expect(wrapper.find('circle').exists()).toBe(true)
  })

  it('circle has correct attributes', () => {
    const wrapper = mount(DatametriaSpinner)
    const circle = wrapper.find('circle')
    expect(circle.attributes('cx')).toBe('25')
    expect(circle.attributes('cy')).toBe('25')
    expect(circle.attributes('r')).toBe('20')
    expect(circle.attributes('fill')).toBe('none')
    expect(circle.attributes('stroke-width')).toBe('4')
  })

  // CSS Variables tests
  it('uses CSS variables for colors', () => {
    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
    
    variants.forEach(variant => {
      const wrapper = mount(DatametriaSpinner, {
        props: { variant }
      })
      expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
    })
  })

  it('uses CSS variables for spacing', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: { label: 'Test' }
    })
    
    // Verifica estrutura
    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
    expect(wrapper.find('.dm-spinner__label').exists()).toBe(true)
  })

  // Backward compatibility tests
  it('works without ThemeProvider (fallback values)', () => {
    const wrapper = mount(DatametriaSpinner, {
      props: {
        variant: 'primary',
        size: 'md',
        label: 'Loading'
      }
    })
    
    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
    expect(wrapper.text()).toContain('Loading')
  })

  it('maintains visual consistency across variants and sizes', () => {
    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
    
    variants.forEach(variant => {
      sizes.forEach(size => {
        const wrapper = mount(DatametriaSpinner, {
          props: { variant, size }
        })
        expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
        expect(wrapper.find(`.dm-spinner--${size}`).exists()).toBe(true)
      })
    })
  })
})