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

@@ -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]

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,

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;
+}

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 },