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

/**
 * 模板库页面 E2E 测试
 *
 * 覆盖：模板列表加载、分类切换、模板详情、收藏/取消收藏、
 * 使用模板入口、搜索功能、我的模板tab、未登录重定向
 *
 * 每个测试独立，先注册登录获取 auth token。
 */
import {
  expect,
  test,
  type APIRequestContext,
  type Page,
} from "@playwright/test";

const PASSWORD = "Test123456!";
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: 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,
  };
}

/** 设置页面认证状态（localStorage） */
async function setupAuth(
  page: Page,
  token: string,
  user: { id: string; email: string; username: string; display_name: 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.display_name,
        is_email_verified: true,
        email_verified: true,
      },
    },
  );
}

test.describe("模板库页面 - 未登录重定向", () => {
  test("未登录访问重定向到登录页", async ({ page }) => {
    await page.goto("/app/templates");
    await expect(page).toHaveURL(/\/login/);
  });
});

test.describe("模板库页面 - 页面加载", () => {
  test.describe.configure({ timeout: 120_000 });

  test("模板库页面加载成功", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "tpl-load",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-load",
    });

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

  test("模板库头部和搜索栏存在", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "tpl-head",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-head",
    });

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

    // 验证搜索框
    const searchInput = page.locator(".xx-templates-search-input");
    await expect(searchInput).toBeVisible({ timeout: 10_000 });
  });

  test("分类切换按钮存在", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "tpl-cat",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-cat",
    });

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

    // 验证分类按钮存在
    const categoryBtns = page.locator(".xx-templates-cat-btn");
    await expect(categoryBtns.first()).toBeVisible({ timeout: 10_000 });
    const count = await categoryBtns.count();
    expect(count).toBeGreaterThan(0);
  });
});

test.describe("模板库 - 模板展示", () => {
  test.describe.configure({ timeout: 120_000 });

  test("模板卡片展示", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username, headers } =
      await createAuthedUser(request, "tpl-cards");
    const suffix = Date.now().toString(36);

    // 创建一个模板
    await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `E2E 模板展示 ${suffix}`,
        mode: "pip",
        estimated_duration: 30,
        description: "测试模板展示",
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
          },
        ],
        tags: ["e2e", "展示"],
        category: "种草",
      },
    });

    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-cards",
    });

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

    // 等待模板卡片出现
    const cards = page.locator(".xx-template-card");
    await expect(cards.first()).toBeVisible({ timeout: 15_000 });
    const count = await cards.count();
    expect(count).toBeGreaterThan(0);
  });

  test("模板卡片包含名称和类型", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username, headers } =
      await createAuthedUser(request, "tpl-info");
    const suffix = Date.now().toString(36);

    await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `模板信息测试 ${suffix}`,
        mode: "voice_over",
        estimated_duration: 60,
        description: "测试信息展示",
        segments: [
          {
            segment_order: 1,
            duration_min: 10,
            duration_max: 30,
            material_type: "video",
          },
        ],
      },
    });

    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-info",
    });

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

    const firstCard = page.locator(".xx-template-card").first();
    if (await firstCard.isVisible({ timeout: 15_000 })) {
      // 验证信息区域存在
      const info = firstCard.locator(".xx-template-info");
      await expect(info).toBeVisible();
    }
  });

  test("模板预览弹窗功能", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username, headers } =
      await createAuthedUser(request, "tpl-preview");
    const suffix = Date.now().toString(36);

    await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `预览测试模板 ${suffix}`,
        mode: "pip",
        estimated_duration: 30,
        description: "预览测试描述",
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
            description: "片段一",
          },
        ],
      },
    });

    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-preview",
    });

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

    // 点击第一个模板卡片打开预览
    const firstCard = page.locator(".xx-template-card").first();
    if (await firstCard.isVisible({ timeout: 15_000 })) {
      await firstCard.click();
      // 预览弹窗应该出现
      const modal = page.locator(".xx-template-modal");
      if (await modal.isVisible({ timeout: 5_000 })) {
        await expect(modal).toBeVisible();
        // 验证预览内容存在
        await expect(
          modal.locator(".xx-template-modal-title-row"),
        ).toBeVisible();
      }
    }
  });
});

test.describe("模板库 - 分类切换", () => {
  test.describe.configure({ timeout: 120_000 });

  test("切换分类筛选", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "tpl-switch",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-switch",
    });

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

    const categoryBtns = page.locator(".xx-templates-cat-btn");
    const firstBtn = categoryBtns.first();

    if (await firstBtn.isVisible({ timeout: 10_000 })) {
      await firstBtn.click();
      // 验证按钮被选中
      await expect(firstBtn).toHaveClass(/active/);
    }
  });
});

