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

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

// 导入 Taro mock 函数
import taroMock, { mockUseShareAppMessage, mockUseShareTimeline } from '../__mocks__/taroMock'

// Mock API 客户端
const mockAreaClient = {
  provinces: {
    $get: jest.fn()
  },
  cities: {
    $get: jest.fn()
  },
  districts: {
    $get: jest.fn()
  }
}

jest.mock('../../src/api', () => ({
  areaClient: mockAreaClient
}))

// Mock AreaPicker 组件
jest.mock('../../src/components/AreaPicker', () => ({
  AreaPicker: jest.fn(({ visible, onClose, onConfirm, value, title }) => {
    if (!visible) return null

    // 根据标题返回不同的地区数据
    const getAreaData = () => {
      if (title === '选择出发地') {
        return {
          ids: [1, 11, 101],
          infos: [
            { id: 1, name: '北京市', type: 'province' },
            { id: 11, name: '北京市', type: 'city' },
            { id: 101, name: '朝阳区', type: 'district' }
          ]
        }
      } else {
        // 选择目的地时返回不同的地区
        return {
          ids: [2, 22, 202],
          infos: [
            { id: 2, name: '上海市', type: 'province' },
            { id: 22, name: '上海市', type: 'city' },
            { id: 202, name: '浦东新区', type: 'district' }
          ]
        }
      }
    }

    const areaData = getAreaData()

    return (
      <div data-testid="area-picker">
        <div data-testid="area-picker-title">{title}</div>
        <button data-testid="area-picker-confirm" onClick={() => onConfirm(areaData.ids, areaData.infos)}>确认</button>
        <button data-testid="area-picker-cancel" onClick={onClose}>取消</button>
      </div>
    )
  })
}))

// Mock API 客户端
jest.mock('../../src/api', () => ({
  areaClient: {
    provinces: {
      $get: jest.fn(() => Promise.resolve({
        status: 200,
        json: () => Promise.resolve({
          success: true,
          data: {
            provinces: [
              { id: 1, name: '北京市' },
              { id: 2, name: '上海市' },
              { id: 3, name: '广东省' }
            ]
          },
          message: ''
        })
      }))
    },
    cities: {
      $get: jest.fn(() => Promise.resolve({
        status: 200,
        json: () => Promise.resolve({
          success: true,
          data: {
            cities: [
              { id: 11, name: '北京市' },
              { id: 22, name: '上海市' },
              { id: 33, name: '广州市' }
            ]
          },
          message: ''
        })
      }))
    },
    districts: {
      $get: jest.fn(() => Promise.resolve({
        status: 200,
        json: () => Promise.resolve({
          success: true,
          data: {
            districts: [
              { id: 101, name: '朝阳区' },
              { id: 202, name: '浦东新区' },
              { id: 303, name: '天河区' }
            ]
          },
          message: ''
        })
      }))
    }
  }
}))

// 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>
  ))
}))

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

// 保存原始环境变量
const originalEnv = process.env

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

