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

describe('DatametriaAlert', () => {
  // Rendering tests
  it('renders with default props', () => {
    const wrapper = mount(DatametriaAlert)
    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
  })

  it('renders with custom message', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { message: 'Test message' }
    })
    expect(wrapper.text()).toContain('Test message')
  })

  it('renders with title and message', () => {
    const wrapper = mount(DatametriaAlert, {
      props: {
        title: 'Test Title',
        message: 'Test message'
      }
    })
    expect(wrapper.find('.datametria-alert__title').text()).toBe('Test Title')
    expect(wrapper.find('.datametria-alert__message').text()).toBe('Test message')
  })

  it('renders slot content', () => {
    const wrapper = mount(DatametriaAlert, {
      slots: {
        default: '<strong>Custom content</strong>'
      }
    })
    expect(wrapper.html()).toContain('<strong>Custom content</strong>')
  })

  // Variant tests
  it('renders success variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'success' }
    })
    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
    expect(wrapper.text()).toContain('✓')
  })

  it('renders error variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'error' }
    })
    expect(wrapper.find('.datametria-alert--error').exists()).toBe(true)
    expect(wrapper.text()).toContain('✕')
  })

  it('renders warning variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'warning' }
    })
    expect(wrapper.find('.datametria-alert--warning').exists()).toBe(true)
    expect(wrapper.text()).toContain('⚠')
  })

  it('renders info variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'info' }
    })
    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
    expect(wrapper.text()).toContain('ℹ')
  })

  it('renders primary variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'primary' }
    })
    expect(wrapper.find('.datametria-alert--primary').exists()).toBe(true)
    expect(wrapper.text()).toContain('ℹ')
  })

  // Closable tests
  it('renders close button when closable', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { closable: true }
    })
    expect(wrapper.find('.datametria-alert__close').exists()).toBe(true)
  })

  it('does not render close button when not closable', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { closable: false }
    })
    expect(wrapper.find('.datametria-alert__close').exists()).toBe(false)
  })

  it('emits update:modelValue when close button clicked', async () => {
    const wrapper = mount(DatametriaAlert, {
      props: { closable: true }
    })
    await wrapper.find('.datametria-alert__close').trigger('click')
    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
  })

  // v-model tests
  it('shows alert when modelValue is true', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { modelValue: true }
    })
    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
  })

  it('hides alert when modelValue is false', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { modelValue: false }
    })
    expect(wrapper.find('.datametria-alert').exists()).toBe(false)
  })

  // CSS Variables tests
  it('uses CSS variables for success variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'success' }
    })
    const alert = wrapper.find('.datametria-alert--success')
    const style = getComputedStyle(alert.element)
    
    // Verifica que as CSS variables estão sendo usadas
    expect(alert.element.className).toContain('datametria-alert--success')
  })

  it('uses CSS variables for error variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'error' }
    })
    const alert = wrapper.find('.datametria-alert--error')
    expect(alert.element.className).toContain('datametria-alert--error')
  })

  it('uses CSS variables for warning variant', () => {
    const wrapper = mount(DatametriaAlert, {
      props: { variant: 'warning' }
    })
    const alert = wrapper.find('.datametria-alert--warning')
    expect(alert.element.className).toContain('datametria-alert--warning')
  })

  it('uses CSS variables for spacing and typography', () => {
    const wrapper = mount(DatametriaAlert, {
      props: {
        title: 'Title',
        message: 'Message'
      }
    })
    
    // Verifica estrutura
    expect(wrapper.find('.datametria-alert__icon').exists()).toBe(true)
    expect(wrapper.find('.datametria-alert__content').exists()).toBe(true)
    expect(wrapper.find('.datametria-alert__title').exists()).toBe(true)
    expect(wrapper.find('.datametria-alert__message').exists()).toBe(true)
  })

  // Backward compatibility tests
  it('works without ThemeProvider (fallback values)', () => {
    const wrapper = mount(DatametriaAlert, {
      props: {
        variant: 'success',
        title: 'Success',
        message: 'Operation completed'
      }
    })
    
    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
    expect(wrapper.text()).toContain('Success')
    expect(wrapper.text()).toContain('Operation completed')
  })

  it('maintains visual consistency across variants', () => {
    const variants: Array<'success' | 'error' | 'warning' | 'info' | 'primary'> = [
      'success', 'error', 'warning', 'info', 'primary'
    ]
    
    variants.forEach(variant => {
      const wrapper = mount(DatametriaAlert, {
        props: { variant }
      })
      expect(wrapper.find(`.datametria-alert--${variant}`).exists()).toBe(true)
    })
  })
})