@datametria/vue-components/src/components/__tests__/DatametriaNavbar.test.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

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)
    })
  })
})