@datametria/vue-components 2.3.1 → 2.4.0

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

@@ -1,203 +1,203 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaNavbar from '../DatametriaNavbar.vue'
-
-describe('DatametriaNavbar', () => {
-  describe('Renderização', () => {
-    it('renderiza corretamente', () => {
-      const wrapper = mount(DatametriaNavbar)
-      expect(wrapper.find('.dm-navbar').exists()).toBe(true)
-    })
-
-    it('renderiza brand text', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { brand: 'DATAMETRIA' }
-      })
-      expect(wrapper.text()).toContain('DATAMETRIA')
-    })
-
-    it('renderiza slot brand customizado', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { brand: '<div class="custom-brand">Custom</div>' }
-      })
-      expect(wrapper.find('.custom-brand').exists()).toBe(true)
-    })
-
-    it('renderiza slot menu', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div class="menu-items">Items</div>' }
-      })
-      expect(wrapper.find('.menu-items').exists()).toBe(true)
-    })
-
-    it('renderiza slot actions', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { actions: '<button>Login</button>' }
-      })
-      expect(wrapper.find('.dm-navbar__actions').exists()).toBe(true)
-    })
-  })
-
-  describe('Variants', () => {
-    it('aplica variant light por padrão', () => {
-      const wrapper = mount(DatametriaNavbar)
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--light')
-    })
-
-    it('aplica variant dark', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { variant: 'dark' }
-      })
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--dark')
-    })
-
-    it('aplica variant primary', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { variant: 'primary' }
-      })
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--primary')
-    })
-
-    it('aplica variant transparent', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { variant: 'transparent' }
-      })
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--transparent')
-    })
-  })
-
-  describe('Props', () => {
-    it('aceita sticky', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { sticky: true }
-      })
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--sticky')
-    })
-
-    it('aceita transparent', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { transparent: true }
-      })
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--transparent')
-    })
-
-    it('aceita bordered', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { bordered: true }
-      })
-      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--bordered')
-    })
-
-    it('aceita ariaLabel customizado', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        props: { ariaLabel: 'Custom navigation' }
-      })
-      expect(wrapper.find('nav').attributes('aria-label')).toBe('Custom navigation')
-    })
-  })
-
-  describe('Mobile Menu', () => {
-    it('mostra toggle quando há slot menu', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      expect(wrapper.find('.dm-navbar__toggle').exists()).toBe(true)
-    })
-
-    it('não mostra toggle quando não há slot menu', () => {
-      const wrapper = mount(DatametriaNavbar)
-      expect(wrapper.find('.dm-navbar__toggle').exists()).toBe(false)
-    })
-
-    it('abre menu ao clicar no toggle', async () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      
-      const toggle = wrapper.find('.dm-navbar__toggle')
-      await toggle.trigger('click')
-      
-      expect(wrapper.find('.dm-navbar__menu').classes()).toContain('dm-navbar__menu--open')
-    })
-
-    it('fecha menu ao clicar novamente no toggle', async () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      
-      const toggle = wrapper.find('.dm-navbar__toggle')
-      await toggle.trigger('click')
-      await toggle.trigger('click')
-      
-      expect(wrapper.find('.dm-navbar__menu').classes()).not.toContain('dm-navbar__menu--open')
-    })
-  })
-
-  describe('Acessibilidade', () => {
-    it('tem role navigation', () => {
-      const wrapper = mount(DatametriaNavbar)
-      expect(wrapper.find('nav').attributes('role')).toBe('navigation')
-    })
-
-    it('tem aria-label padrão', () => {
-      const wrapper = mount(DatametriaNavbar)
-      expect(wrapper.find('nav').attributes('aria-label')).toBe('Main navigation')
-    })
-
-    it('toggle tem aria-expanded', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-expanded')).toBe('false')
-    })
-
-    it('toggle atualiza aria-expanded quando aberto', async () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      
-      await wrapper.find('.dm-navbar__toggle').trigger('click')
-      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-expanded')).toBe('true')
-    })
-
-    it('toggle tem aria-controls', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-controls')).toBe('navbar-menu')
-    })
-
-    it('menu tem id correto', () => {
-      const wrapper = mount(DatametriaNavbar, {
-        slots: { menu: '<div>Menu</div>' }
-      })
-      expect(wrapper.find('.dm-navbar__menu').attributes('id')).toBe('navbar-menu')
-    })
-  })
-
-  describe('Validação', () => {
-    it('valida variant inválido em desenvolvimento', () => {
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-      const originalEnv = process.env.NODE_ENV
-      process.env.NODE_ENV = 'development'
-
-      mount(DatametriaNavbar, {
-        props: { variant: 'invalid' as any }
-      })
-
-      expect(consoleSpy).toHaveBeenCalledWith(
-        expect.stringContaining('[DatametriaNavbar] Invalid variant "invalid"')
-      )
-
-      process.env.NODE_ENV = originalEnv
-      consoleSpy.mockRestore()
-    })
-  })
-
-  describe('CSS Variables', () => {
-    it('usa CSS Variables padronizadas', () => {
-      const wrapper = mount(DatametriaNavbar)
-      expect(wrapper.find('.dm-navbar').exists()).toBe(true)
-    })
-  })
-})
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaNavbar from '../DatametriaNavbar.vue'
+
+describe('DatametriaNavbar', () => {
+  describe('Renderização', () => {
+    it('renderiza corretamente', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar').exists()).toBe(true)
+    })
+
+    it('renderiza brand text', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { brand: 'DATAMETRIA' }
+      })
+      expect(wrapper.text()).toContain('DATAMETRIA')
+    })
+
+    it('renderiza slot brand customizado', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { brand: '<div class="custom-brand">Custom</div>' }
+      })
+      expect(wrapper.find('.custom-brand').exists()).toBe(true)
+    })
+
+    it('renderiza slot menu', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div class="menu-items">Items</div>' }
+      })
+      expect(wrapper.find('.menu-items').exists()).toBe(true)
+    })
+
+    it('renderiza slot actions', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { actions: '<button>Login</button>' }
+      })
+      expect(wrapper.find('.dm-navbar__actions').exists()).toBe(true)
+    })
+  })
+
+  describe('Variants', () => {
+    it('aplica variant light por padrão', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--light')
+    })
+
+    it('aplica variant dark', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { variant: 'dark' }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--dark')
+    })
+
+    it('aplica variant primary', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { variant: 'primary' }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--primary')
+    })
+
+    it('aplica variant transparent', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { variant: 'transparent' }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--transparent')
+    })
+  })
+
+  describe('Props', () => {
+    it('aceita sticky', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { sticky: true }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--sticky')
+    })
+
+    it('aceita transparent', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { transparent: true }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--transparent')
+    })
+
+    it('aceita bordered', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { bordered: true }
+      })
+      expect(wrapper.find('.dm-navbar').classes()).toContain('dm-navbar--bordered')
+    })
+
+    it('aceita ariaLabel customizado', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        props: { ariaLabel: 'Custom navigation' }
+      })
+      expect(wrapper.find('nav').attributes('aria-label')).toBe('Custom navigation')
+    })
+  })
+
+  describe('Mobile Menu', () => {
+    it('mostra toggle quando há slot menu', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__toggle').exists()).toBe(true)
+    })
+
+    it('não mostra toggle quando não há slot menu', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar__toggle').exists()).toBe(false)
+    })
+
+    it('abre menu ao clicar no toggle', async () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      
+      const toggle = wrapper.find('.dm-navbar__toggle')
+      await toggle.trigger('click')
+      
+      expect(wrapper.find('.dm-navbar__menu').classes()).toContain('dm-navbar__menu--open')
+    })
+
+    it('fecha menu ao clicar novamente no toggle', async () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      
+      const toggle = wrapper.find('.dm-navbar__toggle')
+      await toggle.trigger('click')
+      await toggle.trigger('click')
+      
+      expect(wrapper.find('.dm-navbar__menu').classes()).not.toContain('dm-navbar__menu--open')
+    })
+  })
+
+  describe('Acessibilidade', () => {
+    it('tem role navigation', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('nav').attributes('role')).toBe('navigation')
+    })
+
+    it('tem aria-label padrão', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('nav').attributes('aria-label')).toBe('Main navigation')
+    })
+
+    it('toggle tem aria-expanded', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-expanded')).toBe('false')
+    })
+
+    it('toggle atualiza aria-expanded quando aberto', async () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      
+      await wrapper.find('.dm-navbar__toggle').trigger('click')
+      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-expanded')).toBe('true')
+    })
+
+    it('toggle tem aria-controls', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__toggle').attributes('aria-controls')).toBe('navbar-menu')
+    })
+
+    it('menu tem id correto', () => {
+      const wrapper = mount(DatametriaNavbar, {
+        slots: { menu: '<div>Menu</div>' }
+      })
+      expect(wrapper.find('.dm-navbar__menu').attributes('id')).toBe('navbar-menu')
+    })
+  })
+
+  describe('Validação', () => {
+    it('valida variant inválido em desenvolvimento', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const originalEnv = process.env.NODE_ENV
+      process.env.NODE_ENV = 'development'
+
+      mount(DatametriaNavbar, {
+        props: { variant: 'invalid' as any }
+      })
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[DatametriaNavbar] Invalid variant "invalid"')
+      )
+
+      process.env.NODE_ENV = originalEnv
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('usa CSS Variables padronizadas', () => {
+      const wrapper = mount(DatametriaNavbar)
+      expect(wrapper.find('.dm-navbar').exists()).toBe(true)
+    })
+  })
+})