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

import React from 'react'
import { render, screen, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import ScheduleListPage from '../../src/pages/schedule-list/ScheduleListPage'

// Mock Taro API
jest.mock('@tarojs/taro', () => ({
  useRouter: jest.fn(() => ({
    params: {
      startAreaIds: JSON.stringify([1, 2]),
      endAreaIds: JSON.stringify([3, 4]),
      startAreaName: '',
      endAreaName: '',
      date: '2025-10-31',
      vehicleType: 'bus',
      travelMode: 'carpool',
      activityId: '1',
      routeType: 'departure'
    }
  })),
  navigateTo: jest.fn(),
  navigateBack: jest.fn()
}))

// Mock API client
jest.mock('../../src/api', () => ({
  routeClient: {
    search: {
      $get: jest.fn(() => Promise.resolve({
        status: 200,
        json: () => Promise.resolve({
          data: {
            routes: [
              {
                id: 1,
                name: '测试路线',
                description: null,
                startLocationId: 1,
                endLocationId: 2,
                startLocation: {
                  id: 1,
                  name: '起点',
                  provinceId: 1,
                  cityId: 1,
                  districtId: 1,
                  address: '起点地址'
                },
                endLocation: {
                  id: 2,
                  name: '终点',
                  provinceId: 2,
                  cityId: 2,
                  districtId: 2,
                  address: '终点地址'
                },
                pickupPoint: '上车点',
                dropoffPoint: '下车点',
                departureTime: '2025-10-31T08:00:00Z',
                vehicleType: 'bus',
                travelMode: 'carpool',
                price: 100,
                seatCount: 40,
                availableSeats: 20,
                activityId: 1,
                activity: {
                  id: 1,
                  name: '测试活动',
                  description: null,
                  venueLocationId: 3,
                  venueLocation: {
                    id: 3,
                    name: '活动场地',
                    provinceId: 3,
                    cityId: 3,
                    districtId: 3,
                    address: '活动场地地址'
                  },
                  startDate: '2025-10-31',
                  endDate: '2025-11-01'
                },
                routeType: 'departure',
                isDisabled: 0,
                isDeleted: 0,
                createdAt: '2025-10-31T00:00:00Z',
                updatedAt: '2025-10-31T00:00:00Z'
              }
            ],
            activities: [
              {
                id: 1,
                name: '测试活动',
                description: null,
                venueLocationId: 3,
                venueLocation: {
                  id: 3,
                  name: '活动场地',
                  provinceId: 3,
                  cityId: 3,
                  districtId: 3,
                  address: '活动场地地址'
                },
                startDate: '2025-10-31',
                endDate: '2025-11-01'
              }
            ]
          }
        })
      }))
    }
  }
}))

// Mock date-fns
jest.mock('date-fns', () => ({
  format: jest.fn(() => '08:00'),
  zhCN: {}
}))

// Mock components
jest.mock('../../src/components/ui/navbar', () => ({
  Navbar: ({ title, onClickLeft }: { title: string; onClickLeft: () => void }) => (
    <div data-testid="navbar">
      <div>{title}</div>
      <button onClick={onClickLeft}>返回</button>
    </div>
  ),
  NavbarPresets: {
    primary: {}
  }
}))

const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: { retry: false },
  },
})

const Wrapper = ({ children }: { children: React.ReactNode }) => (
  <QueryClientProvider client={createTestQueryClient()}>
    {children}
  </QueryClientProvider>
)

