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

describe('DatametriaFloatingBar', () => {
  it('renders correctly', () => {
    const wrapper = mount(DatametriaFloatingBar)
    expect(wrapper.find('.dm-floating-bar').exists()).toBe(true)
  })

  it('applies position classes', () => {
    const positions = ['top', 'bottom', 'left', 'right'] as const
    positions.forEach(position => {
      const wrapper = mount(DatametriaFloatingBar, { props: { position } })
      expect(wrapper.find(`.dm-floating-bar--${position}`).exists()).toBe(true)
    })
  })

  it('applies variant classes', () => {
    const variants = ['light', 'dark', 'primary'] as const
    variants.forEach(variant => {
      const wrapper = mount(DatametriaFloatingBar, { props: { variant } })
      expect(wrapper.find(`.dm-floating-bar--${variant}`).exists()).toBe(true)
    })
  })

  it('applies shadow class when shadow is true', () => {
    const wrapper = mount(DatametriaFloatingBar, { props: { shadow: true } })
    expect(wrapper.find('.dm-floating-bar--shadow').exists()).toBe(true)
  })

  it('does not apply shadow class when shadow is false', () => {
    const wrapper = mount(DatametriaFloatingBar, { props: { shadow: false } })
    expect(wrapper.find('.dm-floating-bar--shadow').exists()).toBe(false)
  })

  it('applies rounded class when rounded is true', () => {
    const wrapper = mount(DatametriaFloatingBar, { props: { rounded: true } })
    expect(wrapper.find('.dm-floating-bar--rounded').exists()).toBe(true)
  })

  it('does not apply rounded class when rounded is false', () => {
    const wrapper = mount(DatametriaFloatingBar, { props: { rounded: false } })
    expect(wrapper.find('.dm-floating-bar--rounded').exists()).toBe(false)
  })

  it('renders slot content', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      slots: { default: '<button class="test-button">Action</button>' }
    })
    expect(wrapper.find('.test-button').exists()).toBe(true)
    expect(wrapper.text()).toContain('Action')
  })

  it('applies correct position style for top', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      props: { position: 'top', offset: '20px' }
    })
    const style = wrapper.find('.dm-floating-bar').attributes('style')
    expect(style).toContain('top: 20px')
  })

  it('applies correct position style for bottom', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      props: { position: 'bottom', offset: '24px' }
    })
    const style = wrapper.find('.dm-floating-bar').attributes('style')
    expect(style).toContain('bottom: 24px')
  })

  it('applies correct position style for left', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      props: { position: 'left', offset: '32px' }
    })
    const style = wrapper.find('.dm-floating-bar').attributes('style')
    expect(style).toContain('left: 32px')
  })

  it('applies correct position style for right', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      props: { position: 'right', offset: '40px' }
    })
    const style = wrapper.find('.dm-floating-bar').attributes('style')
    expect(style).toContain('right: 40px')
  })

  it('uses default offset when not provided', () => {
    const wrapper = mount(DatametriaFloatingBar, { props: { position: 'bottom' } })
    const style = wrapper.find('.dm-floating-bar').attributes('style')
    expect(style).toContain('bottom: 16px')
  })

  it('has correct aria attributes', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      props: { ariaLabel: 'Floating toolbar' }
    })
    const bar = wrapper.find('.dm-floating-bar')
    expect(bar.attributes('role')).toBe('toolbar')
    expect(bar.attributes('aria-label')).toBe('Floating toolbar')
  })

  it('renders content wrapper', () => {
    const wrapper = mount(DatametriaFloatingBar)
    expect(wrapper.find('.dm-floating-bar__content').exists()).toBe(true)
  })

  it('applies all classes correctly', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      props: {
        position: 'top',
        variant: 'primary',
        shadow: true,
        rounded: true
      }
    })
    const bar = wrapper.find('.dm-floating-bar')
    expect(bar.classes()).toContain('dm-floating-bar--top')
    expect(bar.classes()).toContain('dm-floating-bar--primary')
    expect(bar.classes()).toContain('dm-floating-bar--shadow')
    expect(bar.classes()).toContain('dm-floating-bar--rounded')
  })

  it('renders multiple action buttons', () => {
    const wrapper = mount(DatametriaFloatingBar, {
      slots: {
        default: `
          <button class="btn-1">Action 1</button>
          <button class="btn-2">Action 2</button>
          <button class="btn-3">Action 3</button>
        `
      }
    })
    expect(wrapper.find('.btn-1').exists()).toBe(true)
    expect(wrapper.find('.btn-2').exists()).toBe(true)
    expect(wrapper.find('.btn-3').exists()).toBe(true)
  })
})