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

import React from "react"
import { describe, expect, it, vi } from "vitest"
import { render } 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: vi.fn(() => ({
    data: { items: [], total: 0 },
    isLoading: false,
    isError: false,
    refetch: vi.fn(),
  })),
  useMutation: vi.fn(() => ({
    mutate: vi.fn(),
    mutateAsync: vi.fn(),
    isLoading: false,
  })),
  useQueryClient: vi.fn(() => ({
    invalidateQueries: vi.fn(),
    setQueryData: vi.fn(),
    getQueryData: vi.fn(),
  })),
  useInfiniteQuery: vi.fn(() => ({
    data: { pages: [] },
    isLoading: false,
    fetchNextPage: vi.fn(),
    hasNextPage: false,
  })),
}))

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

vi.mock("antd", () => ({
  Table: () => <div />,
  Pagination: () => <div />,
  Tabs: () => <div />,
  Modal: ({ open, children }: any) => (open ? <div role="dialog">{children}</div> : null),
  message: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() },
  Popconfirm: ({ children }: any) => <span>{children}</span>,
  Form: ({ children }: any) => <form>{children}</form>,
  Input: ({ placeholder }: any) => <input placeholder={placeholder} />,
  InputNumber: () => <input type="number" />,
  Select: () => <select />,
  Empty: () => <div>Empty</div>,
  Space: ({ children }: any) => <div>{children}</div>,
  Tag: ({ children }: any) => <span>{children}</span>,
  Badge: ({ children }: any) => <span>{children}</span>,
  Tooltip: ({ children }: any) => <span>{children}</span>,
  Upload: { Dragger: ({ children }: any) => <div>{children}</div> },
  Progress: () => <div />,
  Switch: () => <input type="checkbox" />,
  Radio: ({ children }: any) => <span>{children}</span>,
  RadioGroup: ({ children }: any) => <div>{children}</div>,
  Drawer: ({ open, children }: any) => (open ? <div role="dialog">{children}</div> : null),
  Popover: ({ children }: any) => <span>{children}</span>,
  Divider: () => <hr />,
  Dropdown: ({ children }: any) => <span>{children}</span>,
  Menu: () => <div />,
  Checkbox: ({ children }: any) => <span>{children}</span>,
  List: () => <div />,
  Avatar: ({ children }: any) => <span>{children}</span>,
  Button: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
  Result: ({ status, title }: any) => <div data-status={status}>{title}</div>,
  Spin: () => <div>Loading</div>,
}))

vi.mock("@ant-design/icons", () => ({
  PlusOutlined: () => <span>+</span>,
  SearchOutlined: () => <span>S</span>,
  InboxOutlined: () => <span>I</span>,
  VideoCameraOutlined: () => <span>V</span>,
  PictureOutlined: () => <span>P</span>,
  PlayCircleOutlined: () => <span>▶</span>,
  CheckOutlined: () => <span>✓</span>,
  DeleteOutlined: () => <span>×</span>,
  ExperimentOutlined: () => <span>E</span>,
  LoadingOutlined: () => <span>L</span>,
  ExclamationCircleOutlined: () => <span>!</span>,
  TagsOutlined: () => <span>T</span>,
  EditOutlined: () => <span>E</span>,
  DownloadOutlined: () => <span>D</span>,
  MoreOutlined: () => <span>M</span>,
  FolderOutlined: () => <span>F</span>,
  FolderAddOutlined: () => <span>FA</span>,
  UploadOutlined: () => <span>U</span>,
  AudioOutlined: () => <span>A</span>,
}))

vi.mock("@/api/assets", () => ({
  getAssetLibraries: vi.fn().mockResolvedValue({ items: [] }),
  createAssetLibrary: vi.fn().mockResolvedValue({}),
  deleteAssetLibrary: vi.fn().mockResolvedValue({}),
  getAssets: vi.fn().mockResolvedValue({ items: [], total: 0 }),
  deleteAsset: vi.fn().mockResolvedValue({}),
  uploadAssetDirect: vi.fn().mockResolvedValue({}),
  getAssetDiagnosis: vi.fn().mockResolvedValue({}),
  batchDeleteAssets: vi.fn().mockResolvedValue({}),
  batchTagAssets: vi.fn().mockResolvedValue({}),
  batchClassifyAssets: vi.fn().mockResolvedValue({}),
  batchMarkAssets: vi.fn().mockResolvedValue({}),
  AssetType: { VIDEO: "video", IMAGE: "image", AUDIO: "audio" },
}))

vi.mock("@/api/tags", () => ({
  getTags: vi.fn().mockResolvedValue({ items: [] }),
  createTag: vi.fn().mockResolvedValue({}),
  tagAsset: vi.fn().mockResolvedValue({}),
  untagAsset: vi.fn().mockResolvedValue({}),
}))

import AssetLibrary from "@/pages/assets/AssetLibrary"

describe("AssetLibrary", () => {
  it("renders without crashing", () => {
    const { container } = render(
      <MemoryRouter>
        <AssetLibrary />
      </MemoryRouter>,
    )
    expect(container).toBeTruthy()
  })

  it("shows empty state when no assets", () => {
    const { getByText } = render(
      <MemoryRouter>
        <AssetLibrary />
      </MemoryRouter>,
    )
    // 空状态文案应该出现
    expect(getByText(/暂无素材/)).toBeTruthy()
  })
})