test: Check the recurring event tab and your funtionalities (teste2e-recurring) (#12331)

Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com>
Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/playwright/booking/recurringBooking.e2e.ts

@@ -0,0 +1,28 @@
+/* eslint-disable playwright/no-conditional-in-test */
+import { loginUser } from "../fixtures/regularBookings";
+import { test } from "../lib/fixtures";
+
+test.describe.configure({ mode: "serial" });
+
+test.describe("Booking with recurring checked", () => {
+  test.beforeEach(async ({ page, users, bookingPage }) => {
+    await loginUser(users);
+    await page.goto("/event-types");
+    await bookingPage.goToEventType("30 min");
+    await bookingPage.goToTab("recurring");
+  });
+
+  test("Updates event type with recurring events", async ({ page, bookingPage }) => {
+    await bookingPage.updateRecurringTab("2", "3");
+    await bookingPage.updateEventType();
+    await page.getByRole("link", { name: "Event Types" }).click();
+    await bookingPage.assertRepeatEventType();
+  });
+
+  test("Updates and shows recurring schedule correctly in booking page", async ({ bookingPage }) => {
+    await bookingPage.updateRecurringTab("2", "3");
+    await bookingPage.updateEventType();
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.fillRecurringFieldAndConfirm(eventTypePage);
+  });
+});

apps/web/playwright/fixtures/regularBookings.ts

@@ -2,6 +2,7 @@ import { expect, type Page } from "@playwright/test";
 
 import dayjs from "@calcom/dayjs";
 
+import { localize } from "../lib/testUtils";
 import type { createUsersFixture } from "./users";
 
 const reschedulePlaceholderText = "Let others know why you need to reschedule";
@@ -220,6 +221,23 @@ export function createBookingPageFixture(page: Page) {
       }
       await page.getByTestId("field-add-save").click();
     },
+    updateRecurringTab: async (repeatWeek: string, maxEvents: string) => {
+      const repeatText = (await localize("en"))("repeats_every");
+      const maximumOf = (await localize("en"))("for_a_maximum_of");
+      await page.getByTestId("recurring-event-check").click();
+      await page
+        .getByTestId("recurring-event-collapsible")
+        .locator("div")
+        .filter({ hasText: repeatText })
+        .getByRole("spinbutton")
+        .fill(repeatWeek);
+      await page
+        .getByTestId("recurring-event-collapsible")
+        .locator("div")
+        .filter({ hasText: maximumOf })
+        .getByRole("spinbutton")
+        .fill(maxEvents);
+    },
     updateEventType: async () => {
       await page.getByTestId("update-eventtype").click();
     },
@@ -246,6 +264,14 @@ export function createBookingPageFixture(page: Page) {
       await page.getByTestId("confirm-reschedule-button").click();
     },
 
+    fillRecurringFieldAndConfirm: async (eventTypePage: Page) => {
+      await eventTypePage.getByTestId("occurrence-input").click();
+      await eventTypePage.getByTestId("occurrence-input").fill("2");
+      await goToNextMonthIfNoAvailabilities(eventTypePage);
+      await eventTypePage.getByTestId("time").first().click();
+      await expect(eventTypePage.getByTestId("recurring-dates")).toBeVisible();
+    },
+
     cancelBookingWithReason: async (page: Page) => {
       await page.getByTestId("cancel").click();
       await page.getByTestId("cancel_reason").fill("Test cancel");
@@ -279,6 +305,10 @@ export function createBookingPageFixture(page: Page) {
       await expect(page.getByText(scheduleSuccessfullyText)).toBeVisible();
     },
 
+    assertRepeatEventType: async () => {
+      await expect(page.getByTestId("repeat-eventtype")).toBeVisible();
+    },
+
     cancelBooking: async (eventTypePage: Page) => {
       await eventTypePage.getByTestId("cancel").click();
       await eventTypePage.getByTestId("cancel_reason").fill("Test cancel");

packages/features/bookings/components/event-meta/Occurences.tsx

@@ -47,7 +47,7 @@ export const EventOccurences = ({ event }: { event: PublicEvent }) => {
       i18n.language
     );
     return (
-      <>
+      <div data-testid="recurring-dates">
         {recurringStrings.slice(0, 5).map((timeFormatted, key) => (
           <p key={key}>{timeFormatted}</p>
         ))}
@@ -59,7 +59,7 @@ export const EventOccurences = ({ event }: { event: PublicEvent }) => {
             <p className=" text-sm">+ {t("plus_more", { count: recurringStrings.length - 5 })}</p>
           </Tooltip>
         )}
-      </>
+      </div>
     );
   }
 
@@ -73,6 +73,7 @@ export const EventOccurences = ({ event }: { event: PublicEvent }) => {
         min="1"
         max={event.recurringEvent.count}
         defaultValue={occurenceCount || event.recurringEvent.count}
+        data-testid="occurrence-input"
         onChange={(event) => {
           const pattern = /^(?=.*[0-9])\S+$/;
           const inputValue = parseInt(event.target.value);

packages/features/eventtypes/components/EventTypeDescription.tsx

@@ -86,7 +86,7 @@ export const EventTypeDescription = ({
             </Badge>
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="hidden xl:block">
+            <li className="hidden xl:block" data-testid="repeat-eventtype">
               <Badge variant="gray" startIcon={RefreshCw}>
                 {t("repeats_up_to", {
                   count: recurringEvent.count,