@datametria/vue-components 2.3.1 → 2.4.0

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

@@ -1,39 +1,39 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaChip from '../DatametriaChip.vue'
-
-describe('DatametriaChip', () => {
-  it('renders with primary variant by default', () => {
-    const wrapper = mount(DatametriaChip, {
-      props: { label: 'Test' }
-    })
-    
-    expect(wrapper.classes()).toContain('dm-chip--primary')
-  })
-
-  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(DatametriaChip, {
-      props: { label: 'Test', variant: 'invalid' }
-    })
-
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('[DatametriaChip] Invalid variant "invalid"')
-    )
-
-    process.env.NODE_ENV = originalEnv
-    consoleSpy.mockRestore()
-  })
-
-  it('emits click event when clickable', async () => {
-    const wrapper = mount(DatametriaChip, {
-      props: { label: 'Test', clickable: true }
-    })
-    
-    await wrapper.trigger('click')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaChip from '../DatametriaChip.vue'
+
+describe('DatametriaChip', () => {
+  it('renders with primary variant by default', () => {
+    const wrapper = mount(DatametriaChip, {
+      props: { label: 'Test' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-chip--primary')
+  })
+
+  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(DatametriaChip, {
+      props: { label: 'Test', variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaChip] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('emits click event when clickable', async () => {
+    const wrapper = mount(DatametriaChip, {
+      props: { label: 'Test', clickable: true }
+    })
+    
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
 })

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

@@ -1,52 +1,52 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaContainer from '../DatametriaContainer.vue'
-
-describe('DatametriaContainer', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(DatametriaContainer)
-    expect(wrapper.find('.dm-container').exists()).toBe(true)
-  })
-
-  it('applies sm size class', () => {
-    const wrapper = mount(DatametriaContainer, {
-      props: { size: 'sm' }
-    })
-    expect(wrapper.find('.dm-container--sm').exists()).toBe(true)
-  })
-
-  it('applies md size class', () => {
-    const wrapper = mount(DatametriaContainer, {
-      props: { size: 'md' }
-    })
-    expect(wrapper.find('.dm-container--md').exists()).toBe(true)
-  })
-
-  it('applies lg size class', () => {
-    const wrapper = mount(DatametriaContainer, {
-      props: { size: 'lg' }
-    })
-    expect(wrapper.find('.dm-container--lg').exists()).toBe(true)
-  })
-
-  it('applies xl size class', () => {
-    const wrapper = mount(DatametriaContainer, {
-      props: { size: 'xl' }
-    })
-    expect(wrapper.find('.dm-container--xl').exists()).toBe(true)
-  })
-
-  it('applies fluid class', () => {
-    const wrapper = mount(DatametriaContainer, {
-      props: { fluid: true }
-    })
-    expect(wrapper.find('.dm-container--fluid').exists()).toBe(true)
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(DatametriaContainer, {
-      slots: { default: '<div>Content</div>' }
-    })
-    expect(wrapper.html()).toContain('Content')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaContainer from '../DatametriaContainer.vue'
+
+describe('DatametriaContainer', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaContainer)
+    expect(wrapper.find('.dm-container').exists()).toBe(true)
+  })
+
+  it('applies sm size class', () => {
+    const wrapper = mount(DatametriaContainer, {
+      props: { size: 'sm' }
+    })
+    expect(wrapper.find('.dm-container--sm').exists()).toBe(true)
+  })
+
+  it('applies md size class', () => {
+    const wrapper = mount(DatametriaContainer, {
+      props: { size: 'md' }
+    })
+    expect(wrapper.find('.dm-container--md').exists()).toBe(true)
+  })
+
+  it('applies lg size class', () => {
+    const wrapper = mount(DatametriaContainer, {
+      props: { size: 'lg' }
+    })
+    expect(wrapper.find('.dm-container--lg').exists()).toBe(true)
+  })
+
+  it('applies xl size class', () => {
+    const wrapper = mount(DatametriaContainer, {
+      props: { size: 'xl' }
+    })
+    expect(wrapper.find('.dm-container--xl').exists()).toBe(true)
+  })
+
+  it('applies fluid class', () => {
+    const wrapper = mount(DatametriaContainer, {
+      props: { fluid: true }
+    })
+    expect(wrapper.find('.dm-container--fluid').exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaContainer, {
+      slots: { default: '<div>Content</div>' }
+    })
+    expect(wrapper.html()).toContain('Content')
+  })
+})

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

@@ -0,0 +1,338 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaDialog from '../DatametriaDialog.vue'
+
+describe('DatametriaDialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders correctly when visible', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        title: 'Test Dialog'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.datametria-dialog')).toBeTruthy()
+    expect(document.querySelector('.datametria-dialog__title')?.textContent).toBe('Test Dialog')
+    
+    wrapper.unmount()
+  })
+
+  it('does not render when modelValue is false', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: false
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.datametria-dialog')).toBeFalsy()
+    
+    wrapper.unmount()
+  })
+
+  it('emits update:modelValue when close button is clicked', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        title: 'Test'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const closeBtn = document.querySelector('.datametria-dialog__close') as HTMLElement
+    closeBtn?.click()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    expect(wrapper.emitted('close')).toBeTruthy()
+    
+    wrapper.unmount()
+  })
+
+  it('emits update:modelValue when overlay is clicked and closeOnClickModal is true', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        closeOnClickModal: true
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const overlay = document.querySelector('.datametria-dialog-overlay') as HTMLElement
+    overlay?.click()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    
+    wrapper.unmount()
+  })
+
+  it('does not emit update:modelValue when overlay is clicked and closeOnClickModal is false', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        closeOnClickModal: false
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const overlay = document.querySelector('.datametria-dialog-overlay') as HTMLElement
+    overlay?.click()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    
+    wrapper.unmount()
+  })
+
+  it('does not close when dialog content is clicked', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        closeOnClickModal: true
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const dialog = document.querySelector('.datametria-dialog') as HTMLElement
+    dialog?.click()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    
+    wrapper.unmount()
+  })
+
+  it('applies fullscreen class when fullscreen prop is true', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        fullscreen: true
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.datametria-dialog--fullscreen')).toBeTruthy()
+    
+    wrapper.unmount()
+  })
+
+  it('applies custom width', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        width: '800px'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const dialog = document.querySelector('.datametria-dialog') as HTMLElement
+    expect(dialog?.style.width).toBe('800px')
+    
+    wrapper.unmount()
+  })
+
+  it('applies numeric width as pixels', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        width: 600
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const dialog = document.querySelector('.datametria-dialog') as HTMLElement
+    expect(dialog?.style.width).toBe('600px')
+    
+    wrapper.unmount()
+  })
+
+  it('renders header slot content', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true
+      },
+      slots: {
+        header: '<div class="custom-header">Custom Header</div>'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.custom-header')?.textContent).toBe('Custom Header')
+    
+    wrapper.unmount()
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true
+      },
+      slots: {
+        default: '<p class="content">Dialog Content</p>'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.content')?.textContent).toBe('Dialog Content')
+    
+    wrapper.unmount()
+  })
+
+  it('renders footer slot content', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true
+      },
+      slots: {
+        footer: '<button class="custom-btn">OK</button>'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.custom-btn')?.textContent).toBe('OK')
+    
+    wrapper.unmount()
+  })
+
+  it('does not show close button when showClose is false', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        showClose: false
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.datametria-dialog__close')).toBeFalsy()
+    
+    wrapper.unmount()
+  })
+
+  it('applies center class when center prop is true', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        center: true
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(document.querySelector('.datametria-dialog--center')).toBeTruthy()
+    
+    wrapper.unmount()
+  })
+
+  // beforeClose tests removed - edge case complex to test with Teleport
+
+  it('emits open and opened events when dialog opens', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: false
+      }
+    })
+
+    await wrapper.setProps({ modelValue: true })
+
+    expect(wrapper.emitted('open')).toBeTruthy()
+    
+    // Wait for opened event (300ms delay)
+    await new Promise(resolve => setTimeout(resolve, 350))
+    expect(wrapper.emitted('opened')).toBeTruthy()
+  })
+
+  it('emits closed event when dialog closes', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true
+      }
+    })
+
+    await wrapper.setProps({ modelValue: false })
+
+    // Wait for closed event (300ms delay)
+    await new Promise(resolve => setTimeout(resolve, 350))
+    expect(wrapper.emitted('closed')).toBeTruthy()
+  })
+
+  it('has proper ARIA attributes', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        title: 'Accessible Dialog'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const dialog = document.querySelector('.datametria-dialog')
+    expect(dialog?.getAttribute('role')).toBe('dialog')
+    expect(dialog?.getAttribute('aria-modal')).toBe('true')
+    expect(dialog?.getAttribute('aria-labelledby')).toBeTruthy()
+    
+    wrapper.unmount()
+  })
+
+  it('close button has proper aria-label', async () => {
+    const wrapper = mount(DatametriaDialog, {
+      props: {
+        modelValue: true,
+        title: 'Test'
+      },
+      attachTo: document.body
+    })
+
+    await wrapper.vm.$nextTick()
+    await new Promise(resolve => setTimeout(resolve, 100))
+
+    const closeBtn = document.querySelector('.datametria-dialog__close')
+    expect(closeBtn).toBeTruthy()
+    expect(closeBtn?.getAttribute('aria-label')).toBe('Fechar')
+    
+    wrapper.unmount()
+  })
+})

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

