mini-starter/allin-packages/platform-management-ui/tests/integration/platform-selector.integration.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { PlatformSelector } from '../../src/components/PlatformSelector'
import { platformClient } from '../../src/api/platformClient'

// Mock the platform client
vi.mock('../../src/api/platformClient', () => {
  const platformClient = {
    getAllPlatforms: {
      $get: vi.fn(),
    },
  }
  return {
    platformClient,
    platformClientManager: {
      get: vi.fn(() => platformClient),
    },
  }
})

const mockPlatforms = {
  data: [
    { id: 1, platformName: '微信平台', contactPerson: '张三', contactPhone: '13800138000', status: 1, createTime: '2024-01-01T00:00:00Z', updateTime: '2024-01-01T00:00:00Z' },
    { id: 2, platformName: '抖音平台', contactPerson: '李四', contactPhone: '13900139000', status: 1, createTime: '2024-01-01T00:00:00Z', updateTime: '2024-01-01T00:00:00Z' },
    { id: 3, platformName: '快手平台', contactPerson: '王五', contactPhone: '13700137000', status: 0, createTime: '2024-01-01T00:00:00Z', updateTime: '2024-01-01T00:00:00Z' },
  ],
  pagination: {
    total: 3,
    page: 1,
    pageSize: 10,
    totalPages: 1,
  },
}

const TestWrapper = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  })

  return (
    <QueryClientProvider client={queryClient}>
      {children as any}
    </QueryClientProvider>
  )
}

describe('PlatformSelector 集成测试', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('应该正确渲染平台选择器', async () => {
    (platformClient.getAllPlatforms.$get as any).mockResolvedValue({
      status: 200,
      json: async () => mockPlatforms,
    })

    render(
      <TestWrapper>
        <PlatformSelector testId="platform-selector" />
      </TestWrapper>
    )

    // 验证加载状态
    expect(screen.getByTestId('platform-selector')).toBeInTheDocument()
    expect(screen.getByText('加载中...')).toBeInTheDocument()

    // 等待数据加载完成
    await waitFor(() => {
      expect(screen.getByText('请选择平台')).toBeInTheDocument()
    })

    // 点击选择器打开下拉菜单
    const selectTrigger = screen.getByTestId('platform-selector')
    fireEvent.click(selectTrigger)

    // 验证下拉菜单中的选项
    await waitFor(() => {
      expect(screen.getByText('微信平台')).toBeInTheDocument()
      expect(screen.getByText('抖音平台')).toBeInTheDocument()
      expect(screen.getByText('快手平台')).toBeInTheDocument()
    })
  })

  it('应该处理加载状态', () => {
    // Mock 延迟响应
    (platformClient.getAllPlatforms.$get as any).mockImplementation(
      () => new Promise(() => {}) // 永不解析的Promise
    )

    render(
      <TestWrapper>
        <PlatformSelector testId="platform-selector" />
      </TestWrapper>
    )

    // 验证加载状态
    expect(screen.getByTestId('platform-selector')).toBeInTheDocument()
    expect(screen.getByText('加载中...')).toBeInTheDocument()
  })

  it('应该处理错误状态', async () => {
    (platformClient.getAllPlatforms.$get as any).mockRejectedValue(new Error('API错误'))

    render(
      <TestWrapper>
        <PlatformSelector testId="platform-selector" />
      </TestWrapper>
    )

    // 等待错误状态
    await waitFor(() => {
      expect(screen.getByText('加载平台列表失败')).toBeInTheDocument()
    })
  })

  it('应该处理选择器值变化', async () => {
    (platformClient.getAllPlatforms.$get as any).mockResolvedValue({
      status: 200,
      json: async () => mockPlatforms,
    })

    const mockOnChange = vi.fn()

    render(
      <TestWrapper>
        <PlatformSelector onChange={mockOnChange} testId="platform-selector" />
      </TestWrapper>
    )

    // 等待数据加载完成
    await waitFor(() => {
      expect(screen.getByTestId('platform-selector')).toBeEnabled()
    })

    // 点击选择器打开下拉菜单
    const selectTrigger = screen.getByTestId('platform-selector')
    fireEvent.click(selectTrigger)

    // 选择第一个选项
    await waitFor(() => {
      const firstOption = screen.getByText('微信平台')
      fireEvent.click(firstOption)
    })

    // 验证onChange被调用
    expect(mockOnChange).toHaveBeenCalledWith(1)
  })

  it('应该支持自定义占位符', async () => {
    (platformClient.getAllPlatforms.$get as any).mockResolvedValue({
      status: 200,
      json: async () => mockPlatforms,
    })

    render(
      <TestWrapper>
        <PlatformSelector placeholder="选择平台" testId="platform-selector" />
      </TestWrapper>
    )

    // 等待数据加载完成
    await waitFor(() => {
      expect(screen.getByText('选择平台')).toBeInTheDocument()
    })
  })

  it('应该支持禁用状态', async () => {
    (platformClient.getAllPlatforms.$get as any).mockResolvedValue({
      status: 200,
      json: async () => mockPlatforms,
    })

    render(
      <TestWrapper>
        <PlatformSelector disabled={true} testId="platform-selector" />
      </TestWrapper>
    )

    // 等待数据加载完成
    await waitFor(() => {
      const selectTrigger = screen.getByTestId('platform-selector')
      expect(selectTrigger).toBeDisabled()
    })
  })

  it('应该支持预选值', async () => {
    (platformClient.getAllPlatforms.$get as any).mockResolvedValue({
      status: 200,
      json: async () => mockPlatforms,
    })

    render(
      <TestWrapper>
        <PlatformSelector value={2} testId="platform-selector" />
      </TestWrapper>
    )

    // 等待数据加载完成
    await waitFor(() => {
      expect(screen.getByTestId('platform-selector')).toBeEnabled()
    })

    // 验证预选值已正确设置
    // 在Radix UI Select中，预选值会显示在选择器触发器中
    const selectTrigger = screen.getByTestId('platform-selector')
    expect(selectTrigger).toHaveTextContent('抖音平台')
  })
})