@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/__tests__/DatametriaSidebar.test.ts

@@ -1,169 +1,169 @@
-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)
-  })
-})
+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)
+  })
+})