From d9adb6c1fcbcfcd920faee5fd9d6f7dd614b04aa Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Tue, 26 Aug 2025 13:05:45 +0530
Subject: [PATCH] feat: atoms e2e tests  (#23273)

* e2e tests for availability settings atom

* init tests for booking page

* add data test id for event type card

* update tests for booking page

* add data test ids for playwright tests

* update test coverage for booking page
---
 .../examples/base/src/pages/[bookingUid].tsx  |  7 ++-
 .../examples/base/src/pages/booking.tsx       |  1 +
 .../availability-settings-atom.e2e.ts         | 60 +++++++++++++++++++
 .../base/tests/booker-atom/booker-atom.e2e.ts | 43 +++++++++++++
 4 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 packages/platform/examples/base/tests/availability-settings-atom/availability-settings-atom.e2e.ts
 create mode 100644 packages/platform/examples/base/tests/booker-atom/booker-atom.e2e.ts

diff --git a/packages/platform/examples/base/src/pages/[bookingUid].tsx b/packages/platform/examples/base/src/pages/[bookingUid].tsx
index 8b2573acc2..d4b5502eb9 100644
--- a/packages/platform/examples/base/src/pages/[bookingUid].tsx
+++ b/packages/platform/examples/base/src/pages/[bookingUid].tsx
@@ -35,6 +35,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
         {isLoading && <p>Loading...</p>}
         {!isLoading && booking && (
           <div
+            data-testid="booking-success-page"
             key={booking.id}
             className="my-10 w-[440px] overflow-hidden rounded-md border-[0.7px] border-black px-10 py-5">
             {booking.status === "accepted" ? (
@@ -43,7 +44,9 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                   name="circle-check-big"
                   className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500"
                 />
-                <h1 className="text-xl font-bold">This meeting is scheduled</h1>
+                <h1 className="text-xl font-bold" data-testid="booking-success-message">
+                  This meeting is scheduled
+                </h1>
                 <p>We sent an email with a calendar invitation with the details to everyone.</p>
               </div>
             ) : (
@@ -134,7 +137,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               <>
                 <hr className="mx-3" />
                 <div className="mx-2 my-3 text-center">
-                  <p>
+                  <p data-testid="booking-redirect-or-cancel-links">
                     Need to make a change?{" "}
                     <button
                       className="underline"
diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx
index b9aa87f1bc..14ac3fec91 100644
--- a/packages/platform/examples/base/src/pages/booking.tsx
+++ b/packages/platform/examples/base/src/pages/booking.tsx
@@ -42,6 +42,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
 
                 return (
                   <div
+                    data-testid="event-type-card"
                     onClick={() => {
                       setEventTypeSlug(event.slug);
                       setEventTypeDuration(event.lengthInMinutes);
diff --git a/packages/platform/examples/base/tests/availability-settings-atom/availability-settings-atom.e2e.ts b/packages/platform/examples/base/tests/availability-settings-atom/availability-settings-atom.e2e.ts
new file mode 100644
index 0000000000..70bc6fda8e
--- /dev/null
+++ b/packages/platform/examples/base/tests/availability-settings-atom/availability-settings-atom.e2e.ts
@@ -0,0 +1,60 @@
+import { test, expect } from "@playwright/test";
+import type { Page } from "@playwright/test";
+
+async function selectOption(page: Page, optionNumber: number) {
+  for (let i = 0; i < optionNumber; i++) {
+    await page.keyboard.press("ArrowDown");
+  }
+  await page.keyboard.press("Enter");
+}
+
+test("availability page loads with all components", async ({ page }) => {
+  await page.goto("/availability");
+
+  await expect(page).toHaveURL("/availability");
+
+  await expect(page.locator('h1:has-text("Availability Settings")')).toBeVisible();
+
+  await expect(page.locator('button:has-text("Validate Form")')).toBeVisible();
+
+  await expect(page.locator('button:has-text("Submit Form")')).toBeVisible();
+
+  await expect(page.locator('[data-testid="Monday"]')).toBeVisible();
+  await expect(page.locator('[data-testid="Tuesday"]')).toBeVisible();
+  await expect(page.locator('[data-testid="Wednesday"]')).toBeVisible();
+  await expect(page.locator('[data-testid="Thursday"]')).toBeVisible();
+  await expect(page.locator('[data-testid="Friday"]')).toBeVisible();
+  await expect(page.locator('[data-testid="Saturday"]')).toBeVisible();
+  await expect(page.locator('[data-testid="Sunday"]')).toBeVisible();
+
+  await page.locator('[data-testid="Sunday-switch"]').click();
+  await page.locator('[data-testid="Monday-switch"]').click();
+  await page.locator('[data-testid="Thursday-switch"]').click();
+
+  await page.locator('[data-testid="Wednesday"] [data-testid="select-control"] div').first().click();
+
+  await selectOption(page, 5);
+
+  await page.locator('[data-testid="Wednesday"] [data-testid="select-control"] div').last().click();
+  await selectOption(page, 7);
+
+  await page.locator('[data-testid="Friday"] [data-testid="select-control"] div').first().click();
+  await selectOption(page, 3);
+
+  await page.locator('[data-testid="Friday"] [data-testid="select-control"] div').last().click();
+  await selectOption(page, 10);
+
+  await page.locator('[data-testid="Friday"] [data-testid="add-time-availability"]').click();
+
+  await page.locator('[data-testid="timezone-select"] div').first().click();
+
+  await selectOption(page, 10);
+
+  await page.locator('[data-testid="add-override"]').click();
+  await page.locator('[data-testid="day"]:not([data-disabled="true"])').first().click();
+  await page.locator('[data-testid="add-override-submit-btn"]').click();
+
+  await page.locator('[data-testid="dialog-rejection"]').click();
+
+  await page.locator('button[form="availability-form"]').click();
+});
diff --git a/packages/platform/examples/base/tests/booker-atom/booker-atom.e2e.ts b/packages/platform/examples/base/tests/booker-atom/booker-atom.e2e.ts
new file mode 100644
index 0000000000..4a342f4b10
--- /dev/null
+++ b/packages/platform/examples/base/tests/booker-atom/booker-atom.e2e.ts
@@ -0,0 +1,43 @@
+import { test, expect } from "@playwright/test";
+import type { Page } from "@playwright/test";
+
+async function selectOption(page: Page, optionNumber: number) {
+  for (let i = 0; i < optionNumber; i++) {
+    await page.keyboard.press("ArrowDown");
+  }
+  await page.keyboard.press("Enter");
+}
+
+test("tweak availability  using AvailabilitySettings Atom", async ({ page }) => {
+  await page.goto("/booking");
+
+  await expect(page).toHaveURL("/booking");
+
+  await expect(page.locator("body")).toBeVisible();
+
+  await expect(page.locator('[data-testid="event-type-card"]').first()).toBeVisible();
+  await page.locator('[data-testid="event-type-card"]').first().click();
+
+  await expect(page.locator('[data-testid="booker-container"]')).toBeVisible();
+
+  await page.locator('[data-testid="day"]:not([data-disabled="true"])').first().click();
+  await page.locator('[data-testid="time"]:not([data-disabled="true"])').first().click();
+  await page.locator('[data-testid="back"]').first().click();
+
+  await page.locator('[data-testid="event-meta-current-timezone"]').first().click();
+  await selectOption(page, 7);
+
+  await page.locator('[data-testid="day"]:not([data-disabled="true"])').first().click();
+  await page.locator('[data-testid="time"]:not([data-disabled="true"])').first().click();
+  await page.locator('[data-testid="add-guests"]').click();
+  await expect(page.locator('[data-testid="input-field"]')).toBeVisible();
+  await page.locator('[data-testid="input-field"]').fill("free@example.com");
+  await page.locator('[data-testid="confirm-book-button"]').click();
+
+  await expect(page.locator('[data-testid="booking-success-page"]')).toBeVisible();
+  await expect(page.locator('[data-testid="booking-success-message"]')).toBeVisible();
+  await expect(page.locator('[data-testid="booking-success-message"]')).toContainText(
+    "This meeting is scheduled"
+  );
+  await expect(page.locator('[data-testid="booking-redirect-or-cancel-links"]')).toBeVisible();
+});