[Issue #2537] Create e2e tests for subscribe page

frontend/next.config.js

@@ -101,6 +101,9 @@ const nextConfig = {
       "types",
     ],
   },
+  experimental: {
+    testProxy: true,
+  },
 };
 
 module.exports = withNextIntl(nextConfig);

frontend/src/constants/environments.ts

@@ -31,7 +31,7 @@ export const environment: { [key: string]: string } = {
     ENVIRONMENT === "prod" ? "https://grants.gov" : "https://test.grants.gov",
   NEXT_PUBLIC_BASE_PATH: NEXT_PUBLIC_BASE_PATH ?? "",
   USE_SEARCH_MOCK_DATA: USE_SEARCH_MOCK_DATA || "",
-  SENDY_API_URL: SENDY_API_URL || "",
+  SENDY_API_URL: SENDY_API_URL || "http://localhost:3000",
   SENDY_API_KEY: SENDY_API_KEY || "",
   SENDY_LIST_ID: SENDY_LIST_ID || "",
   API_URL: API_URL || "",

frontend/tests/e2e/subscribe.spec.ts

@@ -0,0 +1,69 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+
+import {
+  expect,
+  NextFixture,
+  test,
+} from "next/experimental/testmode/playwright";
+
+function mockAPIEndpoints(next: NextFixture, responseText = "1") {
+  next.onFetch((request: Request) => {
+    if (request.url.endsWith("/subscribe") && request.method === "POST") {
+      return new Response(responseText, {
+        status: 200,
+        headers: {
+          "Content-Type": "text/plain",
+        },
+      });
+    }
+
+    return "abort";
+  });
+}
+test.beforeEach(async ({ page }) => {
+  await page.goto("/subscribe");
+});
+
+test.afterEach(async ({ context }) => {
+  await context.close();
+});
+
+test("has title", async ({ page }) => {
+  await expect(page).toHaveTitle(/Subscribe | Simpler.Grants.gov/);
+});
+
+test("client side errors", async ({ page }) => {
+  await page.getByRole("button", { name: /subscribe/i }).click();
+
+  // Verify client-side errors for required fields
+  await expect(page.getByTestId("errorMessage")).toHaveCount(2);
+  await expect(page.getByText("Please enter a name.")).toBeVisible();
+  await expect(page.getByText("Please enter an email address.")).toBeVisible();
+});
+
+test("successful signup", async ({ next, page }) => {
+  mockAPIEndpoints(next);
+
+  await page.getByLabel("First Name (required)").fill("Apple");
+  await page.getByLabel("Email (required)").fill("name@example.com");
+
+  await page.getByRole("button", { name: /subscribe/i }).click();
+
+  await expect(
+    page.getByRole("heading", { name: /you['’]re subscribed/i }),
+  ).toBeVisible();
+});
+
+test("error during signup", async ({ next, page }) => {
+  mockAPIEndpoints(next, "Error with subscribing");
+
+  await page.getByLabel("First Name (required)").fill("Apple");
+  await page.getByLabel("Email (required)").fill("name@example.com");
+
+  await page.getByRole("button", { name: /subscribe/i }).click();
+
+  await expect(page.getByTestId("errorMessage")).toHaveCount(1);
+  await expect(
+    page.getByText(/an error occurred when trying to save your subscription./i),
+  ).toBeVisible();
+});