@datametria/vue-components 2.3.0 → 2.4.0

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

@@ -0,0 +1,357 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaDropdown from '../DatametriaDropdown.vue'
+import type { DropdownItem } from '../src/components/DatametriaDropdown.vue'
+
+describe('DatametriaDropdown', () => {
+  const mockItems: DropdownItem[] = [
+    { label: 'Item 1', value: '1' },
+    { label: 'Item 2', value: '2', icon: '📄' },
+    { label: 'Item 3', value: '3', disabled: true },
+    { label: 'Item 4', value: '4', divided: true }
+  ]
+
+  describe('Rendering', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems }
+      })
+      expect(wrapper.find('.datametria-dropdown').exists()).toBe(true)
+    })
+
+    it('renders default trigger button', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, triggerText: 'Menu' }
+      })
+      expect(wrapper.find('.datametria-dropdown__button').text()).toContain('Menu')
+    })
+
+    it('renders custom trigger via slot', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems },
+        slots: {
+          trigger: '<button class="custom-trigger">Custom</button>'
+        }
+      })
+      expect(wrapper.find('.custom-trigger').exists()).toBe(true)
+    })
+
+    it('renders arrow icon', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems }
+      })
+      expect(wrapper.find('.datametria-dropdown__arrow').exists()).toBe(true)
+    })
+  })
+
+  describe('Click Trigger', () => {
+    it('shows menu on click when trigger is click', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.visible).toBe(true)
+    })
+
+    it('hides menu on second click', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.visible).toBe(true)
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.visible).toBe(false)
+    })
+
+    it('rotates arrow when menu is open', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      const arrow = wrapper.find('.datametria-dropdown__arrow')
+      expect(arrow.classes()).not.toContain('is-open')
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(arrow.classes()).toContain('is-open')
+    })
+  })
+
+  describe('Hover Trigger', () => {
+    it('shows menu on hover when trigger is hover', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'hover' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('mouseenter')
+      expect(wrapper.vm.visible).toBe(true)
+    })
+
+    it('does not show menu on click when trigger is hover', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'hover' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.visible).toBe(false)
+    })
+  })
+
+  describe('Context Menu Trigger', () => {
+    it('shows menu on contextmenu when trigger is contextmenu', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'contextmenu' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('contextmenu')
+      expect(wrapper.vm.visible).toBe(true)
+    })
+  })
+
+  describe('Menu Items', () => {
+    it('renders all menu items when visible', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      const menuItems = wrapper.findAll('.datametria-dropdown__item')
+      expect(menuItems.length).toBe(mockItems.length)
+    })
+
+    it('renders item icons', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      const icon = wrapper.find('.datametria-dropdown__item-icon')
+      expect(icon.text()).toBe('📄')
+    })
+
+    it('applies disabled class to disabled items', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      const items = wrapper.findAll('.datametria-dropdown__item')
+      expect(items[2].classes()).toContain('is-disabled')
+    })
+
+    it('applies divided class to divided items', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      const items = wrapper.findAll('.datametria-dropdown__item')
+      expect(items[3].classes()).toContain('is-divided')
+    })
+  })
+
+  describe('Item Click', () => {
+    it('emits command event on item click', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      await wrapper.findAll('.datametria-dropdown__item')[0].trigger('click')
+
+      expect(wrapper.emitted('command')).toBeTruthy()
+      expect(wrapper.emitted('command')?.[0]).toEqual([mockItems[0]])
+    })
+
+    it('does not emit command for disabled items', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      await wrapper.findAll('.datametria-dropdown__item')[2].trigger('click')
+
+      expect(wrapper.emitted('command')).toBeFalsy()
+    })
+
+    it('closes menu after item click', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.visible).toBe(true)
+
+      await wrapper.findAll('.datametria-dropdown__item')[0].trigger('click')
+      expect(wrapper.vm.visible).toBe(false)
+    })
+
+    it('calls item command function if provided', async () => {
+      const commandFn = vi.fn()
+      const itemsWithCommand: DropdownItem[] = [
+        { label: 'Item 1', value: '1', command: commandFn }
+      ]
+
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: itemsWithCommand, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      await wrapper.find('.datametria-dropdown__item').trigger('click')
+
+      expect(commandFn).toHaveBeenCalled()
+    })
+  })
+
+  describe('Nested Menus', () => {
+    const nestedItems: DropdownItem[] = [
+      {
+        label: 'Parent',
+        value: 'parent',
+        children: [
+          { label: 'Child 1', value: 'child1' },
+          { label: 'Child 2', value: 'child2' }
+        ]
+      }
+    ]
+
+    it('renders submenu arrow for items with children', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: nestedItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.find('.datametria-dropdown__item-arrow').exists()).toBe(true)
+    })
+
+    it('shows submenu on hover', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: nestedItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      await wrapper.find('.datametria-dropdown__item').trigger('mouseenter')
+
+      expect(wrapper.vm.activeSubmenu).toBe(0)
+      expect(wrapper.find('.datametria-dropdown__submenu').exists()).toBe(true)
+    })
+
+    it('does not close menu when clicking parent with children', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: nestedItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.visible).toBe(true)
+
+      await wrapper.find('.datametria-dropdown__item').trigger('click')
+      expect(wrapper.vm.visible).toBe(true)
+    })
+
+    it('emits command when clicking child item', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: nestedItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      await wrapper.find('.datametria-dropdown__item').trigger('mouseenter')
+      
+      const submenuItems = wrapper.findAll('.datametria-dropdown__submenu .datametria-dropdown__item')
+      await submenuItems[0].trigger('click')
+
+      expect(wrapper.emitted('command')).toBeTruthy()
+    })
+  })
+
+  describe('Placement', () => {
+    it('applies bottom placement by default', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.vm.menuPosition.top).toBeGreaterThanOrEqual(0)
+    })
+
+    it('supports top placement', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, placement: 'top' }
+      })
+      expect(wrapper.props('placement')).toBe('top')
+    })
+
+    it('supports left placement', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, placement: 'left' }
+      })
+      expect(wrapper.props('placement')).toBe('left')
+    })
+
+    it('supports right placement', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, placement: 'right' }
+      })
+      expect(wrapper.props('placement')).toBe('right')
+    })
+  })
+
+  describe('Events', () => {
+    it('emits visibleChange when menu opens', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+
+      expect(wrapper.emitted('visibleChange')).toBeTruthy()
+      expect(wrapper.emitted('visibleChange')?.[0]).toEqual([true])
+    })
+
+    it('emits visibleChange when menu closes', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+
+      expect(wrapper.emitted('visibleChange')?.[1]).toEqual([false])
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper structure', () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems }
+      })
+
+      expect(wrapper.find('.datametria-dropdown__trigger').exists()).toBe(true)
+      expect(wrapper.find('.datametria-dropdown__button').exists()).toBe(true)
+    })
+
+    it('applies disabled class to disabled items', async () => {
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: mockItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      const items = wrapper.findAll('.datametria-dropdown__item')
+      expect(items[2].classes()).toContain('is-disabled')
+    })
+
+    it('applies has-children class to parent items', async () => {
+      const nestedItems: DropdownItem[] = [
+        { label: 'Parent', value: 'parent', children: [{ label: 'Child', value: 'child' }] }
+      ]
+      
+      const wrapper = mount(DatametriaDropdown, {
+        props: { items: nestedItems, trigger: 'click' }
+      })
+
+      await wrapper.find('.datametria-dropdown__trigger').trigger('click')
+      expect(wrapper.find('.datametria-dropdown__item').classes()).toContain('has-children')
+    })
+  })
+})

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

