@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/__tests__/DatametriaToast.test.js

@@ -1,49 +1,49 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaToast from '../DatametriaToast.vue'
-
-describe('DatametriaToast', () => {
-  it('renders with primary variant', () => {
-    // Create body element for Teleport
-    const body = document.createElement('div')
-    document.body.appendChild(body)
-    
-    const wrapper = mount(DatametriaToast, {
-      props: { 
-        message: 'Test message',
-        variant: 'primary',
-        modelValue: true
-      },
-      attachTo: body
-    })
-    
-    // Check if toast exists in document body
-    const toast = document.querySelector('.dm-toast')
-    expect(toast).toBeTruthy()
-    expect(toast.classList.contains('dm-toast--primary')).toBe(true)
-    
-    wrapper.unmount()
-    document.body.removeChild(body)
-  })
-
-  it('validates invalid variant in development', () => {
-    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    const originalEnv = process.env.NODE_ENV
-    process.env.NODE_ENV = 'development'
-
-    mount(DatametriaToast, {
-      props: { 
-        message: 'Test',
-        variant: 'invalid',
-        modelValue: true
-      }
-    })
-
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('[DatametriaToast] Invalid variant "invalid"')
-    )
-
-    process.env.NODE_ENV = originalEnv
-    consoleSpy.mockRestore()
-  })
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaToast from '../DatametriaToast.vue'
+
+describe('DatametriaToast', () => {
+  it('renders with primary variant', () => {
+    // Create body element for Teleport
+    const body = document.createElement('div')
+    document.body.appendChild(body)
+    
+    const wrapper = mount(DatametriaToast, {
+      props: { 
+        message: 'Test message',
+        variant: 'primary',
+        modelValue: true
+      },
+      attachTo: body
+    })
+    
+    // Check if toast exists in document body
+    const toast = document.querySelector('.dm-toast')
+    expect(toast).toBeTruthy()
+    expect(toast.classList.contains('dm-toast--primary')).toBe(true)
+    
+    wrapper.unmount()
+    document.body.removeChild(body)
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaToast, {
+      props: { 
+        message: 'Test',
+        variant: 'invalid',
+        modelValue: true
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaToast] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
 })

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

@@ -1,99 +1,99 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaToast from '../DatametriaToast.vue'
-
-describe.skip('DatametriaToast', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('renders correctly when visible', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test message', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast')
-  })
-
-  it('displays message correctly', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test message', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('Test message')
-  })
-
-  it('applies success variant class', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Success', variant: 'success', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast--success')
-  })
-
-  it('applies error variant class', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Error', variant: 'error', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast--error')
-  })
-
-  it('applies warning variant class', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Warning', variant: 'warning', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast--warning')
-  })
-
-  it('applies primary variant class', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Primary', variant: 'primary', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast--primary')
-  })
-
-  it('applies info variant class', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Info', variant: 'info', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast--info')
-  })
-
-  it('renders close button when closable', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test', closable: true, modelValue: true }
-    })
-    expect(wrapper.html()).toContain('dm-toast__close')
-  })
-
-  it('does not render close button when not closable', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test', closable: false, modelValue: true }
-    })
-    expect(wrapper.html()).not.toContain('dm-toast__close')
-  })
-
-  it('emits update:modelValue when close called', async () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test', closable: true, modelValue: true }
-    })
-    await (wrapper.vm as any).close()
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
-  })
-
-  it('emits close event when close called', async () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test', closable: true, modelValue: true }
-    })
-    await (wrapper.vm as any).close()
-    expect(wrapper.emitted('close')).toBeTruthy()
-  })
-
-  it('uses CSS variables with fallbacks', () => {
-    const wrapper = mount(DatametriaToast, {
-      props: { message: 'Test', modelValue: true }
-    })
-    expect(wrapper.html()).toContain('--dm-')
-  })
-})
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaToast from '../DatametriaToast.vue'
+
+describe.skip('DatametriaToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders correctly when visible', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test message', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast')
+  })
+
+  it('displays message correctly', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test message', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('Test message')
+  })
+
+  it('applies success variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Success', variant: 'success', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--success')
+  })
+
+  it('applies error variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Error', variant: 'error', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--error')
+  })
+
+  it('applies warning variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Warning', variant: 'warning', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--warning')
+  })
+
+  it('applies primary variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Primary', variant: 'primary', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--primary')
+  })
+
+  it('applies info variant class', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Info', variant: 'info', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast--info')
+  })
+
+  it('renders close button when closable', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: true, modelValue: true }
+    })
+    expect(wrapper.html()).toContain('dm-toast__close')
+  })
+
+  it('does not render close button when not closable', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: false, modelValue: true }
+    })
+    expect(wrapper.html()).not.toContain('dm-toast__close')
+  })
+
+  it('emits update:modelValue when close called', async () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: true, modelValue: true }
+    })
+    await (wrapper.vm as any).close()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  it('emits close event when close called', async () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', closable: true, modelValue: true }
+    })
+    await (wrapper.vm as any).close()
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('uses CSS variables with fallbacks', () => {
+    const wrapper = mount(DatametriaToast, {
+      props: { message: 'Test', modelValue: true }
+    })
+    expect(wrapper.html()).toContain('--dm-')
+  })
+})

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

