[Issue #2537] Create e2e tests for subscribe page (#3787)

## Summary
Fixes #2537

### Time to review: 15 mins

## Changes proposed
Creates the E2E tests for the /subscribe page.

.github/workflows/ci-frontend-e2e.yml

@@ -59,6 +59,8 @@ jobs:
         run: |
           sed -En '/API_JWT_PUBLIC_KEY/,/-----END PUBLIC KEY-----/p' ../api/override.env >> .env.local
           cat .env.development >> .env.local
+          # Use the localhost url for tests
+          sed -i 's|^SENDY_API_URL=.*|SENDY_API_URL=http://localhost:3000|' .env.local 
           npm run build -- --no-lint
 
       - name: Run e2e tests (Shard ${{ matrix.shard }}/${{ matrix.total_shards }})

frontend/next.config.js

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

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("[email protected]");
+
+  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("[email protected]");
+
+  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();
+});