DP/tests/frontend/Profile.test.ts

/**
 * Profile组件测试
 */

import { describe, it, expect, beforeEach, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import Profile from '../../../src/view/Profile.vue'
import axios from 'axios'

vi.mock('axios')

const mockRouter = {
  push: vi.fn()
}

vi.mock('vue-router', () => ({
  useRouter: () => mockRouter
}))

describe('Profile', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    localStorage.setItem('username', 'testuser')
    localStorage.setItem('token', 'test_token')
  })

  it('应该正确渲染组件', () => {
    const wrapper = mount(Profile)
    expect(wrapper.find('.profile-page').exists()).toBe(true)
  })

  it('应该显示用户基本信息', async () => {
    const mockProfile = {
      username: 'testuser',
      nickname: '测试昵称',
      email: 'test@example.com',
      points: 1200,
      level: 3,
      vip_type: 'vip',
      total_check_in_days: 30,
      consecutive_check_in: 7
    }

    ;(axios.get as any).mockResolvedValueOnce({
      data: { code: 200, data: mockProfile }
    }).mockResolvedValueOnce({
      data: { code: 200, data: { total: 0, current_balance: 1200, records: [] } }
    })

    const wrapper = mount(Profile)
    await new Promise(resolve => setTimeout(resolve, 100))

    expect(wrapper.text()).toContain('测试昵称')
    expect(wrapper.text()).toContain('testuser')
  })

  it('应该显示统计数据卡片', async () => {
    const mockProfile = {
      username: 'testuser',
      points: 1200,
      total_check_in_days: 30,
      consecutive_check_in: 7,
      vip_type: 'vip'
    }

    ;(axios.get as any).mockResolvedValue({
      data: { code: 200, data: mockProfile }
    })

    const wrapper = mount(Profile)
    await new Promise(resolve => setTimeout(resolve, 100))

    expect(wrapper.findAll('.stat-card').length).toBeGreaterThan(0)
  })

  it('应该能够编辑资料', async () => {
    const mockProfile = {
      username: 'testuser',
      nickname: '旧昵称',
      points: 1000
    }

    ;(axios.get as any).mockResolvedValue({
      data: { code: 200, data: mockProfile }
    })
    ;(axios.put as any).mockResolvedValue({
      data: { code: 200, message: '更新成功' }
    })

    const wrapper = mount(Profile)
    await new Promise(resolve => setTimeout(resolve, 100))

    // 模拟点击编辑按钮
    const editButton = wrapper.find('button')
    if (editButton.exists() && editButton.text().includes('编辑')) {
      await editButton.trigger('click')
      // 编辑对话框应该打开
      await wrapper.vm.$nextTick()
    }
  })

  it('应该显示VIP徽章', async () => {
    const mockProfile = {
      username: 'testuser',
      vip_type: 'svip',
      points: 2000
    }

    ;(axios.get as any).mockResolvedValue({
      data: { code: 200, data: mockProfile }
    })

    const wrapper = mount(Profile)
    await new Promise(resolve => setTimeout(resolve, 100))

    expect(wrapper.html()).toContain('SVIP')
  })

  it('应该显示积分历史列表', async () => {
    const mockProfile = {
      username: 'testuser',
      points: 1000
    }

    const mockHistory = {
      total: 10,
      current_balance: 1000,
      records: [
        {
          type: 'checkin',
          amount: 30,
          balance: 1000,
          description: '每日签到',
          created_at: '2024-01-01T10:00:00'
        },
        {
          type: 'consume',
          amount: -50,
          balance: 970,
          description: '使用AI配色',
          created_at: '2024-01-01T09:00:00'
        }
      ]
    }

    ;(axios.get as any)
      .mockResolvedValueOnce({ data: { code: 200, data: mockProfile } })
      .mockResolvedValueOnce({ data: { code: 200, data: mockHistory } })

    const wrapper = mount(Profile)
    await new Promise(resolve => setTimeout(resolve, 100))

    expect(wrapper.text()).toContain('每日签到')
    expect(wrapper.text()).toContain('使用AI配色')
  })

  it('积分变动应该有不同颜色', async () => {
    const mockHistory = {
      total: 2,
      current_balance: 1000,
      records: [
        { type: 'checkin', amount: 30, balance: 1000, description: '签到', created_at: '2024-01-01' },
        { type: 'consume', amount: -50, balance: 970, description: '消费', created_at: '2024-01-01' }
      ]
    }

    ;(axios.get as any).mockResolvedValue({
      data: { code: 200, data: mockHistory }
    })

    const wrapper = mount(Profile)
    await new Promise(resolve => setTimeout(resolve, 200))

    // 正数应该是绿色，负数应该是红色
    const html = wrapper.html()
    expect(html).toContain('positive')
    expect(html).toContain('negative')
  })
})