mini-starter/mini/tests/pages/profile.test.tsx

import React from 'react'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import ProfilePage from '../../src/pages/profile/index'

// Mock Taro
const mockShowToast = jest.fn()
const mockShowLoading = jest.fn()
const mockHideLoading = jest.fn()
const mockShowModal = jest.fn()
const mockNavigateTo = jest.fn()
const mockReLaunch = jest.fn()

jest.mock('@tarojs/taro', () => ({
  showToast: mockShowToast,
  showLoading: mockShowLoading,
  hideLoading: mockHideLoading,
  showModal: mockShowModal,
  navigateTo: mockNavigateTo,
  reLaunch: mockReLaunch,
}))

// Mock 微信客服API
const mockOpenCustomerServiceChat = jest.fn()

// 更新Taro mock以包含openCustomerServiceChat
jest.mock('@tarojs/taro', () => ({
  showToast: mockShowToast,
  showLoading: mockShowLoading,
  hideLoading: mockHideLoading,
  showModal: mockShowModal,
  navigateTo: mockNavigateTo,
  reLaunch: mockReLaunch,
  openCustomerServiceChat: mockOpenCustomerServiceChat,
}))

// Mock TabBarLayout 组件
jest.mock('@/layouts/tab-bar-layout', () => ({
  TabBarLayout: jest.fn(({ children, activeKey, className }) => (
    <div data-testid="tab-bar-layout" data-active-key={activeKey} className={className}>
      {children}
    </div>
  ))
}))

// Mock Navbar 组件
jest.mock('@/components/ui/navbar', () => ({
  Navbar: jest.fn(({ title, rightIcon, onClickRight, leftIcon, backgroundColor, textColor, border }) => (
    <div
      data-testid="navbar"
      data-title={title}
      data-right-icon={rightIcon}
      data-left-icon={leftIcon}
      data-background-color={backgroundColor}
      data-text-color={textColor}
      data-border={border}
    >
      <button data-testid="navbar-right-button" onClick={onClickRight}>
        {rightIcon}
      </button>
      <h1>{title}</h1>
    </div>
  ))
}))

// Mock AvatarUpload 组件
jest.mock('@/components/ui/avatar-upload', () => ({
  AvatarUpload: jest.fn(({ currentAvatar, onUploadSuccess, onUploadError, size, editable, className }) => (
    <div
      data-testid="avatar-upload"
      data-current-avatar={currentAvatar}
      data-size={size}
      data-editable={editable}
      className={className}
    >
      <button
        data-testid="avatar-upload-button"
        onClick={() => onUploadSuccess({ fileId: 'test-file-id', fullUrl: 'https://example.com/avatar.jpg' })}
      >
        上传头像
      </button>
      <button
        data-testid="avatar-upload-error-button"
        onClick={() => onUploadError(new Error('Upload failed'))}
      >
        上传失败
      </button>
    </div>
  ))
}))

// Mock Button 组件
jest.mock('@/components/ui/button', () => ({
  Button: jest.fn(({ children, variant, size, onClick, className }) => (
    <button
      data-testid="button"
      data-variant={variant}
      data-size={size}
      className={className}
      onClick={onClick}
    >
      {children}
    </button>
  ))
}))

// Mock useAuth hook
const mockUser = {
  id: 1,
  username: '测试用户',
  avatarFile: {
    fullUrl: 'https://example.com/avatar.jpg'
  }
}

const mockLogout = jest.fn()
const mockUpdateUser = jest.fn()

jest.mock('@/utils/auth', () => ({
  useAuth: jest.fn(() => ({
    user: mockUser,
    logout: mockLogout,
    isLoading: false,
    updateUser: mockUpdateUser
  }))
}))

// Mock cn utility
jest.mock('@/utils/cn', () => ({
  cn: jest.fn((...args) => args.join(' '))
}))

// Mock CSS imports
jest.mock('../../src/pages/profile/index.css', () => ({}))

