xiaoxia-saas/apps/web/src/test/components/AssetSelector/AssetSelector.test.tsx

import React from "react"
import { describe, it, expect, vi } from "vitest"
import { render, screen } from "@testing-library/react"
import AssetSelector from "@/components/AssetSelector/AssetSelector"
import type { MediaAsset } from "@/api/editPlans"

vi.mock("@/components/ui", () => ({
  Input: ({ placeholder }: any) => <input placeholder={placeholder} />,
  Select: ({ options }: any) => (
    <select>
      {options?.map((o: any) => (
        <option key={o.value} value={o.value}>
          {o.label}
        </option>
      ))}
    </select>
  ),
  Button: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
}))

vi.mock("@/components/AssetSelector/AssetSelector.css", () => ({}))

const mockAssets: MediaAsset[] = [
  {
    id: "1",
    name: "视频1.mp4",
    type: "video",
    thumbnail_url: "http://example.com/1.jpg",
    duration: 125,
    size: 5 * 1024 * 1024,
    tags: [],
    created_at: "2024-01-01",
    quality_score: 85,
  },
  {
    id: "2",
    name: "音频1.mp3",
    type: "audio",
    duration: 30,
    size: 100 * 1024,
    tags: ["bgm"],
    created_at: "2024-01-02",
    quality_score: 70,
  },
  {
    id: "3",
    name: "图片1.jpg",
    type: "image",
    thumbnail_url: "http://example.com/3.jpg",
    size: 500 * 1024,
    tags: [],
    created_at: "2024-01-03",
    quality_score: 90,
  },
]

describe("AssetSelector", () => {
  it("应该渲染所有素材", () => {
    render(<AssetSelector assets={mockAssets} />)
    expect(screen.getByText("视频1.mp4")).toBeInTheDocument()
    expect(screen.getByText("音频1.mp3")).toBeInTheDocument()
    expect(screen.getByText("图片1.jpg")).toBeInTheDocument()
  })

  it("空素材时显示空状态", () => {
    render(<AssetSelector assets={[]} />)
    expect(screen.getByText(/暂无素材/)).toBeInTheDocument()
  })

  it("应该有搜索框", () => {
    render(<AssetSelector assets={mockAssets} />)
    expect(screen.getByPlaceholderText(/搜索/)).toBeInTheDocument()
  })

  it("应该有类型筛选", () => {
    render(<AssetSelector assets={mockAssets} />)
    const selects = screen.getAllByRole("combobox")
    expect(selects.length).toBeGreaterThan(0)
  })

  it("应该显示文件大小格式化", () => {
    render(<AssetSelector assets={mockAssets} />)
    // 5MB = 5 * 1024 * 1024 bytes
    expect(screen.getByText(/5.0MB|5\.0MB/)).toBeInTheDocument()
  })

  it("应该显示时长格式化", () => {
    render(<AssetSelector assets={mockAssets} />)
    // 125秒 = 2:05
    expect(screen.getByText(/2:05/)).toBeInTheDocument()
  })
})