@datametria/vue-components 2.3.0 → 2.4.0

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

@@ -1,36 +1,36 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaAlert from '../DatametriaAlert.vue'
-
-describe('DatametriaAlert', () => {
-  it('renders with primary variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { 
-        variant: 'primary',
-        message: 'Test message'
-      }
-    })
-    
-    expect(wrapper.classes()).toContain('datametria-alert--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(DatametriaAlert, {
-      props: { 
-        variant: 'invalid',
-        message: 'Test'
-      }
-    })
-
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining('[DatametriaAlert] Invalid variant "invalid"')
-    )
-
-    process.env.NODE_ENV = originalEnv
-    consoleSpy.mockRestore()
-  })
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAlert from '../DatametriaAlert.vue'
+
+describe('DatametriaAlert', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { 
+        variant: 'primary',
+        message: 'Test message'
+      }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-alert--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(DatametriaAlert, {
+      props: { 
+        variant: 'invalid',
+        message: 'Test'
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaAlert] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
 })

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

@@ -1,190 +1,190 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaAlert from '../DatametriaAlert.vue'
-
-describe('DatametriaAlert', () => {
-  // Rendering tests
-  it('renders with default props', () => {
-    const wrapper = mount(DatametriaAlert)
-    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
-    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
-  })
-
-  it('renders with custom message', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { message: 'Test message' }
-    })
-    expect(wrapper.text()).toContain('Test message')
-  })
-
-  it('renders with title and message', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: {
-        title: 'Test Title',
-        message: 'Test message'
-      }
-    })
-    expect(wrapper.find('.datametria-alert__title').text()).toBe('Test Title')
-    expect(wrapper.find('.datametria-alert__message').text()).toBe('Test message')
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(DatametriaAlert, {
-      slots: {
-        default: '<strong>Custom content</strong>'
-      }
-    })
-    expect(wrapper.html()).toContain('<strong>Custom content</strong>')
-  })
-
-  // Variant tests
-  it('renders success variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'success' }
-    })
-    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
-    expect(wrapper.text()).toContain('✓')
-  })
-
-  it('renders error variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'error' }
-    })
-    expect(wrapper.find('.datametria-alert--error').exists()).toBe(true)
-    expect(wrapper.text()).toContain('✕')
-  })
-
-  it('renders warning variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'warning' }
-    })
-    expect(wrapper.find('.datametria-alert--warning').exists()).toBe(true)
-    expect(wrapper.text()).toContain('⚠')
-  })
-
-  it('renders info variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'info' }
-    })
-    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
-    expect(wrapper.text()).toContain('ℹ')
-  })
-
-  it('renders primary variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'primary' }
-    })
-    expect(wrapper.find('.datametria-alert--primary').exists()).toBe(true)
-    expect(wrapper.text()).toContain('ℹ')
-  })
-
-  // Closable tests
-  it('renders close button when closable', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { closable: true }
-    })
-    expect(wrapper.find('.datametria-alert__close').exists()).toBe(true)
-  })
-
-  it('does not render close button when not closable', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { closable: false }
-    })
-    expect(wrapper.find('.datametria-alert__close').exists()).toBe(false)
-  })
-
-  it('emits update:modelValue when close button clicked', async () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { closable: true }
-    })
-    await wrapper.find('.datametria-alert__close').trigger('click')
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
-  })
-
-  // v-model tests
-  it('shows alert when modelValue is true', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { modelValue: true }
-    })
-    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
-  })
-
-  it('hides alert when modelValue is false', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { modelValue: false }
-    })
-    expect(wrapper.find('.datametria-alert').exists()).toBe(false)
-  })
-
-  // CSS Variables tests
-  it('uses CSS variables for success variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'success' }
-    })
-    const alert = wrapper.find('.datametria-alert--success')
-    const style = getComputedStyle(alert.element)
-    
-    // Verifica que as CSS variables estão sendo usadas
-    expect(alert.element.className).toContain('datametria-alert--success')
-  })
-
-  it('uses CSS variables for error variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'error' }
-    })
-    const alert = wrapper.find('.datametria-alert--error')
-    expect(alert.element.className).toContain('datametria-alert--error')
-  })
-
-  it('uses CSS variables for warning variant', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: { variant: 'warning' }
-    })
-    const alert = wrapper.find('.datametria-alert--warning')
-    expect(alert.element.className).toContain('datametria-alert--warning')
-  })
-
-  it('uses CSS variables for spacing and typography', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: {
-        title: 'Title',
-        message: 'Message'
-      }
-    })
-    
-    // Verifica estrutura
-    expect(wrapper.find('.datametria-alert__icon').exists()).toBe(true)
-    expect(wrapper.find('.datametria-alert__content').exists()).toBe(true)
-    expect(wrapper.find('.datametria-alert__title').exists()).toBe(true)
-    expect(wrapper.find('.datametria-alert__message').exists()).toBe(true)
-  })
-
-  // Backward compatibility tests
-  it('works without ThemeProvider (fallback values)', () => {
-    const wrapper = mount(DatametriaAlert, {
-      props: {
-        variant: 'success',
-        title: 'Success',
-        message: 'Operation completed'
-      }
-    })
-    
-    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
-    expect(wrapper.text()).toContain('Success')
-    expect(wrapper.text()).toContain('Operation completed')
-  })
-
-  it('maintains visual consistency across variants', () => {
-    const variants: Array<'success' | 'error' | 'warning' | 'info' | 'primary'> = [
-      'success', 'error', 'warning', 'info', 'primary'
-    ]
-    
-    variants.forEach(variant => {
-      const wrapper = mount(DatametriaAlert, {
-        props: { variant }
-      })
-      expect(wrapper.find(`.datametria-alert--${variant}`).exists()).toBe(true)
-    })
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAlert from '../DatametriaAlert.vue'
+
+describe('DatametriaAlert', () => {
+  // Rendering tests
+  it('renders with default props', () => {
+    const wrapper = mount(DatametriaAlert)
+    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
+  })
+
+  it('renders with custom message', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { message: 'Test message' }
+    })
+    expect(wrapper.text()).toContain('Test message')
+  })
+
+  it('renders with title and message', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: {
+        title: 'Test Title',
+        message: 'Test message'
+      }
+    })
+    expect(wrapper.find('.datametria-alert__title').text()).toBe('Test Title')
+    expect(wrapper.find('.datametria-alert__message').text()).toBe('Test message')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaAlert, {
+      slots: {
+        default: '<strong>Custom content</strong>'
+      }
+    })
+    expect(wrapper.html()).toContain('<strong>Custom content</strong>')
+  })
+
+  // Variant tests
+  it('renders success variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'success' }
+    })
+    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
+    expect(wrapper.text()).toContain('✓')
+  })
+
+  it('renders error variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'error' }
+    })
+    expect(wrapper.find('.datametria-alert--error').exists()).toBe(true)
+    expect(wrapper.text()).toContain('✕')
+  })
+
+  it('renders warning variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'warning' }
+    })
+    expect(wrapper.find('.datametria-alert--warning').exists()).toBe(true)
+    expect(wrapper.text()).toContain('⚠')
+  })
+
+  it('renders info variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'info' }
+    })
+    expect(wrapper.find('.datametria-alert--info').exists()).toBe(true)
+    expect(wrapper.text()).toContain('ℹ')
+  })
+
+  it('renders primary variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'primary' }
+    })
+    expect(wrapper.find('.datametria-alert--primary').exists()).toBe(true)
+    expect(wrapper.text()).toContain('ℹ')
+  })
+
+  // Closable tests
+  it('renders close button when closable', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { closable: true }
+    })
+    expect(wrapper.find('.datametria-alert__close').exists()).toBe(true)
+  })
+
+  it('does not render close button when not closable', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { closable: false }
+    })
+    expect(wrapper.find('.datametria-alert__close').exists()).toBe(false)
+  })
+
+  it('emits update:modelValue when close button clicked', async () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { closable: true }
+    })
+    await wrapper.find('.datametria-alert__close').trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+
+  // v-model tests
+  it('shows alert when modelValue is true', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { modelValue: true }
+    })
+    expect(wrapper.find('.datametria-alert').exists()).toBe(true)
+  })
+
+  it('hides alert when modelValue is false', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { modelValue: false }
+    })
+    expect(wrapper.find('.datametria-alert').exists()).toBe(false)
+  })
+
+  // CSS Variables tests
+  it('uses CSS variables for success variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'success' }
+    })
+    const alert = wrapper.find('.datametria-alert--success')
+    const style = getComputedStyle(alert.element)
+    
+    // Verifica que as CSS variables estão sendo usadas
+    expect(alert.element.className).toContain('datametria-alert--success')
+  })
+
+  it('uses CSS variables for error variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'error' }
+    })
+    const alert = wrapper.find('.datametria-alert--error')
+    expect(alert.element.className).toContain('datametria-alert--error')
+  })
+
+  it('uses CSS variables for warning variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { variant: 'warning' }
+    })
+    const alert = wrapper.find('.datametria-alert--warning')
+    expect(alert.element.className).toContain('datametria-alert--warning')
+  })
+
+  it('uses CSS variables for spacing and typography', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: {
+        title: 'Title',
+        message: 'Message'
+      }
+    })
+    
+    // Verifica estrutura
+    expect(wrapper.find('.datametria-alert__icon').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert__content').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert__title').exists()).toBe(true)
+    expect(wrapper.find('.datametria-alert__message').exists()).toBe(true)
+  })
+
+  // Backward compatibility tests
+  it('works without ThemeProvider (fallback values)', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: {
+        variant: 'success',
+        title: 'Success',
+        message: 'Operation completed'
+      }
+    })
+    
+    expect(wrapper.find('.datametria-alert--success').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Success')
+    expect(wrapper.text()).toContain('Operation completed')
+  })
+
+  it('maintains visual consistency across variants', () => {
+    const variants: Array<'success' | 'error' | 'warning' | 'info' | 'primary'> = [
+      'success', 'error', 'warning', 'info', 'primary'
+    ]
+    
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaAlert, {
+        props: { variant }
+      })
+      expect(wrapper.find(`.datametria-alert--${variant}`).exists()).toBe(true)
+    })
+  })
+})