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 } 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()
    })
  })

  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 () => {
    mockShowModal.mockResolvedValue({ confirm: true, content: '测试取消原因' })

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

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

    await waitFor(() => {
      expect(mockShowModal).toHaveBeenCalledWith({
        title: '取消订单',
        content: '请填写取消原因：',
        editable: true,
        placeholderText: '请输入取消原因（必填）'
      })
    })
  })

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

    mockShowModal
      .mockResolvedValueOnce({ confirm: true, content: '测试取消原因' }) // 原因输入
      .mockResolvedValueOnce({ confirm: true }) // 确认取消

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

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

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

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

  it('should show error when cancel reason is empty', async () => {
    mockShowModal.mockResolvedValue({ confirm: true, content: '' })

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

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

    await waitFor(() => {
      expect(mockShowToast).toHaveBeenCalledWith({
        title: '请填写取消原因',
        icon: 'error',
        duration: 2000
      })
    })
  })

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

    mockShowModal
      .mockResolvedValueOnce({ confirm: true, content: '测试取消原因' })
      .mockResolvedValueOnce({ confirm: true })

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

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

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

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

  it('should disable cancel button during mutation', async () => {
    // 模拟mutation正在进行中
    // mockUseMutation.mockReturnValueOnce({
    //   mutate: jest.fn(),
    //   mutateAsync: jest.fn(),
    //   isLoading: true,
    //   isPending: true,
    //   isError: false,
    //   isSuccess: false,
    //   error: null,
    //   data: null
    // })

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

    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()
    })
  })
})