mini-starter/mini/tests/unit/pages/address-manage/basic.test.tsx

import React from 'react'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import AddressManagePage from '@/pages/address-manage/index'

// 导入Taro mock函数
import { mockGetCurrentPages, mockNavigateTo, mockShowModal } from '~/__mocks__/taroMock'

// Mock API client
jest.mock('@/api', () => ({
  deliveryAddressClient: {
    $get: jest.fn(),
    $post: jest.fn(),
    ':id': {
      $put: jest.fn(),
      $delete: jest.fn(),
    },
  },
}))

// Mock auth hook
jest.mock('@/utils/auth', () => ({
  useAuth: () => ({
    user: { id: 1 },
  }),
}))

// Mock components
jest.mock('@/components/ui/navbar', () => ({
  Navbar: ({ title, onClickLeft }: { title: string; onClickLeft: () => void }) => (
    <div data-testid="navbar">
      <span>{title}</span>
      <button onClick={onClickLeft}>返回</button>
    </div>
  ),
}))

jest.mock('@/components/ui/button', () => ({
  Button: ({ children, onClick, disabled, className }: any) => (
    <button
      onClick={onClick}
      disabled={disabled}
      className={className}
      data-testid="button"
    >
      {children}
    </button>
  ),
}))

describe('AddressManagePage', () => {
  let queryClient: QueryClient

  beforeEach(() => {
    queryClient = new QueryClient({
      defaultOptions: {
        queries: { retry: false },
        mutations: { retry: false },
      },
    })

    // Reset all mocks
    jest.clearAllMocks()

    // 设置 getCurrentPages 的默认返回值
    mockGetCurrentPages.mockReturnValue([{ route: 'pages/address-manage/index' }])
  })

  const renderWithProviders = (component: React.ReactElement) => {
    return render(
      <QueryClientProvider client={queryClient}>
        {component}
      </QueryClientProvider>
    )
  }

  const mockAddresses = [
    {
      id: 1,
      name: '张三',
      phone: '13812345678',
      province: { name: '广东省' },
      city: { name: '深圳市' },
      district: { name: '南山区' },
      town: { name: '科技园' },
      address: '科技大厦A座',
      isDefault: 1,
    },
    {
      id: 2,
      name: '李四',
      phone: '13987654321',
      province: { name: '北京市' },
      city: { name: '北京市' },
      district: { name: '朝阳区' },
      town: { name: '' },
      address: '国贸中心',
      isDefault: 0,
    },
  ]

  it('渲染页面标题和布局', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: [] }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    expect(screen.getByTestId('navbar')).toBeInTheDocument()
    expect(screen.getByText('收货地址')).toBeInTheDocument()
  })

  it('显示地址列表', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: mockAddresses }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      expect(screen.getByText('张三')).toBeInTheDocument()
      expect(screen.getByText('李四')).toBeInTheDocument()
      expect(screen.getByText('138****5678')).toBeInTheDocument()
      expect(screen.getByText('139****4321')).toBeInTheDocument()
      expect(screen.getByText('默认')).toBeInTheDocument()
    })
  })

  it('显示空状态', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: [] }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      expect(screen.getByText('暂无收货地址')).toBeInTheDocument()
    })
  })

  it('显示地址数量限制提示', async () => {
    const { deliveryAddressClient } = await import('@/api')
    const addresses = Array.from({ length: 20 }, (_, i) => ({
      id: i + 1,
      name: `用户${i + 1}`,
      phone: '13812345678',
      province: { name: '广东省' },
      city: { name: '深圳市' },
      district: { name: '南山区' },
      address: '测试地址',
      isDefault: i === 0 ? 1 : 0,
    }))

    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: addresses }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      expect(screen.getByText('最多可添加20个收货地址')).toBeInTheDocument()
    })
  })

  it('点击添加地址按钮', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: [] }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      const addButton = screen.getByText('添加新地址')
      fireEvent.click(addButton)
      expect(mockNavigateTo).toHaveBeenCalledWith({
        url: '/pages/address-edit/index',
      })
    })
  })

  it('点击编辑地址按钮', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: mockAddresses }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      const editButtons = screen.getAllByText('编辑')
      fireEvent.click(editButtons[0])
      expect(mockNavigateTo).toHaveBeenCalledWith({
        url: '/pages/address-edit/index?id=1',
      })
    })
  })

  it('点击设为默认按钮', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: mockAddresses }),
    } as any)

    ;(deliveryAddressClient[':id'].$put as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({}),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      const setDefaultButtons = screen.getAllByText('设为默认')
      fireEvent.click(setDefaultButtons[0])
      expect(deliveryAddressClient[':id'].$put).toHaveBeenCalledWith({
        param: { id: 2 },
        json: { isDefault: 1 },
      })
    })
  })

  it('点击删除按钮', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: mockAddresses }),
    } as any)

    ;(deliveryAddressClient[':id'].$delete as jest.Mock).mockResolvedValue({
      status: 204,
      json: async () => ({}),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      const deleteButtons = screen.getAllByText('删除')
      fireEvent.click(deleteButtons[0])
      expect(mockShowModal).toHaveBeenCalled()
    })
  })

  it('验证样式类名应用', async () => {
    const { deliveryAddressClient } = await import('@/api')
    ;(deliveryAddressClient.$get as jest.Mock).mockResolvedValue({
      status: 200,
      json: async () => ({ data: mockAddresses }),
    } as any)

    renderWithProviders(<AddressManagePage />)

    await waitFor(() => {
      const container = document.querySelector('.address-container')
      expect(container).toBeInTheDocument()

      const addressList = document.querySelector('.address-list')
      expect(addressList).toBeInTheDocument()

      const addressItems = document.querySelectorAll('.address-item')
      expect(addressItems).toHaveLength(2)

      const bottomFixed = document.querySelector('.bottom-fixed')
      expect(bottomFixed).toBeInTheDocument()
    })
  })
})