From 52ecea964d73a8bb301f6736a7bd26199e59a0f2 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Tue, 14 Oct 2025 00:03:30 +0530
Subject: [PATCH] fix: add tests for embed (#23561)

* fix: add tests for embed

* update

* fix test

* fix: use immediate interpolation for cancel button link

- Change from delayed evaluation (${...}) to immediate interpolation (${...})
- Remove unnecessary fallback value and complex expression
- Remove frame.goto() from cancelBookingThroughEmbed as iframe already at cancel page
- Remove unused page parameter from selectFirstAvailableTimeSlotNextMonth
- This aligns with working pattern from line 294 and avoids parser issues with complex expressions + query params

Co-Authored-By: anik@cal.com <adhabal2002@gmail.com>

* chore: fix formatting in testUtils

Co-Authored-By: anik@cal.com <adhabal2002@gmail.com>

* fix: read popupCancelUid from URL parameter instead of copying rescheduleUid

The cancel button was using the wrong booking UID because it was copying from
popupRescheduleUid instead of reading from the URL parameter. This caused the
embed iframe to never appear when clicking the cancel button, resulting in test
timeouts.

The test navigates to /?popupCancelUid=<booking_uid> which should be read by
the JavaScript, just like popupRescheduleUid is read from its URL parameter.

Co-Authored-By: anik@cal.com <adhabal2002@gmail.com>

* fix

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 packages/embeds/embed-core/index.html         |  8 +++++
 .../embed-core/playground/lib/playground.ts   |  5 ++++
 .../embed-core/playwright/lib/testUtils.ts    | 16 ++++++++++
 .../playwright/tests/action-based.e2e.ts      | 29 +++++++++++++++++++
 4 files changed, 58 insertions(+)

diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index 2b64e305a5..d59bdad44d 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -11,11 +11,13 @@
      <script type="text/javascript" src="./playground/lib/playground-init.ts"></script>
     <script>
       let popupRescheduleUid = null;
+      let popupCancelUid = null;
       let calLink = null;
       const initialNamespace = (url.searchParams.get("only") || "").split("ns:")[1] || "";
       (function defineVariables() {
         const searchParams = new URL(document.URL).searchParams;
         popupRescheduleUid = searchParams.get("popupRescheduleUid") || "qm3kwt3aTnVD7vmP9tiT2f";
+        popupCancelUid = searchParams.get("popupCancelUid") || "qm3kwt3aTnVD7vmP9tiT2f";
         calLink = searchParams.get("calLink");
       })()
       
@@ -292,6 +294,12 @@
       `<button data-cal-namespace="popupRescheduleWithRescheduleUidParam" data-cal-config='{"flag.coep":"true", "rescheduleUid": "${popupRescheduleUid}"}' data-cal-link="${calLink}">Reschedule Event(with rescheduleUid param) - Needs popupRescheduleUid and calLink param</button>`
           );
         </script>
+        <h2>Popup Examples - Cancel Tests</h2>
+        <script>
+          document.write(
+            `<button data-cal-namespace="popupCancelBooking" data-cal-config='{"flag.coep":"true"}' data-cal-link="booking/${popupCancelUid}?cancel=true">Cancel Booking - Needs popupCancelUid param</button>`
+          );
+        </script>
         <h2>Popup Examples - Different Configurations</h2>
         <button data-cal-namespace="popupHideEventTypeDetails" data-cal-link="free/30min" data-cal-config='{"flag.coep": "true"}'>
           Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
diff --git a/packages/embeds/embed-core/playground/lib/playground.ts b/packages/embeds/embed-core/playground/lib/playground.ts
index a468791aec..cc39e3178d 100644
--- a/packages/embeds/embed-core/playground/lib/playground.ts
+++ b/packages/embeds/embed-core/playground/lib/playground.ts
@@ -371,6 +371,11 @@ Cal("init", "popupRescheduleWithRescheduleUidParam", {
   origin: origin,
 });
 
+Cal("init", "popupCancelBooking", {
+  debug: true,
+  origin: origin,
+});
+
 Cal("init", "popupAutoTheme", {
   debug: true,
   origin: origin,
diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts
index 4cb75410cd..345095e745 100644
--- a/packages/embeds/embed-core/playwright/lib/testUtils.ts
+++ b/packages/embeds/embed-core/playwright/lib/testUtils.ts
@@ -232,3 +232,19 @@ export async function expectActualFormResponseConnectedToQueuedFormResponse({
   // TODO: We should be able to verify the exact response values by correlating the form field identifiers with the actual Form from DB
   expect(valuesSetInResponse.length).toBe(numberOfExpectedSetFieldValues);
 }
+
+export async function cancelBookingThroughEmbed(bookingUid: string, frame: Frame, page: Page) {
+  await frame.waitForSelector('[data-testid="cancel_reason"]');
+
+  await frame.fill('[data-testid="cancel_reason"]', "Test cancellation from embed");
+
+  const responsePromise = page.waitForResponse("**/api/cancel");
+  await frame.click('[data-testid="confirm_cancel"]');
+
+  const response = await responsePromise;
+  expect(response.status()).toBe(200);
+
+  await expect(frame.locator('[data-testid="cancelled-headline"]')).toBeVisible();
+
+  return response;
+}
diff --git a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
index 76301b2103..34e7fe4973 100644
--- a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
+++ b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
@@ -11,6 +11,7 @@ import {
   getBooking,
   deleteAllBookingsByEmail,
   rescheduleEvent,
+  cancelBookingThroughEmbed,
 } from "../lib/testUtils";
 
 // in parallel mode sometimes handleNewBooking endpoint throws "No available users found" error, this never happens in serial mode.
@@ -104,6 +105,34 @@ test.describe("Popup Tests", () => {
 
   todo("Add snapshot test for embed iframe");
 
+  test("should be able to cancel booking through embed iframe", async ({
+    page,
+    embeds: { addEmbedListeners, getActionFiredDetails },
+  }) => {
+    const booking = await test.step("Create a booking", async () => {
+      return await bookFirstFreeUserEventThroughEmbed({
+        page,
+        addEmbedListeners,
+        getActionFiredDetails,
+      });
+    });
+
+    await test.step("Cancel the booking through embed", async () => {
+      const calNamespace = "popupCancelBooking";
+      await addEmbedListeners(calNamespace);
+      await page.goto(`/?popupCancelUid=${booking.uid}`);
+      await page.click(`[data-cal-namespace="${calNamespace}"]`);
+      const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: `/booking/${booking.uid}` });
+      if (!embedIframe) {
+        throw new Error("Embed iframe not found");
+      }
+      await cancelBookingThroughEmbed(booking.uid, embedIframe, page);
+    });
+
+    const cancelledBooking = await getBooking(booking.uid);
+    expect(cancelledBooking.status).toBe("CANCELLED");
+  });
+
   test("should open Routing Forms embed on click", async ({
     page,
     embeds: { addEmbedListeners, getActionFiredDetails },