xiaoxia-saas/apps/web/src/test/pages/MyVoices.test.tsx

import React from "react"
import { describe, expect, it, vi } from "vitest"
import { render, screen } from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"

vi.mock("@/components/layout/PageHead", () => ({
  default: ({ title }: { title: string }) => <div data-testid="page-head">{title}</div>,
}))

vi.mock("@tanstack/react-query", () => ({
  useQuery: () => ({
    data: { items: [], total: 0 },
    isLoading: false,
    isError: false,
    refetch: vi.fn(),
  }),
  useMutation: () => ({
    mutate: vi.fn(),
    mutateAsync: vi.fn(),
    isLoading: false,
  }),
  useQueryClient: () => ({
    invalidateQueries: vi.fn(),
    setQueryData: vi.fn(),
  }),
}))

vi.mock("@/components/ui", () => ({
  Button: ({ children, onClick, disabled }: any) => (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  ),
  Card: ({ children }: any) => <div>{children}</div>,
  Tag: ({ children }: any) => <span>{children}</span>,
  Modal: ({ open, children }: any) => (open ? <div role="dialog">{children}</div> : null),
  Input: ({ placeholder, value, onChange }: any) => (
    <input placeholder={placeholder} value={value} onChange={onChange} />
  ),
  Tooltip: ({ title, children }: any) => <span title={title}>{children}</span>,
  Select: ({ children }: any) => <select>{children}</select>,
}))

// mock antd
vi.mock("antd", () => ({
  Table: ({ columns, dataSource }: any) => (
    <div data-testid="mock-table">
      {columns?.map((c: any) => (
        <span key={c.key}>{c.title}</span>
      ))}
    </div>
  ),
  Tabs: ({ items }: any) => (
    <div data-testid="mock-tabs">
      {items?.map((t: any) => (
        <span key={t.key}>{t.label}</span>
      ))}
    </div>
  ),
  Pagination: ({ total }: any) => <div data-testid="mock-pagination">{total}</div>,
  message: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() },
  Popconfirm: ({ children }: any) => <span>{children}</span>,
  Descriptions: ({ children }: any) => <div>{children}</div>,
  Empty: () => <div data-testid="mock-empty">Empty</div>,
  Spin: ({ spinning }: any) => (spinning ? <div>Loading...</div> : <></>),
  Avatar: ({ src }: any) => <img src={src} alt="avatar" />,
  Badge: ({ children }: any) => <span>{children}</span>,
  Drawer: ({ open, children }: any) => (open ? <div role="dialog">{children}</div> : null),
  Upload: ({ children }: any) => <div>{children}</div>,
  Progress: ({ percent }: any) => <div>{percent}%</div>,
  Switch: ({ checked }: any) => <input type="checkbox" checked={checked} readOnly />,
  Radio: ({ children }: any) => <span>{children}</span>,
  RadioGroup: ({ children }: any) => <div>{children}</div>,
}))

vi.mock("@/api/voice-clone", () => ({
  getVoiceCloneList: vi.fn().mockResolvedValue({ items: [], total: 0 }),
  deleteVoiceClone: vi.fn().mockResolvedValue({ success: true }),
  createVoiceClone: vi.fn().mockResolvedValue({ success: true }),
}))
vi.mock("@/pages/my-voices/MyVoices.css", () => ({}))

import MyVoices from "@/pages/my-voices/MyVoices"

describe("MyVoices Page", () => {
  it("should render without crashing", () => {
    render(
      <MemoryRouter>
        <MyVoices />
      </MemoryRouter>,
    )
    expect(screen.getByTestId("page-head")).toBeInTheDocument()
  })
})