test(e2e): add paid image insufficient credits flow

2026-07-01 16:01:06 +08:00
parent a52e7f15ff
commit 854a7498b7
3 changed files with 138 additions and 19 deletions
@@ -0,0 +1,93 @@
+import { expect, test } from "@playwright/test";
+
+import { mockCoreApis } from "../../fixtures/api-mocks";
+import { paidImageMessageId } from "../../fixtures/test-data";
+
+test.beforeEach(async ({ baseURL, context, page }) => {
+  await context.clearCookies();
+
+  const client = await context.newCDPSession(page);
+  const origins = new Set([
+    new URL(baseURL ?? "http://127.0.0.1:3000").origin,
+    "http://127.0.0.1:3000",
+    "http://localhost:3000",
+  ]);
+  for (const origin of origins) {
+    await client
+      .send("Storage.clearDataForOrigin", {
+        origin,
+        storageTypes: "all",
+      })
+      .catch(() => {});
+  }
+
+  await mockCoreApis(page, {
+    paidImageInsufficientCreditsFlow: true,
+  });
+});
+
+test("user sees insufficient credits when unlocking a paid image from fullscreen and can navigate to subscription", async ({
+  page,
+}) => {
+  await signInWithEmailAndOpenChat(page);
+
+  const paidImageButton = page.getByRole("button", {
+    name: "Open image in fullscreen",
+  });
+  await expect(paidImageButton).toBeVisible({ timeout: 10_000 });
+
+  await paidImageButton.click();
+  await expect(page).toHaveURL(new RegExp(`/chat/image/${paidImageMessageId}$`));
+
+  const lockedImageDialog = page.getByRole("dialog", {
+    name: "Locked fullscreen image",
+  });
+  await expect(lockedImageDialog).toBeVisible();
+
+  const unlockRequestPromise = page.waitForRequest(
+    "**/api/chat/unlock-private",
+  );
+  await lockedImageDialog
+    .getByRole("button", { name: "Unlock high-definition large image" })
+    .click();
+
+  const unlockRequest = await unlockRequestPromise;
+  expect(unlockRequest.method()).toBe("POST");
+  expect(unlockRequest.postDataJSON()).toMatchObject({
+    messageId: paidImageMessageId,
+  });
+
+  const insufficientCreditsDialog = page.getByRole("dialog", {
+    name: "Not enough credits",
+  });
+  await expect(insufficientCreditsDialog).toBeVisible();
+  await expect(insufficientCreditsDialog.getByText("Balance")).toBeVisible();
+  await expect(insufficientCreditsDialog.getByText("Required")).toBeVisible();
+  await expect(insufficientCreditsDialog.getByText("Still needed")).toBeVisible();
+
+  await insufficientCreditsDialog
+    .getByRole("button", { name: "Top up now" })
+    .click();
+
+  await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
+});
+
+async function signInWithEmailAndOpenChat(
+  page: import("@playwright/test").Page,
+) {
+  await page.goto("/auth");
+
+  await page.getByRole("button", { name: /Other Sign In Options/i }).click();
+  await expect(
+    page.getByRole("dialog", { name: /Other sign-in options/i }),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "Email Sign In" }).click();
+  await expect(page.getByPlaceholder("Email")).toHaveValue(
+    "chanwillian0@gmail.com",
+  );
+  await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
+
+  await page.getByRole("button", { name: "Login" }).click();
+  await expect(page).toHaveURL(/\/chat$/);
+}