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

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

  it('applies position classes', () => {
    const wrapperLeft = mount(DatametriaSidebar, { props: { position: 'left' } })
    expect(wrapperLeft.find('.dm-sidebar--left').exists()).toBe(true)

    const wrapperRight = mount(DatametriaSidebar, { props: { position: 'right' } })
    expect(wrapperRight.find('.dm-sidebar--right').exists()).toBe(true)
  })

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

  it('renders header slot', () => {
    const wrapper = mount(DatametriaSidebar, {
      slots: { header: '<div class="test-header">Header</div>' }
    })
    expect(wrapper.find('.test-header').exists()).toBe(true)
    expect(wrapper.find('.dm-sidebar__header').exists()).toBe(true)
  })

  it('renders default slot content', () => {
    const wrapper = mount(DatametriaSidebar, {
      slots: { default: '<div class="test-content">Content</div>' }
    })
    expect(wrapper.find('.test-content').exists()).toBe(true)
    expect(wrapper.find('.dm-sidebar__content').exists()).toBe(true)
  })

  it('renders footer slot', () => {
    const wrapper = mount(DatametriaSidebar, {
      slots: { footer: '<div class="test-footer">Footer</div>' }
    })
    expect(wrapper.find('.test-footer').exists()).toBe(true)
    expect(wrapper.find('.dm-sidebar__footer').exists()).toBe(true)
  })

  it('shows toggle button when collapsible', () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true },
      slots: { header: 'Header' }
    })
    expect(wrapper.find('.dm-sidebar__toggle').exists()).toBe(true)
  })

  it('hides toggle button when not collapsible', () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: false },
      slots: { header: 'Header' }
    })
    expect(wrapper.find('.dm-sidebar__toggle').exists()).toBe(false)
  })

  it('toggles open state when toggle button clicked', async () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: true },
      slots: { header: 'Header' }
    })

    expect(wrapper.vm.isOpen).toBe(true)
    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(false)

    await wrapper.find('.dm-sidebar__toggle').trigger('click')
    expect(wrapper.vm.isOpen).toBe(false)
    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(true)

    await wrapper.find('.dm-sidebar__toggle').trigger('click')
    expect(wrapper.vm.isOpen).toBe(true)
  })

  it('emits toggle event with correct value', async () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: true },
      slots: { header: 'Header' }
    })

    await wrapper.find('.dm-sidebar__toggle').trigger('click')
    expect(wrapper.emitted('toggle')).toBeTruthy()
    expect(wrapper.emitted('toggle')?.[0]).toEqual([false])

    await wrapper.find('.dm-sidebar__toggle').trigger('click')
    expect(wrapper.emitted('toggle')?.[1]).toEqual([true])
  })

  it('emits open event when opening', async () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: false },
      slots: { header: 'Header' }
    })

    await wrapper.find('.dm-sidebar__toggle').trigger('click')
    expect(wrapper.emitted('open')).toBeTruthy()
  })

  it('emits close event when closing', async () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: true },
      slots: { header: 'Header' }
    })

    await wrapper.find('.dm-sidebar__toggle').trigger('click')
    expect(wrapper.emitted('close')).toBeTruthy()
  })

  it('respects defaultOpen prop', () => {
    const wrapperOpen = mount(DatametriaSidebar, { props: { defaultOpen: true } })
    expect(wrapperOpen.vm.isOpen).toBe(true)

    const wrapperClosed = mount(DatametriaSidebar, { props: { defaultOpen: false } })
    expect(wrapperClosed.vm.isOpen).toBe(false)
  })

  it('updates isOpen when defaultOpen prop changes', async () => {
    const wrapper = mount(DatametriaSidebar, { props: { defaultOpen: true } })
    expect(wrapper.vm.isOpen).toBe(true)

    await wrapper.setProps({ defaultOpen: false })
    expect(wrapper.vm.isOpen).toBe(false)
  })

  it('has correct aria attributes', () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { ariaLabel: 'Test sidebar', defaultOpen: true }
    })
    const sidebar = wrapper.find('.dm-sidebar')
    expect(sidebar.attributes('role')).toBe('complementary')
    expect(sidebar.attributes('aria-label')).toBe('Test sidebar')
    expect(sidebar.attributes('aria-expanded')).toBe('true')
  })

  it('exposes toggle method', () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: true }
    })

    expect(wrapper.vm.isOpen).toBe(true)
    wrapper.vm.toggle()
    expect(wrapper.vm.isOpen).toBe(false)
    wrapper.vm.toggle()
    expect(wrapper.vm.isOpen).toBe(true)
  })

  it('applies collapsed class when closed and collapsible', () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: false }
    })
    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(true)
  })

  it('does not apply collapsed class when open', () => {
    const wrapper = mount(DatametriaSidebar, {
      props: { collapsible: true, defaultOpen: true }
    })
    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(false)
  })
})