mini-starter/mini/tests/components/RouteFilter.test.tsx

import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import { RouteFilter } from '../../src/components/RouteFilter'

describe('RouteFilter 组件', () => {
  test('应该正确渲染组件', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 检查路线类型筛选
    expect(screen.getByText('全部')).toBeInTheDocument()
    expect(screen.getByText('去程')).toBeInTheDocument()
    expect(screen.getByText('返程')).toBeInTheDocument()

    // 检查筛选按钮
    expect(screen.getByText('筛选')).toBeInTheDocument()

    // 检查当前筛选状态显示
    expect(screen.getByText('出发时间↑')).toBeInTheDocument()
  })

  test('应该处理路线类型选择', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 点击去程选项
    const departureOption = screen.getByText('去程')
    fireEvent.click(departureOption)

    // 检查回调被调用
    expect(onRouteTypeChange).toHaveBeenCalledWith('departure')
    expect(onVehicleTypeChange).not.toHaveBeenCalled()
    expect(onSortChange).not.toHaveBeenCalled()
  })

  test('应该处理车辆类型选择', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 点击筛选按钮展开扩展筛选区域
    const filterButton = screen.getByText('筛选')
    fireEvent.click(filterButton)

    // 点击大巴拼车选项
    const busOption = screen.getByText('大巴拼车')
    fireEvent.click(busOption)

    // 检查回调被调用
    expect(onVehicleTypeChange).toHaveBeenCalledWith('bus')
    expect(onRouteTypeChange).not.toHaveBeenCalled()
    expect(onSortChange).not.toHaveBeenCalled()
  })

  test('应该处理排序选择', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 点击筛选按钮展开扩展筛选区域
    const filterButton = screen.getByText('筛选')
    fireEvent.click(filterButton)

    // 点击价格排序选项
    const priceSortOption = screen.getByText('价格')
    fireEvent.click(priceSortOption)

    // 检查回调被调用
    expect(onSortChange).toHaveBeenCalledWith('price', 'asc')
    expect(onRouteTypeChange).not.toHaveBeenCalled()
    expect(onVehicleTypeChange).not.toHaveBeenCalled()
  })

  test('应该处理排序方向切换', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        sortBy="price"
        sortOrder="asc"
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 点击筛选按钮展开扩展筛选区域
    const filterButton = screen.getByText('筛选')
    fireEvent.click(filterButton)

    // 再次点击价格排序选项（应该切换为降序）
    const priceSortOption = screen.getByText('价格')
    fireEvent.click(priceSortOption)

    // 检查回调被调用，排序方向切换为降序
    expect(onSortChange).toHaveBeenCalledWith('price', 'desc')
  })

  test('应该显示筛选状态', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        routeType="departure"
        vehicleType="bus"
        sortBy="price"
        sortOrder="desc"
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 检查筛选状态显示
    expect(screen.getByText('去程')).toBeInTheDocument()
    expect(screen.getByText('大巴拼车')).toBeInTheDocument()
    expect(screen.getByText('价格↓')).toBeInTheDocument()
  })

  test('应该显示正确的排序图标', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        sortBy="departureTime"
        sortOrder="asc"
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 检查出发时间排序显示升序图标
    expect(screen.getByText('出发时间↑')).toBeInTheDocument()
  })

  test('应该切换筛选区域的显示状态', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 初始状态下扩展筛选区域应该隐藏
    expect(screen.queryByText('车辆类型')).not.toBeInTheDocument()
    expect(screen.queryByText('排序方式')).not.toBeInTheDocument()

    // 点击筛选按钮
    const filterButton = screen.getByText('筛选')
    fireEvent.click(filterButton)

    // 扩展筛选区域应该显示
    expect(screen.getByText('车辆类型')).toBeInTheDocument()
    expect(screen.getByText('排序方式')).toBeInTheDocument()

    // 再次点击筛选按钮
    fireEvent.click(filterButton)

    // 扩展筛选区域应该隐藏
    expect(screen.queryByText('车辆类型')).not.toBeInTheDocument()
    expect(screen.queryByText('排序方式')).not.toBeInTheDocument()
  })

  test('应该显示筛选按钮的展开/收起状态', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 初始状态下应该显示向下箭头
    const filterButton = screen.getByText('筛选')
    expect(filterButton.parentElement).toHaveTextContent('筛选▼')

    // 点击筛选按钮
    fireEvent.click(filterButton)

    // 应该显示向上箭头
    expect(filterButton.parentElement).toHaveTextContent('筛选▲')
  })

  test('应该正确应用选中样式', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        routeType="departure"
        vehicleType="bus"
        sortBy="price"
        sortOrder="asc"
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 展开筛选区域
    const filterButton = screen.getByText('筛选')
    fireEvent.click(filterButton)

    // 检查去程选项的选中样式
    const departureOption = screen.getByText('去程')
    expect(departureOption.parentElement).toHaveClass('bg-blue-500')
    expect(departureOption.parentElement).toHaveClass('text-white')

    // 检查大巴拼车选项的选中样式
    const busOption = screen.getByText('大巴拼车')
    expect(busOption.parentElement).toHaveClass('bg-green-500')
    expect(busOption.parentElement).toHaveClass('text-white')

    // 检查价格排序选项的选中样式
    const priceSortOption = screen.getByText('价格')
    expect(priceSortOption.parentElement).toHaveClass('bg-orange-500')
    expect(priceSortOption.parentElement).toHaveClass('text-white')
  })

  test('应该处理默认值', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 检查默认值
    expect(screen.getByText('全部')).toBeInTheDocument()
    expect(screen.getByText('出发时间↑')).toBeInTheDocument()

    // 展开筛选区域
    const filterButton = screen.getByText('筛选')
    fireEvent.click(filterButton)

    // 检查车辆类型默认值
    expect(screen.getByText('全部')).toBeInTheDocument()
  })

  test('应该不显示全部类型的筛选状态', () => {
    const onRouteTypeChange = jest.fn()
    const onVehicleTypeChange = jest.fn()
    const onSortChange = jest.fn()

    render(
      <RouteFilter
        routeType="all"
        vehicleType="all"
        sortBy="departureTime"
        sortOrder="asc"
        onRouteTypeChange={onRouteTypeChange}
        onVehicleTypeChange={onVehicleTypeChange}
        onSortChange={onSortChange}
      />
    )

    // 检查筛选状态显示
    expect(screen.queryByText('全部')).not.toBeInTheDocument() // 路线类型全部不显示
    expect(screen.queryByText('全部')).not.toBeInTheDocument() // 车辆类型全部不显示
    expect(screen.getByText('出发时间↑')).toBeInTheDocument() // 排序方式始终显示
  })
})