xiaoxia-saas/apps/web/e2e/assets-full.spec.ts

/**
 * 素材库页面完整 E2E 测试
 *
 * 覆盖：页面加载、创建素材库、切换素材库、搜索/筛选、素材详情、
 *       删除素材、批量删除、空状态
 * 注意：test_asset.spec.ts 已覆盖 API 级别的素材库 CRUD，本文件聚焦 UI 交互
 */
import { expect, test, type APIRequestContext } from "@playwright/test"

const PASSWORD = "SmokePass123!"
const apiBase = process.env.E2E_API_BASE || "/api/v1"
const apiOrigin = apiBase.endsWith("/api/v1") ? apiBase.slice(0, -"/api/v1".length) : ""

const routeBrowserApiToTestApi = async (page: import("@playwright/test").Page) => {
  if (!apiOrigin) return
  await page.route("**/api/v1/**", async (route) => {
    const sourceUrl = new URL(route.request().url())
    const response = await route.fetch({
      url: `${apiOrigin}${sourceUrl.pathname}${sourceUrl.search}`,
    })
    await route.fulfill({ response })
  })
}

function uniqueEmail(prefix: string): string {
  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}@example.com`
}

function uniqueUsername(prefix: string): string {
  return `${prefix}_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`
}

/** 登录操作，遇到 429 限流自动等待重试 */
async function loginWithRetry(
  request: APIRequestContext,
  email: string,
  password: string,
  maxRetries = 2,
) {
  for (let i = 0; i <= maxRetries; i++) {
    const response = await request.post(`${apiBase}/auth/login`, {
      data: { email, password },
    })
    if (response.status() !== 429) return response
    console.log(`[login] 触发限流，等待 65s 后重试 (${i + 1}/${maxRetries})`)
    await new Promise((r) => setTimeout(r, 65000))
  }
  return request.post(`${apiBase}/auth/login`, {
    data: { email, password },
  })
}

/** 注册并登录，返回 { headers, email, username, userId } */
async function createAuthedUser(request: APIRequestContext, label: string) {
  const email = uniqueEmail(label)
  const username = uniqueUsername(label)

  const reg = await request.post(`${apiBase}/auth/register`, {
    data: { email, password: PASSWORD, username, display_name: `E2E ${label}` },
  })
  expect(reg.ok(), `注册应成功: ${await reg.text()}`).toBeTruthy()
  const regData = await reg.json()

  const login = await loginWithRetry(request, email, PASSWORD)
  expect(login.ok(), `登录应成功: ${await login.text()}`).toBeTruthy()
  const loginData = await login.json()

  return {
    headers: { Authorization: `Bearer ${loginData.access_token}` },
    email,
    username,
    userId: regData.user_id,
    accessToken: loginData.access_token,
  }
}

/** 创建项目 */
async function createProject(
  request: APIRequestContext,
  headers: Record<string, string>,
  suffix: string,
): Promise<string> {
  const resp = await request.post(`${apiBase}/projects`, {
    headers,
    data: {
      name: `Assets Test Proj ${suffix}`,
      description: "E2E assets test",
    },
  })
  expect(resp.ok(), `创建项目应成功: ${await resp.text()}`).toBeTruthy()
  const data = await resp.json()
  return data.id
}

/** 创建素材库 */
async function createLibrary(
  request: APIRequestContext,
  headers: Record<string, string>,
  projectId: string,
  name: string,
  kind: "video" | "image" = "video",
): Promise<string> {
  const resp = await request.post(`${apiBase}/asset-libraries`, {
    headers,
    data: { project_id: projectId, name, kind },
  })
  expect(resp.ok(), `创建素材库应成功: ${await resp.text()}`).toBeTruthy()
  const data = await resp.json()
  return data.id
}

/** 创建素材记录 */
async function createAsset(
  request: APIRequestContext,
  headers: Record<string, string>,
  projectId: string,
  libraryId: string,
  userId: string,
  name: string,
  status: string = "ready",
): Promise<string> {
  const resp = await request.post(`${apiBase}/assets`, {
    headers,
    data: {
      project_id: projectId,
      library_id: libraryId,
      name,
      storage_key: `uploads/e2e/${Date.now()}/${name}`,
      mime_type: "video/mp4",
      file_size: 1024000,
      status,
      uploaded_by_user_id: userId,
      metadata: { duration: 15.5, resolution: "1080p" },
    },
  })
  expect(resp.ok(), `创建素材应成功: ${await resp.text()}`).toBeTruthy()
  const data = await resp.json()
  return data.id
}

/** 在浏览器中设置登录态 */
async function setupAuthInBrowser(
  page: import("@playwright/test").Page,
  token: string,
  user: { id: string; email: string; username: string },
) {
  await page.addInitScript(
    ({ token, user }) => {
      localStorage.setItem("access_token", token)
      localStorage.setItem(
        "auth-storage",
        JSON.stringify({
          state: { user, isAuthenticated: true },
          version: 0,
        }),
      )
    },
    {
      token,
      user: {
        id: user.id,
        user_id: user.id,
        email: user.email,
        username: user.username,
        display_name: user.username,
        is_email_verified: true,
        email_verified: true,
      },
    },
  )
}

test.describe("素材库页面 - 完整交互测试", () => {
  test.describe.configure({ timeout: 180_000 })

  // ─── 页面加载 ──────────────────────────────────────

  test("素材库列表页面加载", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-load",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    await createLibrary(request, headers, projectId, "默认视频库", "video")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")

    // 页面布局容器
    await expect(page.locator(".xx-assets-page")).toBeVisible({
      timeout: 20_000,
    })
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    // 左侧素材库列表
    await expect(page.locator(".xx-asset-library-list")).toBeVisible()

    // 右侧内容区（上传区 + 筛选 + 素材网格）
    await expect(page.locator(".xx-assets-content")).toBeVisible()
    await expect(page.locator(".xx-asset-upload-zone")).toBeVisible()
    await expect(page.locator(".xx-assets-filters")).toBeVisible()

    // 无错误提示
    await expect(page.getByText(/加载失败|素材库加载失败/)).toHaveCount(0, {
      timeout: 5_000,
    })
  })

  // ─── 创建素材库 ────────────────────────────────────

  test("创建新素材库 - 通过 UI", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-create",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    await createLibrary(request, headers, projectId, "初始库", "video")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    // 点击新建素材库
    await page.locator(".xx-asset-library-add").click()

    // 弹窗出现
    const modal = page.locator(".ant-modal-content").filter({ hasText: "新建素材库" })
    await expect(modal).toBeVisible()

    // 填写表单
    const newLibName = `E2E 新建库 ${Date.now()}`
    await modal.getByPlaceholder("请输入素材库名称").fill(newLibName)
    // 类型选择默认是 video，保持即可

    // 监听创建请求
    const createPromise = page.waitForResponse(
      (resp) => resp.url().includes("/asset-libraries") && resp.request().method() === "POST",
      { timeout: 10_000 },
    )

    // 点击创建
    await modal.getByRole("button", { name: "创建" }).click()

    const resp = await createPromise
    expect(resp.ok(), `创建素材库应成功: ${resp.status()}`).toBeTruthy()

    // 新素材库应出现在列表中
    await expect(
      page.locator(".xx-asset-library-item").filter({ hasText: newLibName }),
    ).toBeVisible({ timeout: 10_000 })
  })

  // ─── 切换素材库 ────────────────────────────────────

  test("切换不同素材库", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-switch",
    )
    const projectId = await createProject(request, headers, Date.now().toString())

    const videoLibName = "视频素材库 A"
    const imageLibName = "图片素材库 B"
    const videoLibId = await createLibrary(request, headers, projectId, videoLibName, "video")

    // 在视频库里创建一个素材
    await createAsset(request, headers, projectId, videoLibId, userId, "demo_video.mp4")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    // 点击视频库，应显示素材
    const videoLibItem = page.locator(".xx-asset-library-item").filter({ hasText: videoLibName })
    await videoLibItem.click({ force: true })
    await expect(videoLibItem).toHaveClass(/active/)

    // 验证视频素材出现
    await expect(page.getByText("demo_video.mp4")).toBeVisible({
      timeout: 10_000,
    })

    // 点击图片库，应切换且不显示视频
    const imageLibItem = page.locator(".xx-asset-library-item").filter({ hasText: imageLibName })
    await imageLibItem.click({ force: true })
    await expect(imageLibItem).toHaveClass(/active/)

    // 空状态或图片库内容
    await expect(page.getByText("demo_video.mp4")).toHaveCount(0, {
      timeout: 5_000,
    })
  })

  // ─── 素材搜索 ──────────────────────────────────────

  test("素材搜索功能", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-search",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    const libraryId = await createLibrary(request, headers, projectId, "搜索测试库", "video")

    // 创建两个不同名称的素材
    await createAsset(request, headers, projectId, libraryId, userId, "apple_clip.mp4")
    await createAsset(request, headers, projectId, libraryId, userId, "banana_clip.mp4")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    // 确保在测试库中
    const libItem = page.locator(".xx-asset-library-item").filter({ hasText: "搜索测试库" })
    await libItem.click({ force: true })

    // 两个素材都应可见
    await expect(page.getByText("apple_clip.mp4")).toBeVisible({
      timeout: 10_000,
    })
    await expect(page.getByText("banana_clip.mp4")).toBeVisible()

    // 搜索 apple，只显示 apple
    await page.getByPlaceholder("搜索素材名称...").fill("apple")
    await expect(page.getByText("apple_clip.mp4")).toBeVisible()
    await expect(page.getByText("banana_clip.mp4")).toHaveCount(0)

    // 清空搜索，两个都显示
    await page.getByPlaceholder("搜索素材名称...").fill("")
    await expect(page.getByText("apple_clip.mp4")).toBeVisible({
      timeout: 5_000,
    })
    await expect(page.getByText("banana_clip.mp4")).toBeVisible()
  })

  // ─── 筛选类型 ──────────────────────────────────────

  test("素材类型筛选", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-filter",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    const libraryId = await createLibrary(request, headers, projectId, "筛选测试库", "video")

    // 创建视频素材
    await createAsset(request, headers, projectId, libraryId, userId, "video_clip.mp4")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    const libItem = page.locator(".xx-asset-library-item").filter({ hasText: "筛选测试库" })
    await libItem.click({ force: true })

    // 素材应可见
    await expect(page.getByText("video_clip.mp4")).toBeVisible({
      timeout: 10_000,
    })

    // 筛选类型下拉存在
    const filterSelect = page.locator(".xx-assets-filters-left select").first()
    await expect(filterSelect).toBeVisible()
  })

  // ─── 素材详情/播放 ────────────────────────────────

  test("素材详情查看 - 播放弹窗", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-detail",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    const libraryId = await createLibrary(request, headers, projectId, "详情测试库", "video")
    await createAsset(request, headers, projectId, libraryId, userId, "play_test.mp4")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    const libItem = page.locator(".xx-asset-library-item").filter({ hasText: "详情测试库" })
    await libItem.click({ force: true })

    // 找到素材卡片并点击播放按钮
    const assetCard = page.locator(".xx-asset-card").filter({ hasText: "play_test.mp4" })
    await expect(assetCard).toBeVisible({ timeout: 10_000 })

    // 点击播放按钮
    await assetCard.locator(".xx-asset-play").click({ force: true })

    // 播放弹窗出现
    const modal = page.locator(".ant-modal-content").filter({ hasText: "播放" })
    await expect(modal).toBeVisible()

    // 关闭弹窗
    await modal.locator(".ant-modal-close").click()
    await expect(modal).not.toBeVisible({ timeout: 5_000 })
  })

  // ─── 删除素材 ──────────────────────────────────────

  test("删除素材 - 带确认对话框", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-delete",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    const libraryId = await createLibrary(request, headers, projectId, "删除测试库", "video")
    await createAsset(request, headers, projectId, libraryId, userId, "to_delete.mp4")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    const libItem = page.locator(".xx-asset-library-item").filter({ hasText: "删除测试库" })
    await libItem.click({ force: true })

    const assetCard = page.locator(".xx-asset-card").filter({ hasText: "to_delete.mp4" })
    await expect(assetCard).toBeVisible({ timeout: 10_000 })

    // 悬停显示删除按钮
    await assetCard.hover()

    // 点击删除
    const deleteBtn = assetCard.locator(".xx-asset-delete")
    await expect(deleteBtn).toBeVisible()
    await deleteBtn.click({ force: true })

    // 确认对话框出现
    const confirmModal = page.locator(".ant-popover").filter({ hasText: "确认删除" })
    await expect(confirmModal).toBeVisible()

    // 监听删除请求
    const deletePromise = page.waitForResponse(
      (resp) => resp.url().includes("/assets/") && resp.request().method() === "DELETE",
      { timeout: 10_000 },
    )

    // 点击确认删除
    await confirmModal.getByRole("button", { name: "删除" }).click()

    const resp = await deletePromise
    expect(resp.ok(), `删除素材应成功: ${resp.status()}`).toBeTruthy()

    // 素材应从列表中消失
    await expect(page.getByText("to_delete.mp4")).toHaveCount(0, {
      timeout: 10_000,
    })
  })

  // ─── 批量删除素材 ──────────────────────────────────

  test("批量删除素材", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-batch",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    const libraryId = await createLibrary(request, headers, projectId, "批量删除库", "video")

    // 创建多个素材
    await createAsset(request, headers, projectId, libraryId, userId, "batch_1.mp4")
    await createAsset(request, headers, projectId, libraryId, userId, "batch_2.mp4")
    await createAsset(request, headers, projectId, libraryId, userId, "batch_3.mp4")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    const libItem = page.locator(".xx-asset-library-item").filter({ hasText: "批量删除库" })
    await libItem.click({ force: true })

    // 所有素材应可见
    await expect(page.getByText("batch_1.mp4")).toBeVisible({
      timeout: 10_000,
    })
    await expect(page.getByText("batch_2.mp4")).toBeVisible()
    await expect(page.getByText("batch_3.mp4")).toBeVisible()

    // 点击全选
    const selectAllBtn = page.getByRole("button", { name: "全选" })
    await expect(selectAllBtn).toBeVisible()
    await selectAllBtn.click()

    // 批量操作栏出现
    const batchBar = page.locator(".xx-assets-batch-bar")
    await expect(batchBar).toBeVisible()
    await expect(batchBar.getByText(/已选 3 项/)).toBeVisible()

    // 点击批量删除
    const batchDeleteBtn = batchBar.getByRole("button", { name: "批量删除" })
    await expect(batchDeleteBtn).toBeVisible()
    await batchDeleteBtn.click()

    // 确认对话框
    const confirmPop = page.locator(".ant-popover").filter({ hasText: "确定删除" })
    await expect(confirmPop).toBeVisible()

    // 确认删除
    await confirmPop.getByRole("button", { name: "删除" }).click()

    // 验证素材已删除（通过 API 确认）
    await expect
      .poll(
        async () => {
          const resp = await request.get(`${apiBase}/assets`, {
            headers,
            params: { library_id: libraryId },
          })
          if (!resp.ok()) return "error"
          const data = await resp.json()
          const items = data.items || []
          return items.length
        },
        { timeout: 15_000, intervals: [1_000, 2_000, 3_000] },
      )
      .toBe(0)
  })

  // ─── 空状态 ────────────────────────────────────────

  test("空素材库展示空状态", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page)
    const { headers, userId, accessToken, email, username } = await createAuthedUser(
      request,
      "assets-empty",
    )
    const projectId = await createProject(request, headers, Date.now().toString())
    await createLibrary(request, headers, projectId, "空素材库", "video")

    await setupAuthInBrowser(page, accessToken, {
      id: userId,
      email,
      username,
    })

    await page.goto("/app/assets")
    await expect(page.locator(".xx-assets-layout")).toBeVisible({
      timeout: 20_000,
    })

    const libItem = page.locator(".xx-asset-library-item").filter({ hasText: "空素材库" })
    await libItem.click({ force: true })

    // 空状态应显示
    await expect(page.locator(".xx-assets-empty")).toBeVisible({
      timeout: 10_000,
    })
    await expect(page.getByText("暂无素材，请上传或切换素材库")).toBeVisible()
  })

  // ─── 未登录访问 ────────────────────────────────────

  test("未登录访问素材库 - 重定向到登录页", async ({ page }) => {
    await page.goto("/app/assets")
    await expect(page).toHaveURL(/\/login/)
  })
})