tg-live-game-web/tests/unit/components/LangDropdown.spec.ts

import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'
import LangDropdown from '@/components/LangDropdown.vue'
import { useAppStore } from '@/store/app'

// Mock i18n
vi.mock('@/locales', () => ({
  default: {
    global: {
      locale: { value: 'zh-cn' }
    }
  }
}))

describe('LangDropdown Component', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    vi.clearAllMocks()
    localStorage.clear()
  })

  const mountLangDropdown = () => {
    return mount(LangDropdown, {
      global: {
        plugins: [createPinia()],
        stubs: {
          'el-dropdown': {
            template:
              '<div class="el-dropdown" @click="$emit(\'command\', \'en\')"><slot /><slot name="dropdown" /></div>',
            props: ['trigger']
          },
          'el-dropdown-menu': { template: '<div class="el-dropdown-menu"><slot /></div>' },
          'el-dropdown-item': {
            template: '<div class="el-dropdown-item" :class="{ active: active }"><slot /></div>',
            props: ['command', 'active']
          },
          'el-icon': { template: '<span class="el-icon"><slot /></span>' },
          ArrowDown: { template: '<span>ArrowDown</span>' },
          Icon: { template: '<span class="iconify-icon"></span>', props: ['icon', 'width', 'height'] }
        }
      }
    })
  }

  describe('渲染', () => {
    it('应该正确渲染语言下拉组件', () => {
      const wrapper = mountLangDropdown()

      expect(wrapper.find('.lang-dropdown').exists()).toBe(true)
    })

    it('应该显示当前语言标签', () => {
      const wrapper = mountLangDropdown()

      expect(wrapper.find('.lang-trigger').exists()).toBe(true)
    })

    it('默认应该显示简体中文', () => {
      const wrapper = mountLangDropdown()

      expect(wrapper.text()).toContain('简体中文')
    })
  })

  describe('语言选项', () => {
    it('应该显示简体中文选项', () => {
      const wrapper = mountLangDropdown()

      expect(wrapper.text()).toContain('简体中文')
    })

    it('应该显示 English 选项', () => {
      const wrapper = mountLangDropdown()

      expect(wrapper.text()).toContain('English')
    })
  })

  describe('语言切换', () => {
    it('切换语言应该调用 changeLanguage', async () => {
      const wrapper = mountLangDropdown()
      const appStore = useAppStore()
      const changeSpy = vi.spyOn(appStore, 'changeLanguage')

      await wrapper.find('.el-dropdown').trigger('click')
      await flushPromises()

      expect(changeSpy).toHaveBeenCalledWith('en')
    })

    it('切换到英文后应该显示 English', async () => {
      const wrapper = mountLangDropdown()
      const appStore = useAppStore()

      appStore.changeLanguage('en')
      await flushPromises()

      expect(wrapper.text()).toContain('English')
    })
  })

  describe('当前语言高亮', () => {
    it('当前选中的语言应该有 active 类', () => {
      const wrapper = mountLangDropdown()

      expect(wrapper.html()).toBeDefined()
    })
  })
})