mini-starter/mini/tests/unit/components/order/OrderButtonBar.test.tsx

import { render, fireEvent, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { mockShowModal, mockShowToast, mockGetNetworkType, mockGetEnv } from '~/__mocks__/taroMock'
import OrderButtonBar from '@/components/order/OrderButtonBar'


// Mock API client
jest.mock('@/api', () => ({
  orderClient: {
    cancelOrder: {
      $post: jest.fn()
    }
  }
}))

const mockOrder = {
  id: 1,
  orderNo: 'ORDER001',
  payState: 0, // 未支付
  state: 0, // 未发货
  amount: 100,
  payAmount: 100,
  freightAmount: 0,
  discountAmount: 0,
  goodsDetail: JSON.stringify([
    { id: 1, name: '商品1', price: 50, num: 2, image: '', spec: '默认规格' }
  ]),
  recevierName: '张三',
  receiverMobile: '13800138000',
  address: '北京市朝阳区',
  createdAt: '2025-01-01T00:00:00Z'
}

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

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

describe('OrderButtonBar', () => {
  beforeEach(() => {
    jest.clearAllMocks()
    // 模拟网络检查成功回调
    mockGetNetworkType.mockImplementation((options) => {
      if (options?.success) {
        options.success({ networkType: 'wifi' })
      }
      return Promise.resolve()
    })
    // 模拟环境检查
    mockGetEnv.mockReturnValue('WEB')
  })

  it('should render cancel button for unpaid order', () => {
    const { getByText } = render(
      <TestWrapper>
        <OrderButtonBar order={mockOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    expect(getByText('取消订单')).toBeTruthy()
    expect(getByText('去支付')).toBeTruthy()
    expect(getByText('查看详情')).toBeTruthy()
  })

  it('should show cancel reason dialog when cancel button is clicked', async () => {
    const { getByText, getByTestId } = render(
      <TestWrapper>
        <OrderButtonBar order={mockOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    fireEvent.click(getByText('取消订单'))

    await waitFor(() => {
      expect(getByTestId('cancel-reason-dialog')).toBeTruthy()
      // 检查对话框内容
      expect(getByText('请选择或填写取消原因，这将帮助我们改进服务')).toBeTruthy()
    })
  })

  it('should call API when cancel order is confirmed', async () => {
    const mockApiCall = require('@/api').orderClient.cancelOrder.$post as jest.Mock

    mockShowModal.mockResolvedValueOnce({ confirm: true }) // 确认取消

    mockApiCall.mockResolvedValue({ status: 200, json: () => Promise.resolve({ success: true, message: '取消成功' }) })

    const { getByText, getByPlaceholderText, getByTestId } = render(
      <TestWrapper>
        <OrderButtonBar order={mockOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    // 打开取消对话框
    fireEvent.click(getByText('取消订单'))

    await waitFor(() => {
      expect(getByTestId('cancel-reason-dialog')).toBeTruthy()
    })

    // 输入取消原因
    const reasonInput = getByPlaceholderText('请输入其他取消原因...')
    fireEvent.change(reasonInput, { target: { value: '测试取消原因' } })

    // 点击确认取消按钮
    fireEvent.click(getByText('确认取消'))

    await waitFor(() => {
      expect(mockShowModal).toHaveBeenCalledWith({
        title: '确认取消',
        content: '确定要取消订单吗？\n取消原因：测试取消原因',
        success: expect.any(Function)
      })
    })

    // 模拟确认对话框确认
    const modalCall = mockShowModal.mock.calls[0][0]
    if (modalCall.success) {
      modalCall.success({ confirm: true })
    }

    await waitFor(() => {
      expect(mockApiCall).toHaveBeenCalledWith({
        json: {
          orderId: 1,
          reason: '测试取消原因'
        }
      })
    })
  })

  it('should show error when cancel reason is empty', async () => {
    const { getByText, getByTestId } = render(
      <TestWrapper>
        <OrderButtonBar order={mockOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    // 打开取消对话框
    fireEvent.click(getByText('取消订单'))

    await waitFor(() => {
      expect(getByTestId('cancel-reason-dialog')).toBeTruthy()
    })

    // 直接点击确认取消按钮（不输入原因）
    fireEvent.click(getByText('确认取消'))

    await waitFor(() => {
      expect(getByTestId('error-message')).toBeTruthy()
      expect(getByText('请输入取消原因')).toBeTruthy()
    })
  })

  it('should handle network error gracefully', async () => {
    const mockApiCall = require('@/api').orderClient.cancelOrder.$post as jest.Mock

    mockShowModal.mockResolvedValueOnce({ confirm: true })

    mockApiCall.mockRejectedValue(new Error('网络连接失败'))

    const { getByText, getByPlaceholderText, getByTestId } = render(
      <TestWrapper>
        <OrderButtonBar order={mockOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    // 打开取消对话框
    fireEvent.click(getByText('取消订单'))

    await waitFor(() => {
      expect(getByTestId('cancel-reason-dialog')).toBeTruthy()
    })

    // 输入取消原因
    const reasonInput = getByPlaceholderText('请输入其他取消原因...')
    fireEvent.change(reasonInput, { target: { value: '测试取消原因' } })

    // 点击确认取消按钮
    fireEvent.click(getByText('确认取消'))

    // 模拟确认对话框确认
    await waitFor(() => {
      expect(mockShowModal).toHaveBeenCalledWith({
        title: '确认取消',
        content: '确定要取消订单吗？\n取消原因：测试取消原因',
        success: expect.any(Function)
      })
    })

    const modalCall = mockShowModal.mock.calls[0][0]
    if (modalCall.success) {
      modalCall.success({ confirm: true })
    }

    await waitFor(() => {
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '网络连接失败，请检查网络后重试',
        icon: 'error',
        duration: 3000
      })
    })
  })

  it('should disable cancel button during mutation', async () => {
    // 模拟mutation正在进行中
    const mockApiCall = require('@/api').orderClient.cancelOrder.$post as jest.Mock
    mockApiCall.mockImplementation(() => new Promise(() => {})) // 永不resolve的promise

    const { getByText, getByPlaceholderText, getByTestId } = render(
      <TestWrapper>
        <OrderButtonBar order={mockOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    // 打开取消对话框
    fireEvent.click(getByText('取消订单'))

    await waitFor(() => {
      expect(getByTestId('cancel-reason-dialog')).toBeTruthy()
    })

    // 输入取消原因
    const reasonInput = getByPlaceholderText('请输入其他取消原因...')
    fireEvent.change(reasonInput, { target: { value: '测试取消原因' } })

    // 点击确认取消按钮
    fireEvent.click(getByText('确认取消'))

    // 模拟确认对话框确认
    await waitFor(() => {
      expect(mockShowModal).toHaveBeenCalledWith({
        title: '确认取消',
        content: '确定要取消订单吗？\n取消原因：测试取消原因',
        success: expect.any(Function)
      })
    })

    const modalCall = mockShowModal.mock.calls[0][0]
    if (modalCall.success) {
      modalCall.success({ confirm: true })
    }

    // 检查按钮状态
    await waitFor(() => {
      expect(getByText('取消中...')).toBeTruthy()
    })
  })

  it('should not show cancel button for shipped order', () => {
    const shippedOrder = {
      ...mockOrder,
      payState: 2, // 已支付
      state: 1     // 已发货
    }

    const { queryByText } = render(
      <TestWrapper>
        <OrderButtonBar order={shippedOrder} onViewDetail={jest.fn()} />
      </TestWrapper>
    )

    expect(queryByText('取消订单')).toBeNull()
    expect(queryByText('确认收货')).toBeTruthy()
  })

  it('should use external cancel handler when provided', async () => {
    const mockOnCancelOrder = jest.fn()

    const { getByText } = render(
      <TestWrapper>
        <OrderButtonBar
          order={mockOrder}
          onViewDetail={jest.fn()}
          onCancelOrder={mockOnCancelOrder}
        />
      </TestWrapper>
    )

    fireEvent.click(getByText('取消订单'))

    await waitFor(() => {
      expect(mockOnCancelOrder).toHaveBeenCalled()
    })
  })
})