// 创建测试用的 QueryClient
const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
})

// 包装组件
const Wrapper = ({ children }: { children: React.ReactNode }) => {
  const queryClient = createTestQueryClient()
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  )
}

describe('个人中心页面测试', () => {
  beforeEach(() => {
    jest.clearAllMocks()

    // 设置环境变量
    process.env.TARO_APP_WX_CORP_ID = 'wwc6d7911e2d23b7fb'
    process.env.TARO_APP_WX_KEFU_URL = 'https://work.weixin.qq.com/kfid/kfc5f4d729bc3c893d7'
  })

  test('应该正确渲染个人中心页面', () => {
    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 检查页面标题
    expect(screen.getByText('个人中心')).toBeInTheDocument()

    // 检查用户信息
    expect(screen.getByText('测试用户')).toBeInTheDocument()
    expect(screen.getByText('ID: 0001')).toBeInTheDocument()

    // 检查功能菜单
    expect(screen.getByText('我的服务')).toBeInTheDocument()
    expect(screen.getByText('编辑资料')).toBeInTheDocument()
    expect(screen.getByText('乘车人管理')).toBeInTheDocument()
    expect(screen.getByText('设置')).toBeInTheDocument()
    expect(screen.getByText('隐私政策')).toBeInTheDocument()
    expect(screen.getByText('帮助与反馈')).toBeInTheDocument()

    // 检查客服与帮助区域
    expect(screen.getByText('客服与帮助')).toBeInTheDocument()
    expect(screen.getByText('联系客服')).toBeInTheDocument()
    expect(screen.getByText('7x24小时在线客服')).toBeInTheDocument()
    expect(screen.getByText('常见问题')).toBeInTheDocument()
    expect(screen.getByText('意见反馈')).toBeInTheDocument()

    // 检查版本信息
    expect(screen.getByText('去看出行 v1.0.0')).toBeInTheDocument()
  })

  test('应该处理联系客服功能 - 成功场景', async () => {
    mockOpenCustomerServiceChat.mockImplementation((options) => {
      options.success()
    })

    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击联系客服按钮
    const customerServiceButton = screen.getByText('联系客服')
    fireEvent.click(customerServiceButton)

    // 检查微信客服API被正确调用
    await waitFor(() => {
      expect(mockOpenCustomerServiceChat).toHaveBeenCalledWith({
        extInfo: {
          url: 'https://work.weixin.qq.com/kfid/kfc5f4d729bc3c893d7'
        },
        corpId: 'wwc6d7911e2d23b7fb',
        success: expect.any(Function),
        fail: expect.any(Function)
      })
    })
  })

  test('应该处理联系客服功能 - 失败场景', async () => {
    mockOpenCustomerServiceChat.mockImplementation((options) => {
      options.fail({ errMsg: '客服功能不可用' })
    })

    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击联系客服按钮
    const customerServiceButton = screen.getByText('联系客服')
    fireEvent.click(customerServiceButton)

    // 检查错误提示显示
    await waitFor(() => {
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '客服功能暂不可用，请稍后重试',
        icon: 'none'
      })
    })
  })

  test('应该处理联系客服功能 - 异常场景', async () => {
    mockOpenCustomerServiceChat.mockImplementation(() => {
      throw new Error('API调用异常')
    })

    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击联系客服按钮
    const customerServiceButton = screen.getByText('联系客服')
    fireEvent.click(customerServiceButton)

    // 检查异常处理
    await waitFor(() => {
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '客服功能异常，请稍后重试',
        icon: 'none'
      })
    })
  })

  test('应该处理其他功能按钮点击', () => {
    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击编辑资料按钮
    const editProfileButton = screen.getByText('编辑资料')
    fireEvent.click(editProfileButton)
    expect(mockShowToast).toHaveBeenCalledWith({
      title: '功能开发中...',
      icon: 'none'
    })

    // 点击乘车人管理按钮
    const passengersButton = screen.getByText('乘车人管理')
    fireEvent.click(passengersButton)
    expect(mockNavigateTo).toHaveBeenCalledWith({
      url: '/pages/passengers/passengers'
    })

    // 点击设置按钮
    const settingsButton = screen.getByText('设置')
    fireEvent.click(settingsButton)
    expect(mockShowToast).toHaveBeenCalledWith({
      title: '功能开发中...',
      icon: 'none'
    })

    // 点击常见问题按钮
    const faqButton = screen.getByText('常见问题')
    fireEvent.click(faqButton)
    expect(mockShowToast).toHaveBeenCalledWith({
      title: '常见问题功能开发中...',
      icon: 'none'
    })

    // 点击意见反馈按钮
    const feedbackButton = screen.getByText('意见反馈')
    fireEvent.click(feedbackButton)
    expect(mockShowToast).toHaveBeenCalledWith({
      title: '意见反馈功能开发中...',
      icon: 'none'
    })
  })

  test('应该处理头像上传功能', async () => {
    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击头像上传成功按钮
    const uploadButton = screen.getByTestId('avatar-upload-button')
    fireEvent.click(uploadButton)

    // 检查上传成功处理
    await waitFor(() => {
      expect(mockShowLoading).toHaveBeenCalledWith({ title: '更新头像...' })
      expect(mockHideLoading).toHaveBeenCalled()
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '头像更新成功',
        icon: 'success'
      })
      expect(mockUpdateUser).toHaveBeenCalledWith({
        ...mockUser,
        avatarFileId: 'test-file-id'
      })
    })
  })

  test('应该处理头像上传失败', async () => {
    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击头像上传失败按钮
    const uploadErrorButton = screen.getByTestId('avatar-upload-error-button')
    fireEvent.click(uploadErrorButton)

    // 检查上传失败处理
    await waitFor(() => {
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '上传失败，请重试',
        icon: 'none'
      })
    })
  })

  test('应该处理退出登录', async () => {
    mockShowModal.mockImplementation((options) => {
      options.success({ confirm: true })
    })

    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击退出登录按钮
    const logoutButton = screen.getByText('退出登录')
    fireEvent.click(logoutButton)

    // 检查退出登录流程
    await waitFor(() => {
      expect(mockShowModal).toHaveBeenCalledWith({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: expect.any(Function)
      })
      expect(mockShowLoading).toHaveBeenCalledWith({ title: '退出中...' })
      expect(mockLogout).toHaveBeenCalled()
      expect(mockHideLoading).toHaveBeenCalled()
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '已退出登录',
        icon: 'success',
        duration: 1500
      })
    })
  })

  test('应该处理退出登录取消', async () => {
    mockShowModal.mockImplementation((options) => {
      options.success({ confirm: false })
    })

    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 点击退出登录按钮
    const logoutButton = screen.getByText('退出登录')
    fireEvent.click(logoutButton)

    // 检查取消退出登录
    await waitFor(() => {
      expect(mockShowModal).toHaveBeenCalled()
      expect(mockLogout).not.toHaveBeenCalled()
    })
  })

  test('应该正确使用TabBarLayout', () => {
    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 检查TabBarLayout是否正确使用
    const tabBarLayout = screen.getByTestId('tab-bar-layout')
    expect(tabBarLayout).toHaveAttribute('data-active-key', 'profile')
  })

  test('应该正确使用Navbar', () => {
    render(
      <Wrapper>
        <ProfilePage />
      </Wrapper>
    )

    // 检查Navbar是否正确使用
    const navbar = screen.getByTestId('navbar')
    expect(navbar).toHaveAttribute('data-title', '个人中心')
    expect(navbar).toHaveAttribute('data-right-icon', 'i-heroicons-cog-6-tooth-20-solid')
    expect(navbar).toHaveAttribute('data-background-color', 'bg-primary')
    expect(navbar).toHaveAttribute('data-text-color', 'text-white')
    expect(navbar).toHaveAttribute('data-border', 'false')
  })
})