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

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', () => {
  it('renders with primary variant', () => {
    const wrapper = mount(DatametriaNavbar, {
      props: { variant: 'primary' }
    })
    
    expect(wrapper.classes()).toContain('dm-navbar--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(DatametriaNavbar, {
      props: { variant: 'invalid' }
    })

    expect(consoleSpy).toHaveBeenCalledWith(
      expect.stringContaining('[DatametriaNavbar] Invalid variant "invalid"')
    )

    process.env.NODE_ENV = originalEnv
    consoleSpy.mockRestore()
  })

  it('renders brand text', () => {
    const wrapper = mount(DatametriaNavbar, {
      props: { brand: 'DATAMETRIA' }
    })
    
    expect(wrapper.text()).toContain('DATAMETRIA')
  })

  it('toggles mobile menu', async () => {
    const wrapper = mount(DatametriaNavbar, {
      slots: { menu: '<div>Menu items</div>' }
    })
    
    const toggle = wrapper.find('.dm-navbar__toggle')
    await toggle.trigger('click')
    
    expect(wrapper.find('.dm-navbar__menu').classes()).toContain('dm-navbar__menu--open')
  })
})