@@ -0,0 +1,261 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaEmpty from '../DatametriaEmpty.vue'
+
+describe('DatametriaEmpty', () => {
+  describe('Rendering', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(DatametriaEmpty)
+      expect(wrapper.find('.datametria-empty').exists()).toBe(true)
+    })
+
+    it('renders with description prop', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { description: 'No data available' }
+      })
+      expect(wrapper.text()).toContain('No data available')
+    })
+
+    it('renders description via slot', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          description: '<p class="custom-desc">Custom description</p>'
+        }
+      })
+      expect(wrapper.find('.custom-desc').exists()).toBe(true)
+      expect(wrapper.text()).toContain('Custom description')
+    })
+
+    it('renders default actions slot', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          default: '<button>Add Data</button>'
+        }
+      })
+      expect(wrapper.find('.datametria-empty__actions').exists()).toBe(true)
+      expect(wrapper.text()).toContain('Add Data')
+    })
+  })
+
+  describe('Image Types', () => {
+    it('renders no-data SVG by default', () => {
+      const wrapper = mount(DatametriaEmpty)
+      const svg = wrapper.find('.datametria-empty__svg')
+      expect(svg.exists()).toBe(true)
+    })
+
+    it('renders no-data image type', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { imageType: 'no-data' }
+      })
+      expect(wrapper.find('.datametria-empty__svg').exists()).toBe(true)
+    })
+
+    it('renders no-results image type', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { imageType: 'no-results' }
+      })
+      const svg = wrapper.find('.datametria-empty__svg')
+      expect(svg.exists()).toBe(true)
+      expect(svg.html()).toContain('circle')
+      expect(svg.html()).toContain('line')
+    })
+
+    it('renders error image type', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { imageType: 'error' }
+      })
+      const svg = wrapper.find('.datametria-empty__svg')
+      expect(svg.exists()).toBe(true)
+      expect(svg.html()).toContain('circle')
+    })
+
+    it('renders custom image when provided', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: {
+          image: '/path/to/image.png',
+          imageAlt: 'Custom empty state'
+        }
+      })
+      const img = wrapper.find('.datametria-empty__custom-image')
+      expect(img.exists()).toBe(true)
+      expect(img.attributes('src')).toBe('/path/to/image.png')
+      expect(img.attributes('alt')).toBe('Custom empty state')
+    })
+
+    it('renders custom image via slot', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          image: '<img src="/custom.png" class="my-image" />'
+        }
+      })
+      expect(wrapper.find('.my-image').exists()).toBe(true)
+    })
+  })
+
+  describe('Props', () => {
+    it('accepts description prop', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { description: 'Test description' }
+      })
+      expect(wrapper.props('description')).toBe('Test description')
+    })
+
+    it('accepts image prop', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { image: '/test.png' }
+      })
+      expect(wrapper.props('image')).toBe('/test.png')
+    })
+
+    it('accepts imageAlt prop', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { image: '/test.png', imageAlt: 'Test alt' }
+      })
+      expect(wrapper.props('imageAlt')).toBe('Test alt')
+    })
+
+    it('accepts imageType prop', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { imageType: 'error' }
+      })
+      expect(wrapper.props('imageType')).toBe('error')
+    })
+  })
+
+  describe('Slots', () => {
+    it('has image slot', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          image: '<div class="custom-image">Custom</div>'
+        }
+      })
+      expect(wrapper.find('.custom-image').exists()).toBe(true)
+    })
+
+    it('has description slot', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          description: '<div class="custom-desc">Custom</div>'
+        }
+      })
+      expect(wrapper.find('.custom-desc').exists()).toBe(true)
+    })
+
+    it('has default slot for actions', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          default: '<button class="action-btn">Action</button>'
+        }
+      })
+      expect(wrapper.find('.action-btn').exists()).toBe(true)
+    })
+
+    it('does not render actions container without default slot', () => {
+      const wrapper = mount(DatametriaEmpty)
+      expect(wrapper.find('.datametria-empty__actions').exists()).toBe(false)
+    })
+  })
+
+  describe('Structure', () => {
+    it('has correct structure', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { description: 'Test' },
+        slots: { default: '<button>Action</button>' }
+      })
+
+      expect(wrapper.find('.datametria-empty').exists()).toBe(true)
+      expect(wrapper.find('.datametria-empty__image').exists()).toBe(true)
+      expect(wrapper.find('.datametria-empty__description').exists()).toBe(true)
+      expect(wrapper.find('.datametria-empty__actions').exists()).toBe(true)
+    })
+
+    it('renders image before description', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { description: 'Test' }
+      })
+
+      const children = wrapper.find('.datametria-empty').element.children
+      expect(children[0].classList.contains('datametria-empty__image')).toBe(true)
+      expect(children[1].classList.contains('datametria-empty__description')).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role status', () => {
+      const wrapper = mount(DatametriaEmpty)
+      expect(wrapper.attributes('role')).toBe('status')
+    })
+
+    it('has aria-live polite', () => {
+      const wrapper = mount(DatametriaEmpty)
+      expect(wrapper.attributes('aria-live')).toBe('polite')
+    })
+
+    it('has alt text for custom image', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: {
+          image: '/test.png',
+          imageAlt: 'Empty state illustration'
+        }
+      })
+      const img = wrapper.find('.datametria-empty__custom-image')
+      expect(img.attributes('alt')).toBe('Empty state illustration')
+    })
+
+    it('uses default alt text when not provided', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { image: '/test.png' }
+      })
+      const img = wrapper.find('.datametria-empty__custom-image')
+      expect(img.attributes('alt')).toBe('Empty state')
+    })
+  })
+
+  describe('Computed Properties', () => {
+    it('imageType is null when custom image is provided', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: {
+          image: '/custom.png',
+          imageType: 'no-data'
+        }
+      })
+      expect(wrapper.vm.imageType).toBeNull()
+    })
+
+    it('imageType returns prop value when no custom image', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { imageType: 'error' }
+      })
+      expect(wrapper.vm.imageType).toBe('error')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('renders without any props', () => {
+      const wrapper = mount(DatametriaEmpty)
+      expect(wrapper.find('.datametria-empty').exists()).toBe(true)
+      expect(wrapper.find('.datametria-empty__svg').exists()).toBe(true)
+    })
+
+    it('renders with empty description', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        props: { description: '' }
+      })
+      expect(wrapper.find('.datametria-empty__text').exists()).toBe(false)
+    })
+
+    it('renders with all slots', () => {
+      const wrapper = mount(DatametriaEmpty, {
+        slots: {
+          image: '<div>Image</div>',
+          description: '<div>Description</div>',
+          default: '<div>Actions</div>'
+        }
+      })
+      expect(wrapper.text()).toContain('Image')
+      expect(wrapper.text()).toContain('Description')
+      expect(wrapper.text()).toContain('Actions')
+    })
+  })
+})