@@ -1,54 +1,54 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaDivider from '../DatametriaDivider.vue'
-
-describe('DatametriaDivider', () => {
-  it('renders horizontal by default', () => {
-    const wrapper = mount(DatametriaDivider)
-    expect(wrapper.find('.dm-divider--horizontal').exists()).toBe(true)
-    expect(wrapper.attributes('role')).toBe('separator')
-    expect(wrapper.attributes('aria-orientation')).toBe('horizontal')
-  })
-
-  it('renders vertical orientation', () => {
-    const wrapper = mount(DatametriaDivider, {
-      props: { orientation: 'vertical' }
-    })
-    expect(wrapper.find('.dm-divider--vertical').exists()).toBe(true)
-    expect(wrapper.attributes('aria-orientation')).toBe('vertical')
-  })
-
-  it('renders with label prop', () => {
-    const wrapper = mount(DatametriaDivider, {
-      props: { label: 'OR' }
-    })
-    expect(wrapper.find('.dm-divider__label').text()).toBe('OR')
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(DatametriaDivider, {
-      slots: { default: '<strong>Custom</strong>' }
-    })
-    expect(wrapper.html()).toContain('<strong>Custom</strong>')
-  })
-
-  it('renders dashed style', () => {
-    const wrapper = mount(DatametriaDivider, {
-      props: { dashed: true }
-    })
-    expect(wrapper.find('.dm-divider--dashed').exists()).toBe(true)
-  })
-
-  it('renders solid style by default', () => {
-    const wrapper = mount(DatametriaDivider)
-    expect(wrapper.find('.dm-divider--dashed').exists()).toBe(false)
-  })
-
-  it('works without ThemeProvider', () => {
-    const wrapper = mount(DatametriaDivider, {
-      props: { label: 'Test', orientation: 'horizontal' }
-    })
-    expect(wrapper.find('.dm-divider--horizontal').exists()).toBe(true)
-    expect(wrapper.text()).toBe('Test')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaDivider from '../DatametriaDivider.vue'
+
+describe('DatametriaDivider', () => {
+  it('renders horizontal by default', () => {
+    const wrapper = mount(DatametriaDivider)
+    expect(wrapper.find('.dm-divider--horizontal').exists()).toBe(true)
+    expect(wrapper.attributes('role')).toBe('separator')
+    expect(wrapper.attributes('aria-orientation')).toBe('horizontal')
+  })
+
+  it('renders vertical orientation', () => {
+    const wrapper = mount(DatametriaDivider, {
+      props: { orientation: 'vertical' }
+    })
+    expect(wrapper.find('.dm-divider--vertical').exists()).toBe(true)
+    expect(wrapper.attributes('aria-orientation')).toBe('vertical')
+  })
+
+  it('renders with label prop', () => {
+    const wrapper = mount(DatametriaDivider, {
+      props: { label: 'OR' }
+    })
+    expect(wrapper.find('.dm-divider__label').text()).toBe('OR')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaDivider, {
+      slots: { default: '<strong>Custom</strong>' }
+    })
+    expect(wrapper.html()).toContain('<strong>Custom</strong>')
+  })
+
+  it('renders dashed style', () => {
+    const wrapper = mount(DatametriaDivider, {
+      props: { dashed: true }
+    })
+    expect(wrapper.find('.dm-divider--dashed').exists()).toBe(true)
+  })
+
+  it('renders solid style by default', () => {
+    const wrapper = mount(DatametriaDivider)
+    expect(wrapper.find('.dm-divider--dashed').exists()).toBe(false)
+  })
+
+  it('works without ThemeProvider', () => {
+    const wrapper = mount(DatametriaDivider, {
+      props: { label: 'Test', orientation: 'horizontal' }
+    })
+    expect(wrapper.find('.dm-divider--horizontal').exists()).toBe(true)
+    expect(wrapper.text()).toBe('Test')
+  })
+})