test(e2e): extract shared playwright helpers

e2e/specs/mock/chat-quantity-limit.spec.ts

@@ -1,12 +1,22 @@
 import { expect, test } from "@playwright/test";
 
 import { mockCoreApis } from "../../fixtures/api-mocks";
+import {
+  clearBrowserState,
+  completeVipPayment,
+  dismissChatInterruptions,
+  enterChatFromSplash,
+  submitEmailLogin,
+  switchToEmailSignIn,
+} from "../../fixtures/test-helpers";
 
 const mockedLimitTriggerAt = 5;
 const maxManualTestMessages = 51;
 
-test.beforeEach(async ({ context, page }) => {
-  await context.clearCookies();
+test.setTimeout(90_000);
+
+test.beforeEach(async ({ baseURL, context, page }) => {
+  await clearBrowserState(context, page, baseURL);
   await mockCoreApis(page, {
     chatLimitTriggerAt: mockedLimitTriggerAt,
   });
@@ -15,14 +25,13 @@ test.beforeEach(async ({ context, page }) => {
 test("guest hits the chat quantity limit and can continue to login and subscription", async ({
   page,
 }) => {
-  await page.goto("/splash");
-
-  await page.getByRole("button", { name: "Skip" }).click();
-  await expect(page).toHaveURL(/\/chat$/);
+  await enterChatFromSplash(page);
   await dismissChatInterruptions(page);
 
   const messageInput = page.getByRole("textbox", { name: "Message" });
-  const quantityLimitBanner = page.getByTestId("chat-quota-exhausted-banner");
+  const quantityLimitBanner = page
+    .getByRole("status")
+    .filter({ hasText: "Insufficient credits" });
   let limitTriggeredAt: number | null = null;
   let completedSendCount = 0;
 
@@ -72,51 +81,22 @@ test("guest hits the chat quantity limit and can continue to login and subscript
   await expect(quantityLimitBanner).toBeVisible();
   await expect(messageInput).toHaveCount(0);
 
-  const unlockButton = page.getByRole("button", {
-    name: "Unlock your membership to continue",
+  const topUpButton = page.getByRole("button", {
+    name: "Top up credits to continue",
   });
-  await expect(unlockButton).toBeVisible();
+  await expect(topUpButton).toBeVisible();
 
-  await unlockButton.click();
+  await topUpButton.click();
   await expect(page).toHaveURL(/\/auth\?redirect=/);
   expect(new URL(page.url()).searchParams.get("redirect")).toBe(
     "/subscription?type=vip&returnTo=chat",
   );
 
-  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 switchToEmailSignIn(page);
+  await submitEmailLogin(page);
   await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
 
-  const createOrderRequestPromise = page.waitForRequest(
-    "**/api/payment/create-order",
-  );
-  const orderStatusRequestPromise = page.waitForRequest(
-    "**/api/payment/order-status**",
-  );
-  await page.getByRole("button", { name: /Pay and Activ/i }).click();
-
-  const createOrderRequest = await createOrderRequestPromise;
-  expect(createOrderRequest.postDataJSON()).toMatchObject({
-    planId: "vip_monthly",
-    payChannel: "stripe",
-  });
-  await orderStatusRequestPromise;
-
-  const paymentSuccessDialog = page.getByRole("alertdialog", {
-    name: "Payment successful",
-  });
-  await expect(paymentSuccessDialog).toBeVisible();
-  await paymentSuccessDialog.getByRole("button", { name: "OK" }).click();
+  await completeVipPayment(page);
 
   await expect(page).toHaveURL(/\/chat$/);
   await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
@@ -132,20 +112,3 @@ async function isQuantityLimitVisible(
     return false;
   }
 }
-
-async function dismissChatInterruptions(page: import("@playwright/test").Page) {
-  const laterButton = page.getByRole("button", { name: "Later" });
-  if (await laterButton.isVisible().catch(() => false)) {
-    await laterButton.click();
-  }
-
-  const cancelButton = page.getByRole("button", { name: "Cancel" });
-  if (await cancelButton.isVisible().catch(() => false)) {
-    await cancelButton.click();
-  }
-
-  const okButton = page.getByRole("button", { name: "OK" });
-  if (await okButton.isVisible().catch(() => false)) {
-    await okButton.click();
-  }
-}