describe('ScheduleListPage', () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })

  test('应该正确渲染班次页面', async () => {
    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    // 等待数据加载
    await waitFor(() => {
      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('(1个班次)')).toBeInTheDocument()

    // 验证班次详情显示
    expect(screen.getByText('08:00')).toBeInTheDocument()
    expect(screen.getByText('¥100/人')).toBeInTheDocument()
    expect(screen.getByText('大巴拼车')).toBeInTheDocument()
    expect(screen.getByText('拼车')).toBeInTheDocument()
    expect(screen.getByText('上车点')).toBeInTheDocument()
    expect(screen.getByText('下车点')).toBeInTheDocument()
    expect(screen.getByText('剩余20/40座')).toBeInTheDocument()
    expect(screen.getByText('空调')).toBeInTheDocument()
    expect(screen.getByText('免费WiFi')).toBeInTheDocument()

    // 验证预订按钮
    expect(screen.getByText('立即购票')).toBeInTheDocument()
  })

  test('应该隐藏日期选择功能', async () => {
    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    // 等待数据加载
    await waitFor(() => {
      expect(screen.getByText('选择班次')).toBeInTheDocument()
    })

    // 验证日期选择UI组件已隐藏
    // 不应该显示"选择出发日期"文本
    const dateSelectionText = screen.queryByText('选择出发日期')
    expect(dateSelectionText).not.toBeInTheDocument()

    // 不应该显示日期选项
    const dateOptions = screen.queryByText('2025-10-31')
    expect(dateOptions).not.toBeInTheDocument()
  })

  test('应该显示加载状态', () => {
    // Mock loading state
    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockImplementationOnce(
      () => new Promise(() => {}) // Never resolves to simulate loading
    )

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    expect(screen.getByText('加载中...')).toBeInTheDocument()
  })

  test('应该显示无班次状态', async () => {
    // Mock empty data
    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockResolvedValueOnce({
      status: 200,
      json: () => Promise.resolve({
        data: {
          routes: [],
          activities: []
        }
      })
    })

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('暂无班次')).toBeInTheDocument()
    })

    expect(screen.getByText('当前选择的路线暂无可用班次，请返回重新选择路线')).toBeInTheDocument()
  })

  test('应该在没有省市区名称时使用默认值', async () => {
    // Mock router without area names
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementationOnce(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'departure'
      }
    }))

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('选择班次')).toBeInTheDocument()
    })

    // 应该显示路线数据中的起点名称和终点名称
    expect(screen.getByText('起点 → 终点')).toBeInTheDocument()
  })

  test('应该优先使用路由参数中的省市区名称', async () => {
    // Mock router with custom area names
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementation(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        startAreaName: encodeURIComponent('北京市 朝阳区'),
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'departure'
      }
    }))

    // Mock empty route data
    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockImplementation(() => Promise.resolve({
      status: 200,
      json: () => Promise.resolve({
        data: {
          routes: [],
          activities: []
        }
      })
    }))

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('选择班次')).toBeInTheDocument()
    })

    // 等待数据加载完成，确保显示正确的内容
    await waitFor(() => {
      expect(screen.getByText('暂无班次')).toBeInTheDocument()
    })

    // 检查地区名称显示 - 等待组件渲染完成
    await waitFor(() => {
      const areaDisplay = screen.getByTestId('area-display')
      expect(areaDisplay).toHaveTextContent('请选择路线 → 请选择路线')
    }, { timeout: 5000 })
  })

  test('应该在没有路线数据时显示默认地区信息', async () => {
    // Mock empty data and no area names
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementationOnce(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'departure'
      }
    }))

    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockResolvedValueOnce({
      status: 200,
      json: () => Promise.resolve({
        data: {
          routes: [],
          activities: []
        }
      })
    })

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('暂无班次')).toBeInTheDocument()
    })

    // 应该显示默认的起点名称和终点名称
    expect(screen.getByText('请选择路线 → 请选择路线')).toBeInTheDocument()
  })

  test('去程路线应该优化起点显示为省市区格式', async () => {
    // Mock router with area names for departure route
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementation(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        startAreaName: encodeURIComponent('广东省 广州市 市辖区'),
        endAreaName: '',
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'departure'
      }
    }))

    // Mock API to return departure route data
    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockImplementation(() => Promise.resolve({
      status: 200,
      json: () => Promise.resolve({
        data: {
          routes: [
            {
              id: 1,
              name: '测试路线',
              description: null,
              startLocationId: 1,
              endLocationId: 2,
              startLocation: {
                id: 1,
                name: '起点',
                provinceId: 1,
                cityId: 1,
                districtId: 1,
                address: '起点地址'
              },
              endLocation: {
                id: 2,
                name: '终点',
                provinceId: 2,
                cityId: 2,
                districtId: 2,
                address: '终点地址'
              },
              pickupPoint: '上车点',
              dropoffPoint: '下车点',
              departureTime: '2025-10-31T08:00:00Z',
              vehicleType: 'bus',
              travelMode: 'carpool',
              price: 100,
              seatCount: 40,
              availableSeats: 20,
              activityId: 1,
              activity: {
                id: 1,
                name: '测试活动',
                description: null,
                venueLocationId: 3,
                venueLocation: {
                  id: 3,
                  name: '活动场地',
                  provinceId: 3,
                  cityId: 3,
                  districtId: 3,
                  address: '活动场地地址'
                },
                startDate: '2025-10-31',
                endDate: '2025-11-01'
              },
              routeType: 'departure',
              isDisabled: 0,
              isDeleted: 0,
              createdAt: '2025-10-31T00:00:00Z',
              updatedAt: '2025-10-31T00:00:00Z'
            }
          ],
          activities: [
            {
              id: 1,
              name: '测试活动',
              description: null,
              venueLocationId: 3,
              venueLocation: {
                id: 3,
                name: '活动场地',
                provinceId: 3,
                cityId: 3,
                districtId: 3,
                address: '活动场地地址'
              },
              startDate: '2025-10-31',
              endDate: '2025-11-01'
            }
          ]
        }
      })
    }))

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('选择班次')).toBeInTheDocument()
    })

    // 去程路线：应该显示"搜索起点 省份 城市 区县 → 路线终点地点名称"格式
    expect(screen.getByText('广东省 广州市 市辖区 → 终点')).toBeInTheDocument()
  })

  test('返程路线应该优化终点显示为省市区格式', async () => {
    // Mock router with area names for return route
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementation(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        startAreaName: encodeURIComponent('广东省 广州市 市辖区'),
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'return'
      }
    }))

    // Mock API to return return route data
    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockImplementation(() => Promise.resolve({
      status: 200,
      json: () => Promise.resolve({
        data: {
          routes: [
            {
              id: 1,
              name: '测试路线',
              description: null,
              startLocationId: 1,
              endLocationId: 2,
              startLocation: {
                id: 1,
                name: '起点',
                provinceId: 1,
                cityId: 1,
                districtId: 1,
                address: '起点地址'
              },
              endLocation: {
                id: 2,
                name: '终点',
                provinceId: 2,
                cityId: 2,
                districtId: 2,
                address: '终点地址'
              },
              pickupPoint: '上车点',
              dropoffPoint: '下车点',
              departureTime: '2025-10-31T08:00:00Z',
              vehicleType: 'bus',
              travelMode: 'carpool',
              price: 100,
              seatCount: 40,
              availableSeats: 20,
              activityId: 1,
              activity: {
                id: 1,
                name: '测试活动',
                description: null,
                venueLocationId: 3,
                venueLocation: {
                  id: 3,
                  name: '活动场地',
                  provinceId: 3,
                  cityId: 3,
                  districtId: 3,
                  address: '活动场地地址'
                },
                startDate: '2025-10-31',
                endDate: '2025-11-01'
              },
              routeType: 'return',
              isDisabled: 0,
              isDeleted: 0,
              createdAt: '2025-10-31T00:00:00Z',
              updatedAt: '2025-10-31T00:00:00Z'
            }
          ],
          activities: [
            {
              id: 1,
              name: '测试活动',
              description: null,
              venueLocationId: 3,
              venueLocation: {
                id: 3,
                name: '活动场地',
                provinceId: 3,
                cityId: 3,
                districtId: 3,
                address: '活动场地地址'
              },
              startDate: '2025-10-31',
              endDate: '2025-11-01'
            }
          ]
        }
      })
    }))

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('选择班次')).toBeInTheDocument()
    })

    // 返程路线：应该显示"路线起点地点名称 → 搜索起点 省份 城市 区县"格式
    expect(screen.getByText('起点 → 广东省 广州市 市辖区')).toBeInTheDocument()
  })

  test('页面加载时不应该默认选择路线', async () => {
    // Mock router with no route data
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementationOnce(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'departure'
      }
    }))

    const mockApi = require('../../src/api')
    mockApi.routeClient.search.$get.mockResolvedValueOnce({
      status: 200,
      json: () => Promise.resolve({
        data: {
          routes: [],
          activities: []
        }
      })
    })

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('暂无班次')).toBeInTheDocument()
    })

    // 应该显示"请选择路线"而不是默认的路线信息
    expect(screen.getByText('请选择路线 → 请选择路线')).toBeInTheDocument()
    expect(screen.getByText('当前选择的路线暂无可用班次，请返回重新选择路线')).toBeInTheDocument()
  })

  test('应该正确处理省市区信息从路由参数传递', async () => {
    // Mock router with complete area information
    const mockTaro = require('@tarojs/taro')
    mockTaro.useRouter.mockImplementation(() => ({
      params: {
        startAreaIds: JSON.stringify([1, 2]),
        endAreaIds: JSON.stringify([3, 4]),
        startAreaName: encodeURIComponent('北京市 朝阳区'),
        endAreaName: encodeURIComponent('上海市 浦东新区'),
        date: '2025-10-31',
        vehicleType: 'bus',
        travelMode: 'carpool',
        activityId: '1',
        routeType: 'departure'
      }
    }))

    render(
      <Wrapper>
        <ScheduleListPage />
      </Wrapper>
    )

    await waitFor(() => {
      expect(screen.getByText('选择班次')).toBeInTheDocument()
    })

    // 应该正确显示从路由参数传递的省市区信息
    // 去程路线：显示搜索起点省市区到路线终点地点名称
    expect(screen.getByText('北京市 朝阳区 → 终点')).toBeInTheDocument()
  })
})