fix: Add e2e test for routing forms webhook subscription (#9401)

* add e2e test for routing forms webhook subscription

* remove debugging checks

* fixed missing method for e2e

* remove forced timeout for e2e test

* fix e2e webhook test

* use routing forms page for install

---------

Co-authored-by: TachyonicBytes <support@tachyonicbytes.com>

apps/web/playwright/lib/testUtils.ts

@@ -170,3 +170,30 @@ export const createNewSeatedEventType = async (page: Page, args: { eventTitle: s
   await page.locator('[data-testid="offer-seats-toggle"]').click();
   await page.locator('[data-testid="update-eventtype"]').click();
 };
+
+export async function gotoRoutingLink({
+  page,
+  formId,
+  queryString = "",
+}: {
+  page: Page;
+  formId?: string;
+  queryString?: string;
+}) {
+  let previewLink = null;
+  if (!formId) {
+    // Instead of clicking on the preview link, we are going to the preview link directly because the earlier opens a new tab which is a bit difficult to manage with Playwright
+    const href = await page.locator('[data-testid="form-action-preview"]').getAttribute("href");
+    if (!href) {
+      throw new Error("Preview link not found");
+    }
+    previewLink = href;
+  } else {
+    previewLink = `/forms/${formId}`;
+  }
+
+  await page.goto(`${previewLink}${queryString ? `?${queryString}` : ""}`);
+
+  // HACK: There seems to be some issue with the inputs to the form getting reset if we don't wait.
+  await new Promise((resolve) => setTimeout(resolve, 500));
+}

apps/web/playwright/webhook.e2e.ts

@@ -6,6 +6,7 @@ import {
   createHttpServer,
   selectFirstAvailableTimeSlotNextMonth,
   waitFor,
+  gotoRoutingLink,
 } from "./lib/testUtils";
 
 test.afterEach(({ users }) => users.deleteAll());
@@ -387,3 +388,60 @@ test.describe("BOOKING_REQUESTED", async () => {
     webhookReceiver.close();
   });
 });
+
+test.describe("FORM_SUBMITTED", async () => {
+  test("can submit a form and get a submission event", async ({ page, users }) => {
+    const webhookReceiver = createHttpServer();
+    const user = await users.create();
+
+    await user.apiLogin();
+
+    await page.goto("/settings/teams/new");
+    await page.waitForLoadState("networkidle");
+    const teamName = `${user.username}'s Team`;
+    // Create a new team
+    await page.locator('input[name="name"]').fill(teamName);
+    await page.locator('input[name="slug"]').fill(teamName);
+    await page.locator('button[type="submit"]').click();
+
+    await page.locator("text=Publish team").click();
+    await page.waitForURL(/\/settings\/teams\/(\d+)\/profile$/i);
+
+    await page.waitForLoadState("networkidle");
+
+    // Install Routing Forms App
+    await page.goto(`/apps/routing-forms`);
+    // eslint-disable-next-line playwright/no-conditional-in-test
+
+    await page.click('[data-testid="install-app-button"]');
+
+    await page.waitForLoadState("networkidle");
+    await page.goto(`/settings/developer/webhooks/new`);
+
+    // Add webhook
+    await page.fill('[name="subscriberUrl"]', webhookReceiver.url);
+    await page.fill('[name="secret"]', "secret");
+    await Promise.all([page.click("[type=submit]"), page.goForward()]);
+
+    // Page contains the url
+    expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
+
+    await page.waitForLoadState("networkidle");
+    await page.goto("/apps/routing-forms/forms");
+    await page.click('[data-testid="new-routing-form"]');
+    await page.fill("input[name]", "TEST FORM");
+    await page.click('[data-testid="add-form"]');
+    await page.waitForSelector('[data-testid="add-field"]');
+
+    const url = page.url();
+    const formId = new URL(url).pathname.split("/").at(-1);
+
+    await gotoRoutingLink({ page, formId: formId });
+    page.click('button[type="submit"]');
+
+    await waitFor(() => {
+      expect(webhookReceiver.requestList.length).toBe(1);
+    });
+    webhookReceiver.close();
+  });
+});

packages/app-store/routing-forms/playwright/tests/basic.e2e.ts

@@ -3,6 +3,7 @@ import { expect } from "@playwright/test";
 
 import type { Fixtures } from "@calcom/web/playwright/lib/fixtures";
 import { test } from "@calcom/web/playwright/lib/fixtures";
+import { gotoRoutingLink } from "@calcom/web/playwright/lib/testUtils";
 
 function todo(title: string) {
   // eslint-disable-next-line playwright/no-skipped-test, @typescript-eslint/no-empty-function
@@ -595,33 +596,6 @@ async function selectNewRoute(page: Page, { routeSelectNumber = 1 } = {}) {
   });
 }
 
-async function gotoRoutingLink({
-  page,
-  formId,
-  queryString = "",
-}: {
-  page: Page;
-  formId?: string;
-  queryString?: string;
-}) {
-  let previewLink = null;
-  if (!formId) {
-    // Instead of clicking on the preview link, we are going to the preview link directly because the earlier opens a new tab which is a bit difficult to manage with Playwright
-    const href = await page.locator('[data-testid="form-action-preview"]').getAttribute("href");
-    if (!href) {
-      throw new Error("Preview link not found");
-    }
-    previewLink = href;
-  } else {
-    previewLink = `/forms/${formId}`;
-  }
-
-  await page.goto(`${previewLink}${queryString ? `?${queryString}` : ""}`);
-
-  // HACK: There seems to be some issue with the inputs to the form getting reset if we don't wait.
-  await new Promise((resolve) => setTimeout(resolve, 500));
-}
-
 async function saveCurrentForm(page: Page) {
   await page.click('[data-testid="update-form"]');
   await page.waitForSelector(".data-testid-toast-success");