describe('首页集成测试', () => {
  beforeEach(() => {
    jest.clearAllMocks()
    // 恢复原始环境变量
    process.env = { ...originalEnv }
  })

  afterEach(() => {
    // 恢复原始环境变量
    process.env = originalEnv
  })

  test('应该正确渲染首页', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查轮播图
    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('出发日期')).toBeInTheDocument()
    expect(screen.getByText('选择日期')).toBeInTheDocument()

    // 检查查询按钮
    expect(screen.getByText('查询路线')).toBeInTheDocument()

    // 检查MVP限制说明
    expect(screen.getByText('更多功能正在开发中...')).toBeInTheDocument()
  })

  test('应该处理出行方式选择', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 默认选择大巴拼车
    const busOption = screen.getByText('大巴拼车')
    expect(busOption.parentElement).toHaveClass('bg-gradient-to-r')
    expect(busOption.parentElement).toHaveClass('from-primary')
    expect(busOption.parentElement).toHaveClass('to-primary-dark')

    // 选择商务车
    const businessOption = screen.getByText('商务车')
    fireEvent.click(businessOption)

    // 检查商务车被选中
    expect(businessOption.parentElement).toHaveClass('bg-gradient-to-r')
    expect(busOption.parentElement).not.toHaveClass('from-primary')
  })

  test('应该打开出发地选择器', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 初始状态下地区选择器应该隐藏
    expect(screen.queryByTestId('area-picker')).not.toBeInTheDocument()

    // 点击出发地选择按钮
    const startLocationButton = screen.getByText('出发地').closest('button')
    fireEvent.click(startLocationButton!)

    // 检查地区选择器显示
    expect(screen.getByTestId('area-picker')).toBeInTheDocument()
    expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择出发地')
  })

  test('应该打开目的地选择器', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 点击目的地选择按钮
    const endLocationButton = screen.getByText('目的地').closest('button')
    fireEvent.click(endLocationButton!)

    // 检查地区选择器显示
    expect(screen.getByTestId('area-picker')).toBeInTheDocument()
    expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择目的地')
  })

  test('应该处理地区选择确认', async () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 打开出发地选择器
    const startLocationButton = screen.getByText('出发地').closest('button')
    fireEvent.click(startLocationButton!)

    // 确认选择
    const confirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(confirmButton)

    // 检查地区选择器关闭
    await waitFor(() => {
      expect(screen.queryByTestId('area-picker')).not.toBeInTheDocument()
    })

    // 检查出发地显示更新
    await waitFor(() => {
      expect(screen.getByText('北京市 北京市 朝阳区')).toBeInTheDocument()
    })
  })

  test('应该处理地区选择取消', async () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 打开出发地选择器
    const startLocationButton = screen.getByText('出发地').closest('button')
    fireEvent.click(startLocationButton!)

    // 取消选择
    const cancelButton = screen.getByTestId('area-picker-cancel')
    fireEvent.click(cancelButton)

    // 检查地区选择器关闭
    await waitFor(() => {
      expect(screen.queryByTestId('area-picker')).not.toBeInTheDocument()
    })

    // 检查出发地显示未更新
    expect(screen.getByText('请选择地区')).toBeInTheDocument()
  })

  test('应该处理日期选择', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查日期选择器存在
    const datePicker = screen.getByText('选择日期')
    expect(datePicker).toBeInTheDocument()
  })

  test('应该处理出发地和目的地交换', async () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 先设置出发地和目的地
    // 打开出发地选择器并选择
    const startLocationButton = screen.getByText('出发地').closest('button')
    fireEvent.click(startLocationButton!)
    const confirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(confirmButton)

    // 等待出发地设置完成 - 检查按钮文本更新
    await waitFor(() => {
      const locationButtons = screen.getAllByText(/出发地|目的地/)
      const startButton = locationButtons.find(btn => btn.textContent === '出发地')
      expect(startButton?.parentElement?.querySelector('.text-gray-800')).toHaveTextContent('北京市 北京市 朝阳区')
    })

    // 打开目的地选择器并选择
    const endLocationButton = screen.getByText('目的地').closest('button')
    fireEvent.click(endLocationButton!)

    // 等待目的地选择器显示
    await waitFor(() => {
      expect(screen.getByTestId('area-picker')).toBeInTheDocument()
      expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择目的地')
    })

    const destinationConfirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(destinationConfirmButton)

    // 等待地区选择器关闭
    await waitFor(() => {
      expect(screen.queryByTestId('area-picker')).not.toBeInTheDocument()
    })

    // 等待目的地设置完成 - 检查按钮文本更新
    await waitFor(() => {
      const locationButtons = screen.getAllByText(/出发地|目的地/)
      const endButton = locationButtons.find(btn => btn.textContent === '目的地')
      const destinationText = endButton?.parentElement?.querySelector('.text-gray-800')?.textContent
      // 目的地文本应该不再是"默认目的地"，而是实际的地区名称
      expect(destinationText).not.toBe('默认目的地')
      expect(destinationText).toBe('上海市 上海市 浦东新区')
    })

    // 点击交换按钮
    const swapButton = screen.getByText('⇄').closest('button')
    fireEvent.click(swapButton!)

    // 检查出发地和目的地已交换
    await waitFor(() => {
      const locationButtons = screen.getAllByText(/出发地|目的地/)
      const startButton = locationButtons.find(btn => btn.textContent === '出发地')
      const endButton = locationButtons.find(btn => btn.textContent === '目的地')

      // 交换后，出发地应该显示原来的目的地，目的地应该显示原来的出发地
      expect(startButton?.parentElement?.querySelector('.text-gray-800')).toHaveTextContent('上海市 上海市 浦东新区')
      expect(endButton?.parentElement?.querySelector('.text-gray-800')).toHaveTextContent('北京市 北京市 朝阳区')
    })
  })

  test('应该验证查询条件', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 在没有选择出发地和目的地的情况下点击查询
    const searchButton = screen.getByText('查询路线')
    fireEvent.click(searchButton)

    // 检查没有进行导航
    expect(taroMock.navigateTo).not.toHaveBeenCalled()
  })

  test('应该执行路线查询', async () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 设置出发地
    const startLocationButton = screen.getByText('出发地').closest('button')
    fireEvent.click(startLocationButton!)

    // 等待出发地选择器显示
    await waitFor(() => {
      expect(screen.getByTestId('area-picker')).toBeInTheDocument()
      expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择出发地')
    })

    const startConfirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(startConfirmButton)

    // 等待出发地设置完成
    await waitFor(() => {
      expect(screen.getByText('北京市 北京市 朝阳区')).toBeInTheDocument()
    })

    // 设置目的地
    const endLocationButton = screen.getByText('目的地').closest('button')
    fireEvent.click(endLocationButton!)

    // 等待目的地选择器显示
    await waitFor(() => {
      expect(screen.getByTestId('area-picker')).toBeInTheDocument()
      expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择目的地')
    })

    const endConfirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(endConfirmButton)

    // 等待目的地设置完成
    await waitFor(() => {
      expect(screen.getByText('上海市 上海市 浦东新区')).toBeInTheDocument()
    })

    // 点击查询按钮
    const searchButton = screen.getByText('查询路线')
    fireEvent.click(searchButton)

    // 检查导航被调用
    expect(taroMock.navigateTo).toHaveBeenCalledWith({
      url: expect.stringContaining('pages/select-activity/ActivitySelectPage')
    })
  })

  test('应该正确格式化导航参数', async () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 设置出发地
    const startLocationButton = screen.getByText('出发地').closest('button')
    fireEvent.click(startLocationButton!)

    // 等待出发地选择器显示
    await waitFor(() => {
      expect(screen.getByTestId('area-picker')).toBeInTheDocument()
      expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择出发地')
    })

    const startConfirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(startConfirmButton)

    // 等待出发地设置完成
    await waitFor(() => {
      expect(screen.getByText('北京市 北京市 朝阳区')).toBeInTheDocument()
    })

    // 设置目的地
    const endLocationButton = screen.getByText('目的地').closest('button')
    fireEvent.click(endLocationButton!)

    // 等待目的地选择器显示
    await waitFor(() => {
      expect(screen.getByTestId('area-picker')).toBeInTheDocument()
      expect(screen.getByTestId('area-picker-title')).toHaveTextContent('选择目的地')
    })

    const endConfirmButton = screen.getByTestId('area-picker-confirm')
    fireEvent.click(endConfirmButton)

    // 等待目的地设置完成
    await waitFor(() => {
      expect(screen.getByText('上海市 上海市 浦东新区')).toBeInTheDocument()
    })

    // 点击查询按钮
    const searchButton = screen.getByText('查询路线')
    fireEvent.click(searchButton)

    // 检查导航参数格式
    const navigateCall = taroMock.navigateTo.mock.calls[0][0]
    expect(navigateCall.url).toContain('startAreaIds=[1,11,101]')
    expect(navigateCall.url).toContain('endAreaIds=[2,22,202]')
    expect(navigateCall.url).toContain('date=')
    expect(navigateCall.url).toContain('vehicleType=bus')
  })

  test('应该显示正确的布局', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查TabBarLayout是否正确使用
    const tabBarLayout = screen.getByTestId('tab-bar-layout')
    expect(tabBarLayout).toHaveAttribute('data-active-key', 'home')
    expect(tabBarLayout).toHaveClass('bg-gradient-to-b')
    expect(tabBarLayout).toHaveClass('from-primary')
    expect(tabBarLayout).toHaveClass('to-primary-dark')
  })

  test('应该处理默认日期显示', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查日期选择器存在
    const datePicker = screen.getByText('选择日期')
    expect(datePicker).toBeInTheDocument()
  })

  test('应该处理默认出行方式', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查默认选择大巴拼车
    const busOption = screen.getByText('大巴拼车')
    expect(busOption.parentElement).toHaveClass('bg-gradient-to-r')
    expect(busOption.parentElement).toHaveClass('from-primary')
    expect(busOption.parentElement).toHaveClass('to-primary-dark')
  })

  test('应该使用环境变量配置的默认目的地', async () => {
    // 设置环境变量 - 使用mock中存在的地区ID
    process.env.TARO_APP_DEFAULT_END_PROVINCE_ID = '2'
    process.env.TARO_APP_DEFAULT_END_CITY_ID = '22'
    process.env.TARO_APP_DEFAULT_END_DISTRICT_ID = '202'

    // Mock API 响应
    mockAreaClient.provinces.$get.mockResolvedValue({
      status: 200,
      json: async () => ({
        success: true,
        data: {
          provinces: [
            { id: 1, name: '北京市' },
            { id: 2, name: '上海市' },
            { id: 3, name: '广东省' }
          ]
        }
      })
    })

    mockAreaClient.cities.$get.mockResolvedValue({
      status: 200,
      json: async () => ({
        success: true,
        data: {
          cities: [
            { id: 21, name: '北京市', provinceId: 1 },
            { id: 22, name: '上海市', provinceId: 2 },
            { id: 23, name: '广州市', provinceId: 3 }
          ]
        }
      })
    })

    mockAreaClient.districts.$get.mockResolvedValue({
      status: 200,
      json: async () => ({
        success: true,
        data: {
          districts: [
            { id: 201, name: '朝阳区', cityId: 21 },
            { id: 202, name: '浦东新区', cityId: 22 },
            { id: 203, name: '天河区', cityId: 23 }
          ]
        }
      })
    })

    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 等待组件处理环境变量和加载地区数据
    await waitFor(() => {
      // 检查目的地不再显示"请选择地区"，而是显示实际地区名称
      const destinationButton = screen.getByText('目的地').closest('button')
      const pleaseSelectText = destinationButton?.querySelector('span.text-sm.font-medium.text-gray-800.block.mt-1')
      expect(pleaseSelectText).not.toHaveTextContent('请选择地区')

      // 目的地应该显示实际地区名称
      const destinationText = screen.getByText('上海市 上海市 浦东新区')
      expect(destinationText).toBeInTheDocument()
    })
  })

  test('应该处理环境变量配置缺失的情况', () => {
    // 清除环境变量
    delete process.env.TARO_APP_DEFAULT_END_PROVINCE_ID
    delete process.env.TARO_APP_DEFAULT_END_CITY_ID
    delete process.env.TARO_APP_DEFAULT_END_DISTRICT_ID

    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查目的地显示请选择地区
    const destinationText = screen.getByText('请选择地区')
    expect(destinationText).toBeInTheDocument()
  })

  test('应该处理环境变量配置不完整的情况', () => {
    // 只设置部分环境变量
    process.env.TARO_APP_DEFAULT_END_PROVINCE_ID = '4'
    delete process.env.TARO_APP_DEFAULT_END_CITY_ID
    delete process.env.TARO_APP_DEFAULT_END_DISTRICT_ID

    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查目的地显示请选择地区（因为配置不完整）
    const destinationText = screen.getByText('请选择地区')
    expect(destinationText).toBeInTheDocument()
  })

  test('应该处理环境变量格式错误的情况', () => {
    // 设置格式错误的环境变量
    process.env.TARO_APP_DEFAULT_END_PROVINCE_ID = 'invalid'
    process.env.TARO_APP_DEFAULT_END_CITY_ID = '5'
    process.env.TARO_APP_DEFAULT_END_DISTRICT_ID = '6'

    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查目的地显示请选择地区（因为配置格式错误）
    const destinationText = screen.getByText('请选择地区')
    expect(destinationText).toBeInTheDocument()
  })

  test('应该配置分享功能', () => {
    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 检查分享 Hook 被调用
    expect(mockUseShareAppMessage).toHaveBeenCalled()
    expect(mockUseShareTimeline).toHaveBeenCalled()

    // 获取分享 Hook 的回调函数
    const shareAppMessageCallback = mockUseShareAppMessage.mock.calls[0][0]
    const shareTimelineCallback = mockUseShareTimeline.mock.calls[0][0]

    // 测试分享到好友的配置
    const shareAppMessageResult = shareAppMessageCallback()
    expect(shareAppMessageResult).toEqual({
      title: '开心去看，就用去看出行',
      path: '/pages/home/index',
      imageUrl: process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'
    })

    // 测试分享到朋友圈的配置
    const shareTimelineResult = shareTimelineCallback()
    expect(shareTimelineResult).toEqual({
      title: '开心去看，就用去看出行',
      imageUrl: process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'
    })
  })

  test('应该验证分享图片路径配置', () => {
    // 设置环境变量
    process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL = 'https://example.com'

    render(
      <Wrapper>
        <HomePage />
      </Wrapper>
    )

    // 获取分享 Hook 的回调函数
    const shareAppMessageCallback = mockUseShareAppMessage.mock.calls[0][0]
    const shareTimelineCallback = mockUseShareTimeline.mock.calls[0][0]

    // 验证分享图片路径
    const shareAppMessageResult = shareAppMessageCallback()
    expect(shareAppMessageResult.imageUrl).toBe('https://example.com/images/wp_home_share.jpg')

    const shareTimelineResult = shareTimelineCallback()
    expect(shareTimelineResult.imageUrl).toBe('https://example.com/images/wp_home_share.jpg')
  })
})