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

/**
 * DatametriaButton Tests
 * @author Vander Loto - CTO DATAMETRIA
 * @date 13/11/2025
 */

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import DatametriaButton from '../DatametriaButton.vue'
import { ButtonVariant, ButtonSize } from '../../types'

describe('DatametriaButton', () => {
  describe('Rendering', () => {
    it('should render button with text', () => {
      const wrapper = mount(DatametriaButton, {
        slots: { default: 'Click me' }
      })

      expect(wrapper.text()).toContain('Click me')
      expect(wrapper.find('button').exists()).toBe(true)
    })

    it('should render with default variant and size', () => {
      const wrapper = mount(DatametriaButton, {
        slots: { default: 'Button' }
      })

      expect(wrapper.classes()).toContain('datametria-button--primary')
      expect(wrapper.classes()).toContain('datametria-button--md')
    })
  })

  describe('Variants', () => {
    it('should render primary variant', () => {
      const wrapper = mount(DatametriaButton, {
        props: { variant: ButtonVariant.PRIMARY },
        slots: { default: 'Primary' }
      })

      expect(wrapper.classes()).toContain('datametria-button--primary')
    })

    it('should render secondary variant', () => {
      const wrapper = mount(DatametriaButton, {
        props: { variant: ButtonVariant.SECONDARY },
        slots: { default: 'Secondary' }
      })

      expect(wrapper.classes()).toContain('datametria-button--secondary')
    })

    it('should render outline variant', () => {
      const wrapper = mount(DatametriaButton, {
        props: { variant: ButtonVariant.OUTLINE },
        slots: { default: 'Outline' }
      })

      expect(wrapper.classes()).toContain('datametria-button--outline')
    })

    it('should render ghost variant', () => {
      const wrapper = mount(DatametriaButton, {
        props: { variant: ButtonVariant.GHOST },
        slots: { default: 'Ghost' }
      })

      expect(wrapper.classes()).toContain('datametria-button--ghost')
    })
  })

  describe('Sizes', () => {
    it('should render small size', () => {
      const wrapper = mount(DatametriaButton, {
        props: { size: ButtonSize.SM },
        slots: { default: 'Small' }
      })

      expect(wrapper.classes()).toContain('datametria-button--sm')
    })

    it('should render medium size', () => {
      const wrapper = mount(DatametriaButton, {
        props: { size: ButtonSize.MD },
        slots: { default: 'Medium' }
      })

      expect(wrapper.classes()).toContain('datametria-button--md')
    })

    it('should render large size', () => {
      const wrapper = mount(DatametriaButton, {
        props: { size: ButtonSize.LG },
        slots: { default: 'Large' }
      })

      expect(wrapper.classes()).toContain('datametria-button--lg')
    })
  })

  describe('States', () => {
    it('should be disabled when disabled prop is true', () => {
      const wrapper = mount(DatametriaButton, {
        props: { disabled: true },
        slots: { default: 'Disabled' }
      })

      expect(wrapper.attributes('disabled')).toBeDefined()
      expect(wrapper.classes()).toContain('datametria-button--disabled')
    })

    it('should show loading spinner', () => {
      const wrapper = mount(DatametriaButton, {
        props: { loading: true },
        slots: { default: 'Loading' }
      })

      expect(wrapper.find('.spinner').exists()).toBe(true)
      expect(wrapper.attributes('aria-busy')).toBe('true')
    })

    it('should be disabled when loading', () => {
      const wrapper = mount(DatametriaButton, {
        props: { loading: true },
        slots: { default: 'Loading' }
      })

      expect(wrapper.attributes('disabled')).toBeDefined()
    })

    it('should render full width', () => {
      const wrapper = mount(DatametriaButton, {
        props: { fullWidth: true },
        slots: { default: 'Full Width' }
      })

      expect(wrapper.classes()).toContain('datametria-button--full-width')
    })
  })

  describe('Button Types', () => {
    it('should render as button type by default', () => {
      const wrapper = mount(DatametriaButton, {
        slots: { default: 'Button' }
      })

      expect(wrapper.attributes('type')).toBe('button')
    })

    it('should render as submit type', () => {
      const wrapper = mount(DatametriaButton, {
        props: { type: 'submit' },
        slots: { default: 'Submit' }
      })

      expect(wrapper.attributes('type')).toBe('submit')
    })

    it('should render as reset type', () => {
      const wrapper = mount(DatametriaButton, {
        props: { type: 'reset' },
        slots: { default: 'Reset' }
      })

      expect(wrapper.attributes('type')).toBe('reset')
    })
  })

  describe('Events', () => {
    it('should emit click event', async () => {
      const wrapper = mount(DatametriaButton, {
        slots: { default: 'Click' }
      })

      await wrapper.trigger('click')

      expect(wrapper.emitted('click')).toBeTruthy()
      expect(wrapper.emitted('click')?.[0]).toBeDefined()
    })

    it('should not emit click when disabled', async () => {
      const wrapper = mount(DatametriaButton, {
        props: { disabled: true },
        slots: { default: 'Disabled' }
      })

      await wrapper.trigger('click')

      expect(wrapper.emitted('click')).toBeFalsy()
    })

    it('should not emit click when loading', async () => {
      const wrapper = mount(DatametriaButton, {
        props: { loading: true },
        slots: { default: 'Loading' }
      })

      await wrapper.trigger('click')

      expect(wrapper.emitted('click')).toBeFalsy()
    })
  })

  describe('Accessibility', () => {
    it('should have aria-disabled when disabled', () => {
      const wrapper = mount(DatametriaButton, {
        props: { disabled: true },
        slots: { default: 'Disabled' }
      })

      expect(wrapper.attributes('aria-disabled')).toBe('true')
    })

    it('should have aria-busy when loading', () => {
      const wrapper = mount(DatametriaButton, {
        props: { loading: true },
        slots: { default: 'Loading' }
      })

      expect(wrapper.attributes('aria-busy')).toBe('true')
    })

    it('should have spinner with role and label', () => {
      const wrapper = mount(DatametriaButton, {
        props: { loading: true },
        slots: { default: 'Loading' }
      })

      const spinner = wrapper.find('.spinner')
      expect(spinner.attributes('role')).toBe('status')
      expect(spinner.attributes('aria-label')).toBe('Carregando')
    })
  })

  describe('CSS Variables Integration', () => {
    it('should use CSS variables for styling', () => {
      const wrapper = mount(DatametriaButton, {
        slots: { default: 'Button' }
      })

      const button = wrapper.find('button')
      const style = getComputedStyle(button.element)
      
      // Verifica que o componente está pronto para usar CSS variables
      expect(button.classes()).toContain('datametria-button')
    })

    it('should apply variant classes for theming', () => {
      const wrapper = mount(DatametriaButton, {
        props: { variant: ButtonVariant.PRIMARY },
        slots: { default: 'Primary' }
      })

      expect(wrapper.classes()).toContain('datametria-button--primary')
    })
  })

  describe('Backward Compatibility', () => {
    it('should maintain existing API', () => {
      const wrapper = mount(DatametriaButton, {
        props: {
          variant: ButtonVariant.PRIMARY,
          size: ButtonSize.MD,
          disabled: false,
          loading: false,
          fullWidth: false,
          type: 'button'
        },
        slots: { default: 'Button' }
      })

      expect(wrapper.exists()).toBe(true)
    })

    it('should work without ThemeProvider (fallback values)', () => {
      const wrapper = mount(DatametriaButton, {
        slots: { default: 'Button' }
      })

      expect(wrapper.find('button').exists()).toBe(true)
      expect(wrapper.classes()).toContain('datametria-button--primary')
    })
  })
})