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

/**
 * 订阅完整流程 E2E 测试
 *
 * 覆盖：订阅套餐页、套餐卡片展示、升级套餐交互、账单列表页、
 * 取消订阅（确认流程）、自动续费切换、支付流程、未登录重定向
 *
 * 注意：subscription.spec.ts 已覆盖 API 基础测试和路由守卫，
 * 本文件专注于页面交互和完整流程。
 *
 * 每个测试独立，先注册登录获取 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.describe.configure({ timeout: 120_000 });

  test("订阅套餐页面加载成功", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-load",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-load",
    });

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

  test("套餐卡片网格展示", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-cards",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-cards",
    });

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

    // 验证套餐卡片存在
    const planCards = page.locator(".xx-plan-card");
    await expect(planCards.first()).toBeVisible({ timeout: 10_000 });
    const cardCount = await planCards.count();
    expect(cardCount).toBeGreaterThanOrEqual(2);
  });

  test("套餐卡片包含名称、价格、特性列表", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-cardinfo",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-cardinfo",
    });

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

    const firstCard = page.locator(".xx-plan-card").first();
    await expect(firstCard).toBeVisible({ timeout: 10_000 });

    // 验证价格区域存在
    await expect(firstCard.locator(".xx-plan-price")).toBeVisible();
    // 验证特性列表存在
    await expect(firstCard.locator(".xx-features")).toBeVisible();
    // 验证订阅按钮存在
    await expect(firstCard.locator(".xx-subscribe-btn")).toBeVisible();
  });

  test("推荐套餐有特殊标识", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-recommended",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-recommended",
    });

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

    // 验证有推荐标签
    const featuredCard = page.locator(".xx-plan-card.featured");
    if (await featuredCard.isVisible({ timeout: 5_000 })) {
      await expect(featuredCard.locator(".xx-badge")).toBeVisible();
    }
  });
});

test.describe("订阅套餐页 - 升级交互", () => {
  test.describe.configure({ timeout: 120_000 });

  test("点击升级套餐按钮跳转升级页", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-upgrade-btn",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-upgrade-btn",
    });

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

    // 点击一个订阅按钮
    const subscribeBtn = page.locator(".xx-subscribe-btn").first();
    if (await subscribeBtn.isVisible({ timeout: 10_000 })) {
      await subscribeBtn.click();
      // 可能跳转到升级页或打开支付弹窗
      const url = page.url();
      // 验证页面有响应（跳转到支付或保持在订阅页但有弹窗）
      expect(
        url.includes("/subscription/upgrade") ||
          url.includes("/subscription") ||
          (await page
            .locator(".ant-modal, [role='dialog']")
            .first()
            .isVisible()
            .catch(() => false)),
      ).toBeTruthy();
    }
  });

  test("升级套餐升级页面可访问", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-upgrade-page",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-upgrade-page",
    });

    await page.goto("/app/subscription/upgrade");
    // 升级页面应该可访问（可能跳转到订阅页或显示升级内容）
    await expect(page).toHaveURL(/\/subscription/, { timeout: 10_000 });
  });
});

test.describe("订阅 - 账单列表页", () => {
  test.describe.configure({ timeout: 120_000 });

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

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

  test("账单概览区域展示", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-billing-overview",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-billing-overview",
    });

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

    // 验证概览区域存在
    const overview = page.locator(".xx-billing-overview");
    if (await overview.isVisible({ timeout: 5_000 })) {
      await expect(overview).toBeVisible();
      // 验证套餐信息
      await expect(overview.locator(".xx-overview-item").first()).toBeVisible();
    }
  });

  test("自动续费开关存在", async ({ page, request }) => {
    await routeBrowserApiToTestApi(page);
    const { accessToken, userId, email, username } = await createAuthedUser(
      request,
      "sub-autorenew-ui",
    );
    await setupAuth(page, accessToken, {
      id: userId,
      email,
      username,
      display_name: "E2E sub-autorenew-ui",
    });

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

    // 验证自动续费区域存在
    const autoRenew = page.locator(".xx-billing-auto-renew");
    if (await autoRenew.isVisible({ timeout: 5_000 })) {
      await expect(autoRenew).toBeVisible();
      // 验证开关组件存在
      await expect(autoRenew.locator(".xx-toggle-switch")).toBeVisible();
    }
  });

  test("账单记录 API 返回数据", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-bills-api");

    const response = await request.get(
      `${apiBase}/subscription/billing-records`,
      { headers },
    );

    expect(
      response.ok(),
      `获取账单记录应返回 2xx，实际: ${response.status()}`,
    ).toBeTruthy();

    const data = await response.json();
    expect(Array.isArray(data), "账单记录应为数组").toBeTruthy();
  });
});

test.describe("订阅 - 自动续费切换", () => {
  test.describe.configure({ timeout: 120_000 });

  test("切换自动续费 - 正向 API", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-toggle-api");

    // 关闭自动续费
    const disableResp = await request.post(
      `${apiBase}/subscription/toggle-auto-renew`,
      {
        headers,
        data: { enabled: false },
      },
    );
    expect(
      disableResp.ok(),
      `关闭自动续费应成功: ${await disableResp.text()}`,
    ).toBeTruthy();

    // 重新开启自动续费
    const enableResp = await request.post(
      `${apiBase}/subscription/toggle-auto-renew`,
      {
        headers,
        data: { enabled: true },
      },
    );
    expect(
      enableResp.ok(),
      `开启自动续费应成功: ${await enableResp.text()}`,
    ).toBeTruthy();
  });

  test("切换自动续费 - 无效参数反向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-toggle-bad");

    const response = await request.post(
      `${apiBase}/subscription/toggle-auto-renew`,
      {
        headers,
        data: {},
      },
    );

    expect([400, 422]).toContain(response.status());
  });
});

test.describe("订阅 - 取消订阅", () => {
  test.describe.configure({ timeout: 120_000 });

  test("取消订阅 API - 免费用户反向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-cancel-api");

    const response = await request.post(`${apiBase}/subscription/cancel`, {
      headers,
    });

    // 免费用户取消订阅可能返回错误
    if (!response.ok()) {
      const data = await response.json();
      expect(data.error?.message || data.detail || data.message).toBeTruthy();
    }
    // 如果成功了也没问题（某些实现可能允许）
    expect(response.status() < 500).toBeTruthy();
  });

  test("未登录取消订阅 - 反向", async ({ request }) => {
    const response = await request.post(`${apiBase}/subscription/cancel`);
    expect([401, 403]).toContain(response.status());
  });
});

test.describe("订阅 - 套餐变更", () => {
  test.describe.configure({ timeout: 120_000 });

  test("升级到 Pro 套餐 - 正向 API", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-upgrade-api");

    const response = await request.post(`${apiBase}/subscription/change-plan`, {
      headers,
      data: {
        target_plan_id: "pro",
        billing_cycle: "monthly",
      },
    });

    expect(
      response.ok(),
      `升级套餐应成功: ${await response.text()}`,
    ).toBeTruthy();

    const data = await response.json();
    expect(data).toBeTruthy();
  });

  test("获取当前订阅信息 - 验证升级", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-current-api");

    // 先升级
    await request.post(`${apiBase}/subscription/change-plan`, {
      headers,
      data: {
        target_plan_id: "pro",
        billing_cycle: "monthly",
      },
    });

    // 获取当前订阅
    const response = await request.get(`${apiBase}/subscription/current`, {
      headers,
    });

    expect(
      response.ok(),
      `获取订阅信息应返回 2xx，实际: ${response.status()}`,
    ).toBeTruthy();

    const data = await response.json();
    expect(data.plan_id, "应返回 plan_id").toBeTruthy();
    expect(data.status, "应返回 status").toBeTruthy();
  });

  test("降级到 Standard 套餐 - 正向 API", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-downgrade-api");

    // 先升级到 Pro
    const upgrade = await request.post(`${apiBase}/subscription/change-plan`, {
      headers,
      data: {
        target_plan_id: "pro",
        billing_cycle: "monthly",
      },
    });
    expect(upgrade.ok(), `升级到 Pro 应成功`).toBeTruthy();

    // 降级到 Standard
    const downgrade = await request.post(
      `${apiBase}/subscription/change-plan`,
      {
        headers,
        data: {
          target_plan_id: "standard",
          billing_cycle: "monthly",
        },
      },
    );

    expect(
      downgrade.status() < 500,
      `降级请求应返回 2xx 或 4xx，实际: ${downgrade.status()}`,
    ).toBeTruthy();
  });

  test("切换到无效套餐 - 反向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-badplan-api");

    const response = await request.post(`${apiBase}/subscription/change-plan`, {
      headers,
      data: {
        target_plan_id: "nonexistent_plan",
        billing_cycle: "monthly",
      },
    });

    expect(response.status(), "无效套餐应返回 4xx").toBeGreaterThanOrEqual(400);
    expect(response.status()).toBeLessThan(500);
  });
});

test.describe("订阅 - 支付流程", () => {
  test.describe.configure({ timeout: 120_000 });

  test("创建支付订单 - 正向 API", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-pay-api");

    const response = await request.post(
      `${apiBase}/subscription/create-order`,
      {
        headers,
        data: {
          plan_id: "pro",
          billing_cycle: "monthly",
        },
      },
    );

    // 创建支付订单可能成功或接口不存在
    expect(
      response.status() < 500,
      `创建订单应返回 2xx 或 4xx，实际: ${response.status()}`,
    ).toBeTruthy();

    if (response.ok()) {
      const data = await response.json();
      // 应返回订单 ID 或支付链接
      expect(data.order_id || data.payment_url || data).toBeTruthy();
    }
  });

  test("未登录创建订单 - 反向", async ({ request }) => {
    const response = await request.post(
      `${apiBase}/subscription/create-order`,
      {
        data: {
          plan_id: "pro",
          billing_cycle: "monthly",
        },
      },
    );
    expect([401, 403, 404]).toContain(response.status());
  });
});

test.describe("订阅 - 套餐列表 API", () => {
  test.describe.configure({ timeout: 120_000 });

  test("获取套餐列表 - 正向", async ({ request }) => {
    const { headers } = await createAuthedUser(request, "sub-plans-api");

    const response = await request.get(`${apiBase}/subscription/plans`, {
      headers,
    });

    // 套餐列表可能需要登录也可能公开
    if (response.ok()) {
      const data = await response.json();
      const plans = Array.isArray(data) ? data : data.plans || data.items;
      if (Array.isArray(plans)) {
        expect(plans.length).toBeGreaterThanOrEqual(2);
      }
    }
    // 如果需要登录也正常
    expect(response.status() < 500).toBeTruthy();
  });

  test("未登录获取套餐列表", async ({ request }) => {
    const response = await request.get(`${apiBase}/subscription/plans`);
    // 套餐列表可能公开也可能需要登录
    expect(response.status() < 500).toBeTruthy();
  });
});