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

/**
 * 注册页面 E2E 测试
 *
 * 覆盖：页面渲染、表单验证、成功注册、跳转链接
 * 每个测试独立，使用随机邮箱避免冲突。
 */
import { expect, test, type APIRequestContext } from "@playwright/test";

const PASSWORD = "Test123456!";
const apiBase = process.env.E2E_API_BASE || "/api/v1";

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 限流自动等待重试（最多等 65s） */
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 },
  });
}

test.describe("注册页面", () => {
  test.describe.configure({ timeout: 120_000 });

  // ─── 页面渲染 ──────────────────────────────────────

  test("页面正常渲染 - 标题、表单元素、提交按钮", async ({ page }) => {
    await page.goto("/register");

    // 品牌标识
    await expect(page.locator(".xx-auth-brand-name")).toHaveText("小虾智剪");

    // 标题/描述
    await expect(
      page.getByText("创建账户，开启智能视频创作之旅"),
    ).toBeVisible();

    // 表单字段
    await expect(page.getByLabel("邮箱")).toBeVisible();
    await expect(page.getByLabel("用户名")).toBeVisible();
    await expect(page.getByLabel("密码")).toBeVisible();
    await expect(page.getByLabel("确认密码")).toBeVisible();

    // 提交按钮
    await expect(
      page.locator("button[type='submit']").filter({ hasText: "注册" }),
    ).toBeVisible();
  });

  // ─── 表单验证 ──────────────────────────────────────

  test("空提交 - 显示必填错误", async ({ page }) => {
    await page.goto("/register");

    // 直接点击注册按钮
    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    // 应显示必填错误
    await expect(page.getByText("请输入邮箱")).toBeVisible();
    await expect(page.getByText("请输入用户名")).toBeVisible();
    await expect(page.getByText("请输入密码")).toBeVisible();
    await expect(page.getByText("请确认密码")).toBeVisible();
  });

  test("无效邮箱格式 - 显示格式错误", async ({ page }) => {
    await page.goto("/register");

    await page.getByLabel("邮箱").fill("not-an-email");
    await page.getByLabel("用户名").fill("testuser");
    await page.getByLabel("密码").fill(PASSWORD);
    await page.getByLabel("确认密码").fill(PASSWORD);

    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    // 应显示邮箱格式错误
    await expect(page.getByText("请输入有效的邮箱地址")).toBeVisible();
  });

  test("密码太短 - 显示长度错误", async ({ page }) => {
    await page.goto("/register");

    await page.getByLabel("邮箱").fill(uniqueEmail("short-pwd"));
    await page.getByLabel("用户名").fill("testuser");
    await page.getByLabel("密码").fill("123");
    await page.getByLabel("确认密码").fill("123");

    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    // 应显示密码长度错误
    await expect(page.getByText("密码至少 8 个字符")).toBeVisible();
  });

  test("确认密码不一致 - 显示不一致错误", async ({ page }) => {
    await page.goto("/register");

    await page.getByLabel("邮箱").fill(uniqueEmail("pwd-mismatch"));
    await page.getByLabel("用户名").fill("testuser");
    await page.getByLabel("密码").fill(PASSWORD);
    await page.getByLabel("确认密码").fill("Different123!");

    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    // 应显示密码不一致错误
    await expect(page.getByText("两次输入的密码不一致")).toBeVisible();
  });

  test("用户名为空 - 显示必填错误", async ({ page }) => {
    await page.goto("/register");

    await page.getByLabel("邮箱").fill(uniqueEmail("empty-user"));
    await page.getByLabel("用户名").fill("");
    await page.getByLabel("密码").fill(PASSWORD);
    await page.getByLabel("确认密码").fill(PASSWORD);

    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    await expect(page.getByText("请输入用户名")).toBeVisible();
  });

  // ─── 成功注册 ──────────────────────────────────────

  test("成功注册 - 提交有效表单", async ({ page, _request }) => {
    const email = uniqueEmail("reg-ui-ok");
    const username = uniqueUsername("reguiok");

    await page.goto("/register");

    await page.getByLabel("邮箱").fill(email);
    await page.getByLabel("用户名").fill(username);
    await page.getByLabel("密码").fill(PASSWORD);
    await page.getByLabel("确认密码").fill(PASSWORD);

    // 监听注册请求
    const registerResponse = page.waitForResponse(
      (resp) =>
        resp.url().includes("/auth/register") &&
        resp.request().method() === "POST",
      { timeout: 15_000 },
    );

    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    const resp = await registerResponse;
    expect(
      resp.ok(),
      `注册请求应返回 2xx，实际: ${resp.status()}`,
    ).toBeTruthy();

    // 注册成功后应跳转到登录页或显示成功消息
    // 页面应停留在可识别的状态（成功提示或跳转）
    await expect
      .poll(
        async () => {
          const url = page.url();
          // 可能跳转到 login，也可能在当前页显示成功消息
          if (url.includes("/login")) return "redirected";
          const hasSuccess = await page.getByText(/注册成功/).isVisible();
          return hasSuccess ? "success_msg" : url;
        },
        { timeout: 10_000 },
      )
      .toMatch(/redirected|success_msg/);
  });

  test("注册已存在邮箱 - UI 显示错误", async ({ page, request }) => {
    const email = uniqueEmail("reg-ui-dup");
    const username1 = uniqueUsername("reguidup1");
    const username2 = uniqueUsername("reguidup2");

    // 先通过 API 注册一个账号
    const firstReg = await request.post(`${apiBase}/auth/register`, {
      data: {
        email,
        password: PASSWORD,
        username: username1,
        display_name: "User 1",
      },
    });
    expect(firstReg.ok(), "第一次注册应成功").toBeTruthy();

    // 再在 UI 上用相同邮箱注册
    await page.goto("/register");

    await page.getByLabel("邮箱").fill(email);
    await page.getByLabel("用户名").fill(username2);
    await page.getByLabel("密码").fill(PASSWORD);
    await page.getByLabel("确认密码").fill(PASSWORD);

    await page
      .locator("button[type='submit']")
      .filter({ hasText: "注册" })
      .click();

    // 应显示错误提示（通过 antd message 或表单错误）
    await expect
      .poll(
        async () => {
          // 检查是否有错误消息
          const hasError = await page
            .getByText(/注册失败|已注册|已存在|exists/)
            .isVisible();
          return hasError ? "error_shown" : "waiting";
        },
        { timeout: 10_000 },
      )
      .toBe("error_shown");
  });

  // ─── 跳转链接 ──────────────────────────────────────

  test("跳转到登录页的链接", async ({ page }) => {
    await page.goto("/register");

    await page.getByRole("link", { name: "立即登录" }).click();

    await expect(page).toHaveURL(/\/login/);
    await expect(page.getByLabel("邮箱")).toBeVisible();
  });

  test("登录页有跳转到注册页的链接（反向验证）", async ({ page }) => {
    await page.goto("/login");

    await page.getByRole("link", { name: "立即注册" }).click();

    await expect(page).toHaveURL(/\/register/);
  });

  test("登录页有忘记密码链接", async ({ page }) => {
    await page.goto("/login");

    await expect(page.getByRole("link", { name: /忘记密码/ })).toBeVisible();

    await page.getByRole("link", { name: /忘记密码/ }).click();

    await expect(page).toHaveURL(/\/forgot-password/);
  });

  // ─── 路由守卫 - 已登录用户访问注册页 ──────────────

  test("已登录用户访问注册页 - 可正常访问（注册页无守卫）", async ({
    page,
    request,
  }) => {
    const email = uniqueEmail("reg-auth");
    const username = uniqueUsername("regauth");

    // 注册
    await request.post(`${apiBase}/auth/register`, {
      data: {
        email,
        password: PASSWORD,
        username,
        display_name: "Reg Auth Test",
      },
    });

    // 登录
    const login = await loginWithRetry(request, email, PASSWORD);
    expect(login.ok(), "登录应成功").toBeTruthy();
    const loginData = await login.json();

    // 设置登录态
    await page.addInitScript(
      ({ token, user }) => {
        localStorage.setItem("access_token", token);
        localStorage.setItem(
          "auth-storage",
          JSON.stringify({
            state: { user, isAuthenticated: true },
            version: 0,
          }),
        );
      },
      {
        token: loginData.access_token,
        user: {
          id: loginData.user_id,
          user_id: loginData.user_id,
          email,
          username,
          display_name: username,
          is_email_verified: true,
          email_verified: true,
        },
      },
    );

    await page.goto("/register");

    // 注册页对已登录用户也可访问（注册页是公开页面）
    // 验证页面正常渲染
    await expect(page.getByLabel("邮箱")).toBeVisible();
    await expect(
      page.locator("button[type='submit']").filter({ hasText: "注册" }),
    ).toBeVisible();
  });
});