xiaoxia-saas/apps/web/e2e/duplication.spec.ts

/**
 * 去重流程 E2E 测试
 *
 * 覆盖：去重上传页面、上传区域、去重记录列表、去重详情、
 *       删除记录、重试去重
 */
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, accessToken } */
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 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 { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-load",
    );

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

    await page.goto("/app/duplication");

    // 页面容器
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 页面标题
    await expect(page.getByRole("heading", { name: "视频查重" })).toBeVisible();

    // 描述
    await expect(
      page.getByText("上传视频文件，系统将自动检测与已有素材的重复片段"),
    ).toBeVisible();
  });

  // ─── 上传区域展示 ──────────────────────────────────

  test("上传区域展示", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-upload-zone",
    );

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

    await page.goto("/app/duplication");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 拖拽上传区域
    const uploadZone = page.locator(".dup-upload-zone");
    await expect(uploadZone).toBeVisible();

    // 上传图标和文字
    await expect(
      uploadZone.getByText("点击或拖拽视频文件到此区域"),
    ).toBeVisible();

    // 格式提示
    await expect(uploadZone.getByText(/支持 MP4、AVI、MOV、MKV/)).toBeVisible();

    // 格式标签
    await expect(page.locator(".dup-upload-formats")).toBeVisible();

    // 选择文件按钮
    const selectBtn = page.getByRole("button", { name: "选择文件" });
    await expect(selectBtn).toBeVisible();

    // 隐藏的文件 input
    const fileInput = page.locator('input[type="file"]');
    await expect(fileInput).toHaveCount(1);
  });

  // ─── 格式说明区 ────────────────────────────────────

  test("格式说明和提示区域展示", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-info",
    );

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

    await page.goto("/app/duplication");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 右侧说明区
    const infoCard = page.locator(".dup-info-card");
    await expect(infoCard).toBeVisible();

    // 查重说明
    await expect(infoCard.getByText("查重说明")).toBeVisible();

    // 支持格式
    await expect(infoCard.getByText("支持格式")).toBeVisible();

    // 温馨提示
    await expect(infoCard.getByText("温馨提示")).toBeVisible();

    // 格式标签
    await expect(page.locator(".dup-format-tags")).toBeVisible();
  });

  // ─── 去重记录列表页面 ──────────────────────────────

  test("去重记录列表页面加载", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-list",
    );

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

    await page.goto("/app/duplication/results");

    // 页面容器
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 页面标题
    await expect(page.getByRole("heading", { name: "查重记录" })).toBeVisible();

    // 筛选按钮
    await expect(page.locator(".dup-filter")).toBeVisible();

    // 上传查重按钮
    await expect(page.getByRole("button", { name: "上传查重" })).toBeVisible();
  });

  test("去重记录列表 - 空状态", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-list-empty",
    );

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

    await page.goto("/app/duplication/results");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 空状态（新用户没有记录）
    const emptyState = page.locator(".dup-results-empty");
    await expect(emptyState).toBeVisible({ timeout: 10_000 });
    await expect(emptyState.getByText(/暂无查重记录/)).toBeVisible();
  });

  test("去重记录列表 - 风险等级筛选", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-filter",
    );

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

    await page.goto("/app/duplication/results");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 筛选按钮存在
    const filterBtns = page.locator(".dup-filter-btn");
    await expect(filterBtns).toHaveCount(4); // 全部、低风险、中风险、高风险

    // 验证按钮文本
    await expect(filterBtns.nth(0)).toHaveText("全部");
    await expect(filterBtns.nth(1)).toHaveText("低风险");
    await expect(filterBtns.nth(2)).toHaveText("中风险");
    await expect(filterBtns.nth(3)).toHaveText("高风险");

    // 默认选中"全部"
    await expect(filterBtns.nth(0)).toHaveClass(/active/);

    // 点击低风险
    await filterBtns.nth(1).click();
    await expect(filterBtns.nth(1)).toHaveClass(/active/);
  });

  test("去重记录列表 - 上传查重按钮跳转", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { userId, accessToken, email, username } = await createAuthedUser(
      request,
      "dup-nav",
    );

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

    await page.goto("/app/duplication/results");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 点击上传查重按钮
    await page.getByRole("button", { name: "上传查重" }).click();

    await expect(page).toHaveURL(/\/app\/duplication$/);
    await expect(page.locator(".dup-upload-zone")).toBeVisible();
  });

  // ─── 去重详情页 ────────────────────────────────────

  test("去重详情页 - 通过 API 创建测试数据后访问", async ({
    page,
    request,
  }) => {
    await routeBrowserApiToTestApi(page);
    const { headers, userId, accessToken, email, username } =
      await createAuthedUser(request, "dup-detail");

    // 先上传一个文件进行查重，获取 record id
    const uploadResp = await request.post(`${apiBase}/duplication/upload`, {
      headers,
      multipart: {
        file: {
          name: "e2e_dup_test.mp4",
          mimeType: "video/mp4",
          buffer: Buffer.from("e2e duplication test data"),
        },
      },
    });

    // 如果查重 API 不可用，跳过详情页测试
    if (!uploadResp.ok()) {
      console.log(
        `[skip] 查重上传 API 不可用 (${uploadResp.status()})，跳过详情页测试`,
      );
      return;
    }

    const uploadData = await uploadResp.json();
    const recordId = uploadData.id;
    expect(recordId, "应返回查重记录 ID").toBeTruthy();

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

    // 访问详情页
    await page.goto(`/app/duplication/${recordId}`);

    // 页面应正常渲染
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 验证无错误
    await expect(page.getByText(/加载失败|404|Not Found/)).toHaveCount(0, {
      timeout: 5_000,
    });
  });

  // ─── 删除记录 ──────────────────────────────────────

  test("去重记录删除 - API 验证", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { headers } =
      await createAuthedUser(request, "dup-delete");

    // 创建查重记录
    const uploadResp = await request.post(`${apiBase}/duplication/upload`, {
      headers,
      multipart: {
        file: {
          name: "e2e_dup_delete.mp4",
          mimeType: "video/mp4",
          buffer: Buffer.from("e2e duplication delete test"),
        },
      },
    });

    if (!uploadResp.ok()) {
      console.log(
        `[skip] 查重上传 API 不可用 (${uploadResp.status()})，跳过删除测试`,
      );
      return;
    }

    const uploadData = await uploadResp.json();
    const recordId = uploadData.id;

    // 验证记录存在
    const listResp = await request.get(`${apiBase}/duplication/records`, {
      headers,
    });
    if (listResp.ok()) {
      const records = await listResp.json();
      const recordExists = Array.isArray(records)
        ? records.some((r: { id: string }) => r.id === recordId)
        : (records.items || []).some((r: { id: string }) => r.id === recordId);
      expect(recordExists, "记录应存在于列表中").toBeTruthy();
    }

    // 删除记录
    const deleteResp = await request.delete(
      `${apiBase}/duplication/records/${recordId}`,
      { headers },
    );
    expect(
      deleteResp.ok(),
      `删除查重记录应成功: ${deleteResp.status()}`,
    ).toBeTruthy();

    // 验证记录已删除
    const listAfterResp = await request.get(`${apiBase}/duplication/records`, {
      headers,
    });
    if (listAfterResp.ok()) {
      const recordsAfter = await listAfterResp.json();
      const recordStillExists = Array.isArray(recordsAfter)
        ? recordsAfter.some((r: { id: string }) => r.id === recordId)
        : (recordsAfter.items || []).some(
            (r: { id: string }) => r.id === recordId,
          );
      expect(recordStillExists, "记录应已被删除").toBeFalsy();
    }
  });

  test("去重记录删除 - UI 验证", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { headers, userId, accessToken, email, username } =
      await createAuthedUser(request, "dup-delete-ui");

    // 创建查重记录
    const uploadResp = await request.post(`${apiBase}/duplication/upload`, {
      headers,
      multipart: {
        file: {
          name: "e2e_dup_ui_delete.mp4",
          mimeType: "video/mp4",
          buffer: Buffer.from("e2e duplication ui delete test"),
        },
      },
    });

    if (!uploadResp.ok()) {
      console.log(
        `[skip] 查重上传 API 不可用 (${uploadResp.status()})，跳过 UI 删除测试`,
      );
      return;
    }

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

    await page.goto("/app/duplication/results");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 记录卡片应存在
    const resultCard = page.locator(".dup-result-card").first();
    const cardVisible = await resultCard
      .isVisible({ timeout: 10_000 })
      .catch(() => false);

    if (cardVisible) {
      // 删除按钮存在
      const deleteBtn = resultCard.getByRole("button").filter({
        hasText: "🗑️",
      });
      await expect(deleteBtn).toBeVisible();

      // 删除按钮点击 - 会触发 confirm 对话框
      // 这里我们通过监听 confirm 来确认删除
      page.once("dialog", async (dialog) => {
        expect(dialog.message()).toContain("确定删除");
        await dialog.accept();
      });

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

      await deleteBtn.click();

      const deleteResp = await deletePromise;
      if (deleteResp) {
        expect(deleteResp.ok(), "删除请求应成功").toBeTruthy();
      }
    }
  });

  // ─── 重试去重 ──────────────────────────────────────

  test("重试去重按钮 - 失败记录显示重试", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { headers, userId, accessToken, email, username } =
      await createAuthedUser(request, "dup-retry");

    // 创建查重记录
    const uploadResp = await request.post(`${apiBase}/duplication/upload`, {
      headers,
      multipart: {
        file: {
          name: "e2e_dup_retry.mp4",
          mimeType: "video/mp4",
          buffer: Buffer.from("e2e duplication retry test"),
        },
      },
    });

    if (!uploadResp.ok()) {
      console.log(
        `[skip] 查重上传 API 不可用 (${uploadResp.status()})，跳过重试测试`,
      );
      return;
    }

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

    await page.goto("/app/duplication/results");
    await expect(page.locator(".dup-page")).toBeVisible({ timeout: 20_000 });

    // 记录列表中至少有一条记录
    const resultCard = page.locator(".dup-result-card").first();
    const cardVisible = await resultCard
      .isVisible({ timeout: 10_000 })
      .catch(() => false);

    if (cardVisible) {
      // 验证记录卡片基本结构
      await expect(resultCard.locator(".dup-result-card-body")).toBeVisible();
      await expect(resultCard.locator(".dup-result-card-score")).toBeVisible();

      // 检查是否有重试按钮（失败状态才显示）
      // 新上传的记录可能是处理中或完成状态，不一定显示重试按钮
      // 这里只验证 API 重试接口可用
      const uploadData = await uploadResp.json();
      const recordId = uploadData.id;

      const retryResp = await request.post(
        `${apiBase}/duplication/records/${recordId}/retry`,
        { headers },
      );
      // 重试接口应返回 2xx 或明确的状态码
      expect(retryResp.status()).toBeLessThan(500);
    }
  });

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

  test("未登录访问去重上传页 - 重定向到登录页", async ({ page }) => {
    await page.goto("/app/duplication");
    await expect(page).toHaveURL(/\/login/);
  });

  test("未登录访问去重记录页 - 重定向到登录页", async ({ page }) => {
    await page.goto("/app/duplication/results");
    await expect(page).toHaveURL(/\/login/);
  });
});