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

describe('DatametriaDivider', () => {
  it('renders horizontal by default', () => {
    const wrapper = mount(DatametriaDivider)
    expect(wrapper.find('.dm-divider--horizontal').exists()).toBe(true)
    expect(wrapper.attributes('role')).toBe('separator')
    expect(wrapper.attributes('aria-orientation')).toBe('horizontal')
  })

  it('renders vertical orientation', () => {
    const wrapper = mount(DatametriaDivider, {
      props: { orientation: 'vertical' }
    })
    expect(wrapper.find('.dm-divider--vertical').exists()).toBe(true)
    expect(wrapper.attributes('aria-orientation')).toBe('vertical')
  })

  it('renders with label prop', () => {
    const wrapper = mount(DatametriaDivider, {
      props: { label: 'OR' }
    })
    expect(wrapper.find('.dm-divider__label').text()).toBe('OR')
  })

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

  it('renders dashed style', () => {
    const wrapper = mount(DatametriaDivider, {
      props: { dashed: true }
    })
    expect(wrapper.find('.dm-divider--dashed').exists()).toBe(true)
  })

  it('renders solid style by default', () => {
    const wrapper = mount(DatametriaDivider)
    expect(wrapper.find('.dm-divider--dashed').exists()).toBe(false)
  })

  it('works without ThemeProvider', () => {
    const wrapper = mount(DatametriaDivider, {
      props: { label: 'Test', orientation: 'horizontal' }
    })
    expect(wrapper.find('.dm-divider--horizontal').exists()).toBe(true)
    expect(wrapper.text()).toBe('Test')
  })
})