test.describe("模板库 - 搜索", () => {
  test.describe.configure({ timeout: 120_000 });

  test("搜索框可输入并筛选", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username, headers } =
      await createAuthedUser(request, "tpl-search");
    const suffix = Date.now().toString(36);
    const templateName = `E2E 搜索测试模板 ${suffix}`;

    await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: templateName,
        mode: "pip",
        estimated_duration: 30,
        description: "搜索测试专用模板",
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
          },
        ],
      },
    });

    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-search",
    });

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

    const searchInput = page.locator(".xx-templates-search-input");
    if (await searchInput.isVisible({ timeout: 10_000 })) {
      await searchInput.fill(suffix);
      // 验证页面正常响应
      await expect(page.locator(".xx-templates-page")).toBeVisible();
    }
  });
});

test.describe("模板库 - API 操作", () => {
  test.describe.configure({ timeout: 120_000 });

  test("获取模板列表 - 正向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "tpl-api-list");
    const suffix = Date.now().toString(36);

    await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `API 列表测试 ${suffix}`,
        mode: "pip",
        estimated_duration: 30,
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
          },
        ],
      },
    });

    const response = await request.get(`${apiBase}/templates`, { headers });
    expect(
      response.ok(),
      `获取模板列表应返回 2xx，实际: ${response.status()}`,
    ).toBeTruthy();

    const data = await response.json();
    const items = data.items || data.templates || [];
    expect(Array.isArray(items), "模板列表应为数组").toBeTruthy();
    expect(items.length).toBeGreaterThan(0);
  });

  test("收藏/取消收藏模板 - 正向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "tpl-fav");
    const suffix = Date.now().toString(36);

    // 创建模板
    const createResp = await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `收藏测试 ${suffix}`,
        mode: "pip",
        estimated_duration: 30,
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
          },
        ],
      },
    });
    expect(createResp.ok()).toBeTruthy();
    const created = await createResp.json();
    const templateId = created.id;

    // 收藏
    const favResp = await request.post(
      `${apiBase}/templates/${templateId}/favorite`,
      { headers },
    );
    // 收藏可能成功或接口不存在
    expect(favResp.status() < 500, "收藏请求应返回 2xx 或 4xx").toBeTruthy();

    // 取消收藏
    const unfavResp = await request.delete(
      `${apiBase}/templates/${templateId}/favorite`,
      { headers },
    );
    expect(
      unfavResp.status() < 500,
      "取消收藏请求应返回 2xx 或 4xx",
    ).toBeTruthy();
  });

  test("获取模板详情 - 正向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "tpl-api-detail");
    const suffix = Date.now().toString(36);

    const createResp = await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `详情测试 ${suffix}`,
        mode: "voice_over",
        estimated_duration: 60,
        description: "详情测试描述",
        segments: [
          {
            segment_order: 1,
            duration_min: 10,
            duration_max: 30,
            material_type: "video",
            description: "测试片段",
          },
        ],
      },
    });
    expect(createResp.ok()).toBeTruthy();
    const created = await createResp.json();

    const detailResp = await request.get(`${apiBase}/templates/${created.id}`, {
      headers,
    });
    expect(detailResp.ok(), "获取详情应成功").toBeTruthy();
    const detail = await detailResp.json();
    expect(detail.id).toBe(created.id);
    expect(detail.name).toBe(`详情测试 ${suffix}`);
  });

  test("使用模板接口 - 正向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "tpl-use");
    const suffix = Date.now().toString(36);

    const createResp = await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `使用测试 ${suffix}`,
        mode: "pip",
        estimated_duration: 30,
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
          },
        ],
      },
    });
    expect(createResp.ok()).toBeTruthy();
    const created = await createResp.json();

    // 使用模板（生成）
    const genResp = await request.post(
      `${apiBase}/templates/${created.id}/generate`,
      { headers, data: {} },
    );
    // 生成可能成功或返回业务错误
    expect(genResp.status() < 500, "使用模板应返回 2xx 或 4xx").toBeTruthy();
  });

  test("未登录获取模板列表 - 反向", async ({ request }) => {
    const response = await request.get(`${apiBase}/templates`);
    expect([401, 403]).toContain(response.status());
  });
});

test.describe("模板库 - 我的模板 Tab", () => {
  test.describe.configure({ timeout: 120_000 });

  test("我的模板页面可访问", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "tpl-my",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-my",
    });

    await page.goto("/app/my-templates");
    await expect(page.locator(".mt-page")).toBeVisible({
      timeout: 20_000,
    });
  });

  test("我的模板页面展示已创建的模板", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username, headers } =
      await createAuthedUser(request, "tpl-my-data");
    const suffix = Date.now().toString(36);

    await request.post(`${apiBase}/templates`, {
      headers,
      data: {
        name: `我的模板测试 ${suffix}`,
        mode: "pip",
        estimated_duration: 30,
        description: "我的模板展示测试",
        segments: [
          {
            segment_order: 1,
            duration_min: 5,
            duration_max: 15,
            material_type: "video",
          },
        ],
      },
    });

    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E tpl-my-data",
    });

    await page.goto("/app/my-templates");
    await expect(page.locator(".mt-page")).toBeVisible({
      timeout: 20_000,
    });

    // 验证卡片容器存在
    const cards = page.locator(".mt-card");
    await expect(cards.first()).toBeVisible({ timeout: 15_000 });
  });
});