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

import React from 'react'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AreaPicker } from '../../src/components/AreaPicker'

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

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

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

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

// 模拟数据
const mockProvinces = {
  success: true,
  data: {
    provinces: [
      { id: 1, name: '北京市' },
      { id: 2, name: '上海市' },
      { id: 3, name: '广东省' }
    ]
  },
  message: ''
}

const mockCities = {
  success: true,
  data: {
    cities: [
      { id: 11, name: '北京市' },
      { id: 12, name: '朝阳区' },
      { id: 13, name: '海淀区' }
    ]
  },
  message: ''
}

const mockDistricts = {
  success: true,
  data: {
    districts: [
      { id: 101, name: '朝阳区' },
      { id: 102, name: '海淀区' },
      { id: 103, name: '西城区' }
    ]
  },
  message: ''
}

describe('AreaPicker 组件', () => {
  beforeEach(() => {
    // 重置所有 mock
    jest.clearAllMocks()

    // 设置默认的 mock 返回值
    mockAreaClient.provinces.$get.mockResolvedValue({
      status: 200,
      json: async () => mockProvinces
    })

    mockAreaClient.cities.$get.mockResolvedValue({
      status: 200,
      json: async () => mockCities
    })

    mockAreaClient.districts.$get.mockResolvedValue({
      status: 200,
      json: async () => mockDistricts
    })
  })

  test('应该正确渲染组件', async () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
        />
      </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()

    // 等待数据加载
    await waitFor(() => {
      expect(mockAreaClient.provinces.$get).toHaveBeenCalled()
    })
  })

  test('应该显示自定义标题', () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
          title="选择出发地"
        />
      </Wrapper>
    )

    expect(screen.getByText('选择出发地')).toBeInTheDocument()
  })

  test('应该初始化选择值', async () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
          value={[1, 11, 101]}
        />
      </Wrapper>
    )

    // 等待数据加载
    await waitFor(() => {
      expect(mockAreaClient.provinces.$get).toHaveBeenCalled()
    })

    // 检查是否调用了城市和区县查询
    await waitFor(() => {
      expect(mockAreaClient.cities.$get).toHaveBeenCalledWith({
        query: { provinceId: 1, page: 1, pageSize: 50 }
      })
    })

    await waitFor(() => {
      expect(mockAreaClient.districts.$get).toHaveBeenCalledWith({
        query: { cityId: 11, page: 1, pageSize: 50 }
      })
    })
  })

  test('应该处理取消操作', () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
        />
      </Wrapper>
    )

    const cancelButton = screen.getByText('取消')
    fireEvent.click(cancelButton)

    expect(onClose).toHaveBeenCalledTimes(1)
    expect(onConfirm).not.toHaveBeenCalled()
  })

  test('应该处理确认操作', async () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
        />
      </Wrapper>
    )

    // 等待数据加载
    await waitFor(() => {
      expect(mockAreaClient.provinces.$get).toHaveBeenCalled()
    })

    const confirmButton = screen.getByText('确定')
    fireEvent.click(confirmButton)

    // 由于没有选择任何值，应该传递空数组
    expect(onConfirm).toHaveBeenCalledWith([], [])
    expect(onClose).toHaveBeenCalledTimes(1)
  })

  test('当不可见时应该返回 null', () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    const { container } = render(
      <Wrapper>
        <AreaPicker
          visible={false}
          onClose={onClose}
          onConfirm={onConfirm}
        />
      </Wrapper>
    )

    // 检查容器是否为空
    expect(container.firstChild).toBeNull()
  })

  test('应该处理 API 错误', async () => {
    // 模拟 API 错误
    mockAreaClient.provinces.$get.mockResolvedValue({
      status: 500,
      json: async () => ({ success: false, message: '服务器错误' })
    })

    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
        />
      </Wrapper>
    )

    // 组件应该正常渲染，即使 API 调用失败
    expect(screen.getByText('选择地区')).toBeInTheDocument()

    // 等待 API 调用
    await waitFor(() => {
      expect(mockAreaClient.provinces.$get).toHaveBeenCalled()
    })
  })

  test('应该正确显示已选择的省市区文本', async () => {
    const onClose = jest.fn()
    const onConfirm = jest.fn()

    render(
      <Wrapper>
        <AreaPicker
          visible={true}
          onClose={onClose}
          onConfirm={onConfirm}
          value={[1, 11, 101]}
        />
      </Wrapper>
    )

    // 等待数据加载
    await waitFor(() => {
      expect(mockAreaClient.provinces.$get).toHaveBeenCalled()
    })

    await waitFor(() => {
      expect(mockAreaClient.cities.$get).toHaveBeenCalled()
    })

    await waitFor(() => {
      expect(mockAreaClient.districts.$get).toHaveBeenCalled()
    })

    // 检查显示文本
    await waitFor(() => {
      expect(screen.getByText('北京市 北京市 朝阳区')).toBeInTheDocument()
    })
  })
})