From eea70592268426585d6147f72c612c7e9443d579 Mon Sep 17 00:00:00 2001
From: alannnc <alannnc@gmail.com>
Date: Fri, 1 Sep 2023 16:26:45 -0700
Subject: [PATCH] Add test for different layouts (#11091)

---
 apps/web/playwright/booking-pages.e2e.ts      | 57 +++++++++++++++++++
 .../weeklyview/components/event/Empty.tsx     |  1 +
 .../form/toggleGroup/ToggleGroup.tsx          |  1 +
 3 files changed, 59 insertions(+)

diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts
index 3ca81bc2c7..9ebd29bb2d 100644
--- a/apps/web/playwright/booking-pages.e2e.ts
+++ b/apps/web/playwright/booking-pages.e2e.ts
@@ -268,3 +268,60 @@ test.describe("prefill", () => {
     });
   });
 });
+
+test.describe("Booking on different layouts", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const user = await users.create();
+    await page.goto(`/${user.username}`);
+  });
+
+  test("Book on week layout", async ({ page }) => {
+    // Click first event type
+    await page.click('[data-testid="event-type-link"]');
+
+    await page.click('[data-testid="toggle-group-item-week_view"]');
+
+    await page.click('[data-testid="incrementMonth"]');
+
+    await page.locator('[data-testid="calendar-empty-cell"]').nth(0).click();
+
+    // Fill what is this meeting about? name email and notes
+    await page.locator('[name="name"]').fill("Test name");
+    await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`);
+    await page.locator('[name="notes"]').fill("Test notes");
+
+    await page.click('[data-testid="confirm-book-button"]');
+
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+
+    // expect page to be booking page
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+
+  test("Book on column layout", async ({ page }) => {
+    // Click first event type
+    await page.click('[data-testid="event-type-link"]');
+
+    await page.click('[data-testid="toggle-group-item-column_view"]');
+
+    await page.click('[data-testid="incrementMonth"]');
+
+    await page.locator('[data-testid="time"]').nth(0).click();
+
+    // Fill what is this meeting about? name email and notes
+    await page.locator('[name="name"]').fill("Test name");
+    await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`);
+    await page.locator('[name="notes"]').fill("Test notes");
+
+    await page.click('[data-testid="confirm-book-button"]');
+
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
+    });
+
+    // expect page to be booking page
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+  });
+});
diff --git a/packages/features/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx
index cc93b959c0..386bc7d6eb 100644
--- a/packages/features/calendars/weeklyview/components/event/Empty.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx
@@ -96,6 +96,7 @@ function Cell({ isDisabled, topOffsetMinutes, timeSlot }: CellProps) {
       )}
       data-disabled={isDisabled}
       data-slot={timeSlot.toISOString()}
+      data-testid="calendar-empty-cell"
       style={{
         height: `calc(${hoverEventDuration}*var(--one-minute-height))`,
         overflow: "visible",
diff --git a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
index 5df1d7e616..1247830d40 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -49,6 +49,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
             <RadixToggleGroup.Item
               disabled={option.disabled}
               value={option.value}
+              data-testid={`toggle-group-item-${option.value}`}
               className={classNames(
                 "aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition-colors",
                 option.disabled