初始化

2025-11-03 19:47:36 +08:00
parent 7a04b85667
commit f25b0307db
454 changed files with 37064 additions and 4544 deletions
--- a/frontend/tests/unit/components/Header.spec.js
+++ b/frontend/tests/unit/components/Header.spec.js
@@ -0,0 +1,281 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import Header from '@/components/Header.vue'
+import { useCategoryStore } from '@/stores/categoryStore'
+
+// 模拟路由
+const mockRouter = {
+  push: vi.fn(),
+  replace: vi.fn(),
+  go: vi.fn(),
+  back: vi.fn(),
+  forward: vi.fn(),
+  currentRoute: {
+    value: {
+      path: '/',
+      name: 'Home',
+      params: {},
+      query: {},
+      hash: '',
+      fullPath: '/',
+      matched: [],
+      meta: {},
+    }
+  }
+}
+
+// 模拟Element Plus组件
+vi.mock('element-plus', () => ({
+  ElMenu: {
+    name: 'ElMenu',
+    template: '<div class="el-menu"><slot></slot></div>',
+    props: ['mode', 'default-active', 'router']
+  },
+  ElMenuItem: {
+    name: 'ElMenuItem',
+    template: '<div class="el-menu-item" @click="$emit(\'click\')"><slot></slot></div>',
+    props: ['index']
+  },
+  ElSubMenu: {
+    name: 'ElSubMenu',
+    template: '<div class="el-sub-menu"><slot name="title"></slot><slot></slot></div>',
+    props: ['index']
+  },
+  ElButton: {
+    name: 'ElButton',
+    template: '<button class="el-button" @click="$emit(\'click\')"><slot></slot></button>',
+    props: ['type', 'size', 'icon']
+  },
+  ElIcon: {
+    name: 'ElIcon',
+    template: '<i class="el-icon"><slot></slot></i>'
+  },
+  ElDropdown: {
+    name: 'ElDropdown',
+    template: '<div class="el-dropdown"><slot></slot></div>',
+    props: ['trigger']
+  },
+  ElDropdownMenu: {
+    name: 'ElDropdownMenu',
+    template: '<div class="el-dropdown-menu"><slot></slot></div>'
+  },
+  ElDropdownItem: {
+    name: 'ElDropdownItem',
+    template: '<div class="el-dropdown-item" @click="$emit(\'click\')"><slot></slot></div>'
+  },
+  ElDrawer: {
+    name: 'ElDrawer',
+    template: '<div class="el-drawer" v-if="modelValue"><slot></slot></div>',
+    props: ['modelValue', 'title', 'direction', 'size'],
+    emits: ['update:modelValue']
+  }
+}))
+
+// 模拟Element Plus图标
+vi.mock('@element-plus/icons-vue', () => ({
+  Menu: { name: 'Menu', template: '<i class="icon-menu"></i>' },
+  Close: { name: 'Close', template: '<i class="icon-close"></i>' },
+  User: { name: 'User', template: '<i class="icon-user"></i>' },
+  Setting: { name: 'Setting', template: '<i class="icon-setting"></i>' },
+  Monitor: { name: 'Monitor', template: '<i class="icon-monitor"></i>' },
+  DataAnalysis: { name: 'DataAnalysis', template: '<i class="icon-data-analysis"></i>' }
+}))
+
+describe('Header.vue', () => {
+  let wrapper
+  let pinia
+  let categoryStore
+
+  beforeEach(() => {
+    // 创建Pinia实例
+    pinia = createPinia()
+    setActivePinia(pinia)
+    
+    // 获取store实例
+    categoryStore = useCategoryStore()
+    
+    // 模拟store数据
+    categoryStore.categories = [
+      { id: 1, name: '手机CPU', productCount: 50 },
+      { id: 2, name: '手机GPU', productCount: 40 },
+      { id: 3, name: '电脑CPU', productCount: 60 },
+      { id: 4, name: '电脑GPU', productCount: 45 }
+    ]
+    
+    // 挂载组件
+    wrapper = mount(Header, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $router: mockRouter
+        },
+        stubs: {
+          'router-link': true,
+          'router-view': true,
+          'cache-status-indicator': true
+        }
+      }
+    })
+  })
+
+  it('应该正确渲染Header组件', () => {
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.header').exists()).toBe(true)
+    expect(wrapper.find('.header__logo').exists()).toBe(true)
+    expect(wrapper.find('.header__nav').exists()).toBe(true)
+  })
+
+  it('应该显示应用标题', () => {
+    const title = wrapper.find('.header__title')
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('硬件性能排行榜')
+  })
+
+  it('应该显示产品类别菜单', async () => {
+    // 等待组件加载完成
+    await wrapper.vm.$nextTick()
+    
+    // 检查类别菜单是否存在
+    const categoryMenu = wrapper.find('.category-menu')
+    expect(categoryMenu.exists()).toBe(true)
+    
+    // 检查类别数量
+    const menuItems = wrapper.findAll('.el-menu-item')
+    expect(menuItems.length).toBeGreaterThan(0)
+  })
+
+  it('应该显示产品对比按钮', () => {
+    const compareButton = wrapper.find('[data-testid="compare-button"]')
+    expect(compareButton.exists()).toBe(true)
+    expect(compareButton.text()).toContain('产品对比')
+  })
+
+  it('应该显示性能监控按钮', () => {
+    const monitorButton = wrapper.find('[data-testid="monitor-button"]')
+    expect(monitorButton.exists()).toBe(true)
+    expect(monitorButton.text()).toContain('性能监控')
+  })
+
+  it('应该响应式地在移动端显示菜单按钮', async () => {
+    // 模拟移动端窗口大小
+    global.innerWidth = 500
+    window.dispatchEvent(new Event('resize'))
+    await wrapper.vm.$nextTick()
+    
+    // 检查移动端菜单按钮是否存在
+    const menuButton = wrapper.find('.header__mobile-menu')
+    expect(menuButton.exists()).toBe(true)
+  })
+
+  it('应该正确处理菜单点击事件', async () => {
+    // 获取第一个菜单项
+    const firstMenuItem = wrapper.find('.el-menu-item')
+    expect(firstMenuItem.exists()).toBe(true)
+    
+    // 点击菜单项
+    await firstMenuItem.trigger('click')
+    
+    // 检查是否触发了路由导航
+    // 注意：由于使用了router-link stub，这里需要检查组件内部逻辑
+    // 在实际测试中，你可能需要模拟router-link的行为或检查组件内部状态
+  })
+
+  it('应该正确处理产品对比按钮点击', async () => {
+    const compareButton = wrapper.find('[data-testid="compare-button"]')
+    expect(compareButton.exists()).toBe(true)
+    
+    // 点击产品对比按钮
+    await compareButton.trigger('click')
+    
+    // 检查是否触发了路由导航
+    expect(mockRouter.push).toHaveBeenCalledWith('/compare')
+  })
+
+  it('应该正确处理性能监控按钮点击', async () => {
+    const monitorButton = wrapper.find('[data-testid="monitor-button"]')
+    expect(monitorButton.exists()).toBe(true)
+    
+    // 点击性能监控按钮
+    await monitorButton.trigger('click')
+    
+    // 检查是否触发了路由导航
+    expect(mockRouter.push).toHaveBeenCalledWith('/monitor')
+  })
+
+  it('应该在移动端正确处理菜单展开/收起', async () => {
+    // 模拟移动端窗口大小
+    global.innerWidth = 500
+    window.dispatchEvent(new Event('resize'))
+    await wrapper.vm.$nextTick()
+    
+    // 获取菜单按钮
+    const menuButton = wrapper.find('.header__mobile-menu')
+    expect(menuButton.exists()).toBe(true)
+    
+    // 点击菜单按钮
+    await menuButton.trigger('click')
+    
+    // 检查菜单是否展开
+    expect(wrapper.vm.mobileMenuVisible).toBe(true)
+    
+    // 再次点击菜单按钮
+    await menuButton.trigger('click')
+    
+    // 检查菜单是否收起
+    expect(wrapper.vm.mobileMenuVisible).toBe(false)
+  })
+
+  it('应该正确计算当前激活的菜单项', async () => {
+    // 模拟当前路由为类别页面
+    mockRouter.currentRoute.value.path = '/category/1'
+    await wrapper.vm.$nextTick()
+    
+    // 检查当前激活的菜单项
+    expect(wrapper.vm.activeMenuItem).toBe('category')
+  })
+
+  it('应该在组件挂载时加载类别数据', async () => {
+    // 模拟fetchCategories方法
+    const fetchCategoriesSpy = vi.spyOn(categoryStore, 'fetchCategories')
+    
+    // 重新挂载组件
+    wrapper = mount(Header, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $router: mockRouter
+        },
+        stubs: {
+          'router-link': true,
+          'router-view': true,
+          'cache-status-indicator': true
+        }
+      }
+    })
+    
+    // 等待组件加载完成
+    await wrapper.vm.$nextTick()
+    
+    // 检查是否调用了fetchCategories
+    expect(fetchCategoriesSpy).toHaveBeenCalled()
+  })
+
+  it('应该正确处理窗口大小变化', async () => {
+    // 模拟桌面端窗口大小
+    global.innerWidth = 1200
+    window.dispatchEvent(new Event('resize'))
+    await wrapper.vm.$nextTick()
+    
+    // 检查isMobile计算属性
+    expect(wrapper.vm.isMobile).toBe(false)
+    
+    // 模拟移动端窗口大小
+    global.innerWidth = 500
+    window.dispatchEvent(new Event('resize'))
+    await wrapper.vm.$nextTick()
+    
+    // 检查isMobile计算属性
+    expect(wrapper.vm.isMobile).toBe(true)
+  })
+})