test: more Embed Page Params filtering tests (#16937)

* Add rescheduleUid as config param scenario

* Restructure test buttons

* Use correct namespace as per rename

packages/embeds/embed-core/index.html

@@ -4,6 +4,13 @@
     <!-- <link rel="prerender" href="http://localhost:3000/free"> -->
     <!-- <script src="./src/embed.ts" type="module"></script> -->
     <script>
+      let popupRescheduleUid = null;
+      let calLink = null;
+      (function defineVariables() {
+        const searchParams = new URL(document.URL).searchParams;
+        popupRescheduleUid = searchParams.get("popupRescheduleUid") || "qm3kwt3aTnVD7vmP9tiT2f";
+        calLink = searchParams.get("calLink");
+      })()
       function generateRandomHexColor() {
         // Generate a random integer between 0 and 16777215 (FFFFFF in hex)
         const randomInt = Math.floor(Math.random() * 16777216);
@@ -17,7 +24,7 @@
       if (!location.search.includes("nonResponsive")) {
         document.write('<meta name="viewport" content="width=device-width"/>');
       }
-      (() => {
+      (function scrollToIframeInPlayground() {
         const url = new URL(document.URL);
         // Only run the example specified by only=, avoids distraction and faster to test.
         const only = (window.only = url.searchParams.get("only") || '');
@@ -25,7 +32,7 @@
         if (elementIdentifier) {
           location.hash = "#cal-booking-place-" + elementIdentifier + "-iframe";
         }
-      })();
+      })(); 
       
       function addInlineEmbedInNewNamespaceWithoutReload(selector) {
         Cal("init", "withoutReloadNamespace", {
@@ -209,7 +216,7 @@
     <span style="display: block"><a href="?nonResponsive">Non responsive version of this page here</a></span>
     <span style="display: block">
       <a href="?name=john&email=email&guests=abc&guests=def&notes=NOTES&location=%7B%22optionValue%22%3A%22%2B919999999999%22%2C%22value%22%3A%22phone%22%7D&only=ns%3ApageParamsForwarding">
-        Page Params Forwarding
+        Page Params Forwarding(Prefills various fields by auto-forwarding query params)
       </a>
     </span>
     <span style="display: block"
@@ -218,8 +225,8 @@
     <span style="display: block"
     ><a href="?only=preload-test">Go to Preload test page only</a><small></small
   ></span>
-    <button onclick="document.documentElement.style.colorScheme='dark'">Toggle Dark Scheme</button>
-    <button onclick="document.documentElement.style.colorScheme='light'">Toggle Light Scheme</button>
+    <button onclick="document.documentElement.style.colorScheme='dark'">Toggle Dark Scheme(For Embedding Page)</button>
+    <button onclick="document.documentElement.style.colorScheme='light'">Toggle Light Scheme(For Embedding Page)</button>
     <div>
       <script>
         if (only === "all" || only === "prerender-test") {
@@ -247,7 +254,7 @@
     <div>
       <a href="?only=ns:floatingButton">Floating Popup</a>
 
-      <h2>Popup Examples</h2>
+      <h2>Popup Examples - Theme Tests</h2>
       <button data-cal-namespace="e2ePopupLightTheme" data-cal-link="free" data-cal-config='{"theme":"light", "flag.coep": "true"}'>Book an event with Free[Light Theme]</button>
       <button data-cal-namespace="popupAutoTheme" data-cal-link="free" data-cal-config='{"flag.coep": "true"}'>
         Book with Free User[Auto Theme]
@@ -270,19 +277,31 @@
       <button data-cal-namespace="popupTeamLinksList" data-cal-link="team/seeded-team/" data-cal-config='{"flag.coep": "true"}'>
         See Team Links [Auto Theme]
       </button>
-      <script>
-        let popupRescheduleId =
-          new URL(document.URL).searchParams.get("popupRescheduleId") || "qm3kwt3aTnVD7vmP9tiT2f";
-        document.write(
-          `<button data-cal-namespace="popupReschedule" data-cal-config='{"flag.coep":"true"}' data-cal-link="reschedule/${popupRescheduleId}">Reschedule Event[Auto Theme]</button>`
-        );
-      </script>
       <button data-cal-namespace="popupPaidEvent" data-cal-link="pro/paid" data-cal-config='{"flag.coep": "true"}'>
         Book Paid Event [Auto Theme]
       </button>
+      <h2>Popup Examples - Reschedule Tests</h2>
+      <script>
+        document.write(
+          `<button data-cal-namespace="popupRescheduleWithReschedulePath" data-cal-config='{"flag.coep":"true"}' data-cal-link="reschedule/${popupRescheduleUid}">Reschedule Event(with /reschedule) - Needs popupRescheduleUid param</button>`
+        );
+      </script>
+      <script>
+        document.write(
+    `<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 - 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]
       </button>
+      <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"week_view", "flag.coep": "true"}' data-cal-link="pro/paid">
+        Book Paid Event - weekly view
+      </button>
+      <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"column_view", "flag.coep": "true"}' data-cal-link="pro/paid">
+        Book Paid Event - column view
+      </button>
+      <h2>Popup Examples - Routing Form Tests</h2>
       <button data-cal-namespace="routingFormAuto" data-cal-link="forms/948ae412-d995-4865-875a-48302588de03" data-cal-config='{"flag.coep": "true"}'>
         Book through Routing Form [Auto Theme] - Test for 'routed' event
       </button>
@@ -292,13 +311,8 @@
         data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">
         Book through Routing Form [Dark Theme]
       </button>
-      <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"week_view", "flag.coep": "true"}' data-cal-link="pro/paid">
-        Book Paid Event - weekly view
-      </button>
-      <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"column_view", "flag.coep": "true"}' data-cal-link="pro/paid">
-        Book Paid Event - column view
-      </button>
 
+      <h2>Popup Examples - Child Element Target Tests</h2>
       <a style="display: block;" data-cal-namespace="childElementTarget" href="javascript:void(0)" data-cal-link="free/30min" data-cal-config='{"flag.coep": "true"}'>
         I am Anchor
         <b>[I am Bold inside anchor]</b>

packages/embeds/embed-core/playground.ts

@@ -364,7 +364,12 @@ Cal.ns.popupHideEventTypeDetails("ui", {
   hideEventTypeDetails: true,
 });
 
-Cal("init", "popupReschedule", {
+Cal("init", "popupRescheduleWithReschedulePath", {
+  debug: true,
+  origin: origin,
+});
+
+Cal("init", "popupRescheduleWithRescheduleUidParam", {
   debug: true,
   origin: origin,
 });

packages/embeds/embed-core/playwright/tests/action-based.e2e.ts

@@ -90,10 +90,10 @@ test.describe("Popup Tests", () => {
     });
 
     await test.step("Reschedule the booking", async () => {
-      await addEmbedListeners("popupReschedule");
-      await page.goto(`/?popupRescheduleId=${booking.uid}`);
-      await page.click('[data-cal-namespace="popupReschedule"]');
-      const calNamespace = "popupReschedule";
+      const calNamespace = "popupRescheduleWithReschedulePath";
+      await addEmbedListeners(calNamespace);
+      await page.goto(`/?popupRescheduleUid=${booking.uid}`);
+      await page.click(`[data-cal-namespace="${calNamespace}"]`);
       const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: booking.eventSlug });
       if (!embedIframe) {
         throw new Error("Embed iframe not found");

packages/embeds/embed-core/src/embed.test.ts

@@ -83,8 +83,8 @@ describe("Cal", () => {
         expect(paramValues).toEqual(["value3"]);
       });
 
-      it("should exclude reserved params from page URL(as these could be unintentional to pass these query params to embed, so better to exclude them and avoid crashing the booking page)", () => {
-        mockSearchParams("?date=2023-05-01&duration=30");
+      it("should exclude reserved params from the page URL(as these could be unintentional to pass these query params to embed, so better to exclude them and avoid crashing the booking page)", () => {
+        mockSearchParams("?date=2023-05-01&duration=30&hello=world");
 
         const iframe = cal.createIframe({
           calLink: "john-doe/meeting",
@@ -96,6 +96,7 @@ describe("Cal", () => {
 
         expect(iframe.src).not.toContain("date=");
         expect(iframe.src).not.toContain("duration=");
+        expect(iframe.src).toContain("hello=");
         expect(iframe.src).toContain("email=test%40example.com");
       });
 
@@ -115,6 +116,17 @@ describe("Cal", () => {
         expect(iframe.src).toContain("email=test%40example.com");
       });
 
+      it("should allow configuring reserved params through direct URL params to embed calLink(as it is explicitly passed by user)", () => {
+        const iframe = cal.createIframe({
+          calLink: "john-doe/meeting?date=2023-05-01&duration=30&email=test@example.com",
+          calOrigin: null,
+        });
+
+        expect(iframe.src).toContain("date=2023-05-01");
+        expect(iframe.src).toContain("duration=30");
+        expect(iframe.src).toContain("email=test%40example.com");
+      });
+      
       it("should respect forwardQueryParams setting to disable sending page query params but still send the ones in the config", () => {
         mockSearchParams("?param1=value");