@@ -0,0 +1,376 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaTree from '../DatametriaTree.vue'
+import type { TreeNode } from '../src/components/DatametriaTree.vue'
+
+describe('DatametriaTree', () => {
+  const mockData: TreeNode[] = [
+    {
+      id: '1',
+      label: 'Node 1',
+      children: [
+        { id: '1-1', label: 'Node 1-1' },
+        { id: '1-2', label: 'Node 1-2' }
+      ]
+    },
+    {
+      id: '2',
+      label: 'Node 2',
+      children: [
+        {
+          id: '2-1',
+          label: 'Node 2-1',
+          children: [
+            { id: '2-1-1', label: 'Node 2-1-1' }
+          ]
+        }
+      ]
+    },
+    { id: '3', label: 'Node 3' }
+  ]
+
+  describe('Rendering', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.find('.datametria-tree').exists()).toBe(true)
+    })
+
+    it('renders all root nodes', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      const nodes = wrapper.findAll('.datametria-tree-node')
+      expect(nodes.length).toBeGreaterThanOrEqual(3)
+    })
+
+    it('renders node labels', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.text()).toContain('Node 1')
+      expect(wrapper.text()).toContain('Node 2')
+      expect(wrapper.text()).toContain('Node 3')
+    })
+
+    it('renders with custom nodeKey', () => {
+      const customData = [
+        { key: 'a', name: 'Item A' },
+        { key: 'b', name: 'Item B' }
+      ]
+      const wrapper = mount(DatametriaTree, {
+        props: { data: customData, nodeKey: 'key' }
+      })
+      expect(wrapper.text()).toContain('Item A')
+      expect(wrapper.text()).toContain('Item B')
+    })
+  })
+
+  describe('Expand/Collapse', () => {
+    it('nodes are collapsed by default', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.text()).not.toContain('Node 1-1')
+    })
+
+    it('expands node on click', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      const firstNode = wrapper.find('.datametria-tree-node__content')
+      await firstNode.trigger('click')
+
+      expect(wrapper.text()).toContain('Node 1-1')
+      expect(wrapper.text()).toContain('Node 1-2')
+    })
+
+    it('collapses expanded node on click', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      const firstNode = wrapper.find('.datametria-tree-node__content')
+      await firstNode.trigger('click')
+      expect(wrapper.text()).toContain('Node 1-1')
+
+      await firstNode.trigger('click')
+      expect(wrapper.text()).not.toContain('Node 1-1')
+    })
+
+    it('expands all nodes when defaultExpandAll is true', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, defaultExpandAll: true }
+      })
+
+      expect(wrapper.text()).toContain('Node 1-1')
+      expect(wrapper.text()).toContain('Node 1-2')
+      expect(wrapper.text()).toContain('Node 2-1')
+      expect(wrapper.text()).toContain('Node 2-1-1')
+    })
+
+    it('expands specific nodes with defaultExpandedKeys', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: {
+          data: mockData,
+          defaultExpandedKeys: ['1']
+        }
+      })
+
+      expect(wrapper.text()).toContain('Node 1-1')
+      expect(wrapper.text()).toContain('Node 1-2')
+      expect(wrapper.text()).not.toContain('Node 2-1')
+    })
+
+    it('shows expand icon for parent nodes', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      const expandIcons = wrapper.findAll('.datametria-tree-node__icon')
+      expect(expandIcons.length).toBeGreaterThan(0)
+    })
+
+    it('changes icon when expanded', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      const expandIcon = wrapper.find('.datametria-tree-node__icon')
+      expect(expandIcon.text()).toBe('▶')
+
+      const firstNode = wrapper.find('.datametria-tree-node__content')
+      await firstNode.trigger('click')
+
+      expect(expandIcon.text()).toBe('▼')
+    })
+  })
+
+  describe('Checkable', () => {
+    it('does not show checkboxes by default', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.find('.datametria-tree-node__checkbox').exists()).toBe(false)
+    })
+
+    it('shows checkboxes when checkable is true', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, checkable: true }
+      })
+      const checkboxes = wrapper.findAll('.datametria-tree-node__checkbox')
+      expect(checkboxes.length).toBeGreaterThan(0)
+    })
+
+    it('checks node when checkbox is clicked', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, checkable: true }
+      })
+
+      const checkbox = wrapper.find('.datametria-tree-node__checkbox')
+      await checkbox.setValue(true)
+
+      expect((checkbox.element as HTMLInputElement).checked).toBe(true)
+    })
+
+    it('checks specific nodes with defaultCheckedKeys', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: {
+          data: mockData,
+          checkable: true,
+          defaultCheckedKeys: ['1', '3']
+        }
+      })
+
+      const checkboxes = wrapper.findAll('.datametria-tree-node__checkbox')
+      expect((checkboxes[0].element as HTMLInputElement).checked).toBe(true)
+    })
+  })
+
+  describe('Events', () => {
+    it('emits nodeExpand when node is expanded', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      const firstNode = wrapper.find('.datametria-tree-node__content')
+      await firstNode.trigger('click')
+
+      expect(wrapper.emitted('nodeExpand')).toBeTruthy()
+      expect(wrapper.emitted('nodeExpand')?.[0][0]).toEqual(mockData[0])
+    })
+
+    it('emits nodeCollapse when node is collapsed', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      const firstNode = wrapper.find('.datametria-tree-node__content')
+      await firstNode.trigger('click')
+      await firstNode.trigger('click')
+
+      expect(wrapper.emitted('nodeCollapse')).toBeTruthy()
+    })
+
+    it('emits check event when checkbox is changed', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, checkable: true }
+      })
+
+      const checkbox = wrapper.find('.datametria-tree-node__checkbox')
+      await checkbox.setValue(true)
+
+      expect(wrapper.emitted('check')).toBeTruthy()
+    })
+  })
+
+  describe('Props', () => {
+    it('accepts data prop', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.props('data')).toEqual(mockData)
+    })
+
+    it('accepts nodeKey prop', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, nodeKey: 'id' }
+      })
+      expect(wrapper.props('nodeKey')).toBe('id')
+    })
+
+    it('accepts defaultExpandAll prop', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, defaultExpandAll: true }
+      })
+      expect(wrapper.props('defaultExpandAll')).toBe(true)
+    })
+
+    it('accepts checkable prop', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, checkable: true }
+      })
+      expect(wrapper.props('checkable')).toBe(true)
+    })
+  })
+
+  describe('Methods', () => {
+    it('exposes expandAll method', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.vm.expandAll).toBeDefined()
+    })
+
+    it('exposes collapseAll method', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.vm.collapseAll).toBeDefined()
+    })
+
+    it('expandAll expands all nodes', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      expect(wrapper.text()).not.toContain('Node 1-1')
+
+      wrapper.vm.expandAll()
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Node 1-1')
+      expect(wrapper.text()).toContain('Node 2-1-1')
+    })
+
+    it('collapseAll collapses all nodes', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData, defaultExpandAll: true }
+      })
+
+      expect(wrapper.text()).toContain('Node 1-1')
+
+      wrapper.vm.collapseAll()
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).not.toContain('Node 1-1')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role tree', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      expect(wrapper.attributes('role')).toBe('tree')
+    })
+
+    it('tree nodes have role treeitem', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+      const nodes = wrapper.findAll('[role="treeitem"]')
+      expect(nodes.length).toBeGreaterThan(0)
+    })
+
+    it('expanded nodes have aria-expanded true', async () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: mockData }
+      })
+
+      const firstNode = wrapper.find('.datametria-tree-node__content')
+      await firstNode.trigger('click')
+
+      const treeItem = wrapper.find('[role="treeitem"]')
+      expect(treeItem.attributes('aria-expanded')).toBe('true')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('renders with empty data', () => {
+      const wrapper = mount(DatametriaTree, {
+        props: { data: [] }
+      })
+      expect(wrapper.find('.datametria-tree').exists()).toBe(true)
+    })
+
+    it('handles nodes without children', () => {
+      const simpleData = [{ id: '1', label: 'Leaf Node' }]
+      const wrapper = mount(DatametriaTree, {
+        props: { data: simpleData }
+      })
+      expect(wrapper.text()).toContain('Leaf Node')
+    })
+
+    it('handles deeply nested nodes', () => {
+      const deepData = [
+        {
+          id: '1',
+          label: 'Level 1',
+          children: [
+            {
+              id: '1-1',
+              label: 'Level 2',
+              children: [
+                {
+                  id: '1-1-1',
+                  label: 'Level 3',
+                  children: [
+                    { id: '1-1-1-1', label: 'Level 4' }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+
+      const wrapper = mount(DatametriaTree, {
+        props: { data: deepData, defaultExpandAll: true }
+      })
+
+      expect(wrapper.text()).toContain('Level 4')
+    })
+  })
+})