mini-starter/mini/tests/unit/pages/search-result/basic.test.tsx

import React from 'react'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import SearchResultPage from '@/pages/search-result/index'

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

// 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/goods-list', () => ({
  __esModule: true,
  default: ({
    goodsList,
    onClick,
    onAddCart
  }: {
    goodsList: any[],
    onClick: (goods: any) => void,
    onAddCart: (goods: any) => void
  }) => (
    <div data-testid="goods-list">
      {goodsList.map((goods, index) => (
        <div
          key={goods.id}
          data-testid={`goods-item-${index}`}
          onClick={() => onClick(goods)}
        >
          <span data-testid="goods-name">{goods.name}</span>
          <span data-testid="goods-price">{goods.price}</span>
          <button
            data-testid="add-cart-btn"
            onClick={() => onAddCart(goods)}
          >
            加入购物车
          </button>
        </div>
      ))}
    </div>
  ),
}))

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

// Mock cart hook
jest.mock('@/utils/cart', () => ({
  useCart: () => ({
    addToCart: jest.fn()
  })
}))

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

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

    // Reset all mocks
    jest.clearAllMocks()

    // Mock Taro.getCurrentInstance
    mockGetCurrentInstance.mockReturnValue({
      router: {
        params: {
          keyword: '手机'
        }
      }
    })

    // Mock API response
    const { goodsClient } = require('@/api')
    goodsClient.$get.mockResolvedValue({
      status: 200,
      json: () => Promise.resolve({
        data: [
          {
            id: 1,
            name: 'iPhone 15',
            price: 599900,
            originPrice: 699900,
            stock: 10,
            salesNum: 100,
            imageFile: {
              fullUrl: 'https://example.com/iphone15.jpg'
            }
          },
          {
            id: 2,
            name: 'MacBook Pro',
            price: 1299900,
            originPrice: 1499900,
            stock: 5,
            salesNum: 50,
            imageFile: {
              fullUrl: 'https://example.com/macbook.jpg'
            }
          }
        ],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 2,
          totalPages: 1
        }
      })
    })
  })

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

  it('渲染页面标题和布局', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      expect(screen.getByTestId('navbar')).toBeInTheDocument()
      expect(screen.getByTestId('navbar')).toHaveTextContent('搜索结果')
    })
  })

  it('显示搜索栏和关键词', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      // 验证搜索栏存在
      const searchInput = document.querySelector('.search-input') as HTMLInputElement
      expect(searchInput).toBeInTheDocument()
      expect(searchInput.placeholder).toBe('搜索商品...')
      expect(searchInput.value).toBe('手机')

      // 验证搜索结果标题
      expect(screen.getByText('搜索结果："手机"')).toBeInTheDocument()
      expect(screen.getByText('共找到 2 件商品')).toBeInTheDocument()
    })
  })

  it('显示搜索结果列表', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      expect(screen.getByTestId('goods-list')).toBeInTheDocument()

      const goodsItems = screen.getAllByTestId(/goods-item-\d+/)
      expect(goodsItems).toHaveLength(2)

      expect(screen.getByText('iPhone 15')).toBeInTheDocument()
      expect(screen.getByText('MacBook Pro')).toBeInTheDocument()
    })
  })

  it('处理搜索提交', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      const searchInput = document.querySelector('.search-input') as HTMLInputElement

      // 修改搜索关键词
      fireEvent.change(searchInput, { target: { value: 'iPad' } })

      // 提交搜索
      fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter' })
    })

    // 验证API被重新调用
    await waitFor(() => {
      const { goodsClient } = require('@/api')
      // 由于React Query的异步特性，这里可能被调用多次，我们检查最后一次调用
      const lastCall = goodsClient.$get.mock.calls[goodsClient.$get.mock.calls.length - 1]
      expect(lastCall[0]).toEqual({
        query: {
          page: 1,
          pageSize: 10,
          keyword: 'iPad',
          filters: JSON.stringify({ state: 1 })
        }
      })
    })
  })

  it('显示空状态', async () => {
    // Mock empty response
    const { goodsClient } = require('@/api')
    goodsClient.$get.mockResolvedValue({
      status: 200,
      json: () => Promise.resolve({
        data: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          totalPages: 0
        }
      })
    })

    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      expect(screen.getByText('暂无相关商品')).toBeInTheDocument()
      expect(screen.getByText('换个关键词试试吧')).toBeInTheDocument()
    })
  })

  it('处理商品点击', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      const firstGoodsItem = screen.getByTestId('goods-item-0')
      fireEvent.click(firstGoodsItem)
    })

    // 验证跳转到商品详情页面
    expect(mockNavigateTo).toHaveBeenCalledWith({
      url: '/pages/goods-detail/index?id=1'
    })
  })

  it('处理添加到购物车', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      const addCartButtons = screen.getAllByTestId('add-cart-btn')
      fireEvent.click(addCartButtons[0])
    })

    // 验证购物车功能被调用
    const { useCart } = require('@/utils/cart')
    const { addToCart } = useCart()
    expect(addToCart).toHaveBeenCalledWith({
      id: 1,
      name: 'iPhone 15',
      price: 599900,
      image: 'https://example.com/iphone15.jpg',
      stock: 10,
      quantity: 1
    })
  })

  it('处理下拉刷新', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      // 模拟下拉刷新 - 直接调用onRefresherRefresh
      const scrollView = document.querySelector('.search-result-content')
      if (scrollView) {
        // 触发下拉刷新事件
        const event = new Event('refresherrefresh')
        scrollView.dispatchEvent(event)
      }
    })

    // 验证API被重新调用
    await waitFor(() => {
      const { goodsClient } = require('@/api')
      expect(goodsClient.$get).toHaveBeenCalled()
    })
  })

  it('处理清除搜索输入', async () => {
    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      const searchInput = document.querySelector('.search-input') as HTMLInputElement

      // 输入内容
      fireEvent.change(searchInput, { target: { value: '测试商品' } })

      // 验证清除按钮出现
      const clearIcon = document.querySelector('.clear-icon')
      expect(clearIcon).toBeInTheDocument()

      // 点击清除按钮
      fireEvent.click(clearIcon!)

      // 验证搜索输入被清空
      expect(searchInput.value).toBe('')
    })
  })

  it('验证样式类名应用', async () => {
    renderWithProviders(<SearchResultPage />)

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

      const content = document.querySelector('.search-result-content')
      expect(content).toBeInTheDocument()

      const searchBar = document.querySelector('.search-bar-container')
      expect(searchBar).toBeInTheDocument()

      const resultContainer = document.querySelector('.result-container')
      expect(resultContainer).toBeInTheDocument()

      const goodsListContainer = document.querySelector('.goods-list-container')
      expect(goodsListContainer).toBeInTheDocument()
    })
  })

  it('显示加载状态', async () => {
    // Mock loading state
    const { goodsClient } = require('@/api')
    goodsClient.$get.mockImplementation(() => new Promise(() => {})) // Never resolves

    renderWithProviders(<SearchResultPage />)

    await waitFor(() => {
      expect(screen.getByText('搜索中...')).toBeInTheDocument()
    })
  })
})