test: Add Embed close modal test (#10323)

* Add close modal test

* Update packages/embeds/embed-core/playwright/lib/testUtils.ts

packages/embeds/embed-core/playwright/lib/testUtils.ts

@@ -138,12 +138,6 @@ export async function bookFirstEvent(username: string, frame: Frame, page: Page)
   await expect(frame.locator("[data-testid=success-page]")).toBeVisible();
   // expect(await page.screenshot()).toMatchSnapshot("success-page.png");
 
-  //NOTE: frame.click('body') won't work here. Because the way it works, it clicks on the center of the body tag which is an element inside the popup view and that won't close the popup
-  await frame.evaluate(() => {
-    // Closes popup - if it is a popup. If not a popup, it will just do nothing
-    document.body.click();
-  });
-
   return booking;
 }
 

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

@@ -78,6 +78,7 @@ test.describe("Popup Tests", () => {
     const booking = await getBooking(bookingId);
 
     expect(booking.attendees.length).toBe(1);
+
     await deleteAllBookingsByEmail("embed-user@example.com");
   });
 
@@ -164,8 +165,12 @@ test.describe("Popup Tests", () => {
         await expect(html).toHaveAttribute("class", "light");
         const { uid: bookingId } = await bookFirstEvent("pro", embedIframe, page);
         const booking = await getBooking(bookingId);
-
         expect(booking.attendees.length).toBe(3);
+        await test.step("Close the modal", async () => {
+          await page.locator("cal-modal-box .close").click();
+          await expect(page.locator("cal-modal-box")).toBeHidden();
+          await expect(page.locator("cal-modal-box iframe")).toBeHidden();
+        });
       });
 
       test("should open embed iframe according to system theme when configured with 'auto' theme using Embed API", async ({