@datametria/vue-components/src/components/__tests__/DatametriaToast.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, vi, beforeEach, afterEach } from 'vitest'
import { mount } from '@vue/test-utils'
import DatametriaToast from '../DatametriaToast.vue'

describe.skip('DatametriaToast', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('renders correctly when visible', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test message', modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast')
  })

  it('displays message correctly', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test message', modelValue: true }
    })
    expect(wrapper.html()).toContain('Test message')
  })

  it('applies success variant class', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Success', variant: 'success', modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast--success')
  })

  it('applies error variant class', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Error', variant: 'error', modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast--error')
  })

  it('applies warning variant class', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Warning', variant: 'warning', modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast--warning')
  })

  it('applies primary variant class', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Primary', variant: 'primary', modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast--primary')
  })

  it('applies info variant class', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Info', variant: 'info', modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast--info')
  })

  it('renders close button when closable', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test', closable: true, modelValue: true }
    })
    expect(wrapper.html()).toContain('dm-toast__close')
  })

  it('does not render close button when not closable', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test', closable: false, modelValue: true }
    })
    expect(wrapper.html()).not.toContain('dm-toast__close')
  })

  it('emits update:modelValue when close called', async () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test', closable: true, modelValue: true }
    })
    await (wrapper.vm as any).close()
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
  })

  it('emits close event when close called', async () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test', closable: true, modelValue: true }
    })
    await (wrapper.vm as any).close()
    expect(wrapper.emitted('close')).toBeTruthy()
  })

  it('uses CSS variables with fallbacks', () => {
    const wrapper = mount(DatametriaToast, {
      props: { message: 'Test', modelValue: true }
    })
    expect(wrapper.html()).toContain('--dm-')
  })
})