fix: update e2e tests for event types (#23322)

* add data test id for testing

* update tests for creating event type

* add test for creating team event types

* helper function for tests

* update tests

* update tests

* fixup: fix correct data test ids for tabs

packages/platform/examples/base/src/lib/generateRandomText.ts

@@ -0,0 +1,21 @@
+import { words as randomWords } from "./words";
+
+export function generateRandomText(): string {
+  const words = randomWords;
+
+  const randomLength = Math.floor(Math.random() * 20) + 5;
+  let result = "";
+
+  for (let i = 0; i < randomLength; i++) {
+    const randomWord = words[Math.floor(Math.random() * words.length)];
+    if (i === 0) {
+      result += randomWord.charAt(0).toUpperCase() + randomWord.slice(1);
+    } else {
+      result += ` ${randomWord}`;
+    }
+  }
+
+  result += ".";
+
+  return result;
+}

packages/platform/examples/base/src/lib/words.ts

@@ -0,0 +1,68 @@
+export const words = [
+  "lorem",
+  "ipsum",
+  "dolor",
+  "sit",
+  "amet",
+  "consectetur",
+  "adipiscing",
+  "elit",
+  "sed",
+  "do",
+  "eiusmod",
+  "tempor",
+  "incididunt",
+  "ut",
+  "labore",
+  "et",
+  "dolore",
+  "magna",
+  "aliqua",
+  "ut",
+  "enim",
+  "ad",
+  "minim",
+  "veniam",
+  "quis",
+  "nostrud",
+  "exercitation",
+  "ullamco",
+  "laboris",
+  "nisi",
+  "aliquip",
+  "ex",
+  "ea",
+  "commodo",
+  "consequat",
+  "duis",
+  "aute",
+  "irure",
+  "dolor",
+  "in",
+  "reprehenderit",
+  "voluptate",
+  "velit",
+  "esse",
+  "cillum",
+  "dolore",
+  "eu",
+  "fugiat",
+  "nulla",
+  "pariatur",
+  "excepteur",
+  "sint",
+  "occaecat",
+  "cupidatat",
+  "non",
+  "proident",
+  "sunt",
+  "culpa",
+  "qui",
+  "officia",
+  "deserunt",
+  "mollit",
+  "anim",
+  "id",
+  "est",
+  "laborum",
+];

packages/platform/examples/base/src/pages/event-types.tsx

@@ -33,13 +33,13 @@ export default function Bookings(props: { calUsername: string; calEmail: string
   const handleSubmit = () => {
     eventTypeRef.current?.handleFormSubmit({
       onSuccess: () => {
-        console.log('Event type updated successfully');
+        console.log("Event type updated successfully");
         // Additional success handling logic here
       },
       onError: (error) => {
-        console.error('Error updating event type:', error);
+        console.error("Error updating event type:", error);
         // Additional error handling logic here
-      }
+      },
     });
   };
   const { isLoading: isLoadingEvents, data: eventTypes, refetch } = useEventTypes(props.calUsername);
@@ -73,13 +73,14 @@ export default function Bookings(props: { calUsername: string; calEmail: string
 
                 return (
                   <div
+                    data-testid="event-type-card"
                     onClick={() => {
                       setEventTypeId(event.id);
                       setIsTeamEvent(false);
                     }}
                     className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
                     key={event.id}>
-                    <h1 className="text-lg font-semibold">{formatEventSlug}</h1>
+                    <h1 className="text-lg font-semibold">{event.title}</h1>
                     <p>{`/${event.slug}`}</p>
                     <span className="border-none bg-gray-800 px-2 text-white">{event?.lengthInMinutes}</span>
                   </div>
@@ -101,13 +102,14 @@ export default function Bookings(props: { calUsername: string; calEmail: string
 
                 return (
                   <div
+                    data-testid="team-event-type-card"
                     onClick={() => {
                       setEventTypeId(event.id);
                       setIsTeamEvent(true);
                     }}
                     className="mx-10 w-[80vw] cursor-pointer rounded-md border-[0.8px] border-black px-10 py-4"
                     key={event.id}>
-                    <h1 className="text-lg font-semibold">{formatEventSlug}</h1>
+                    <h1 className="text-lg font-semibold">{event.title}</h1>
                     <p>{`/${event.slug}`}</p>
                     <span className="border-none bg-gray-800 px-2 text-white">{event?.lengthInMinutes}</span>
                   </div>
@@ -117,7 +119,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
           </div>
         )}
         {eventTypeId && (
-          <div>
+          <div data-testid="event-type-settings-atom">
             <EventTypeSettings
               customClassNames={{
                 atomsWrapper: "!w-[50vw] !m-auto",
@@ -785,7 +787,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
 
         {!eventTypeId && (
           <div className="mt-8 flex flex-row items-center justify-center gap-24">
-            <div className="flex w-[30vw] flex-col gap-2">
+            <div data-testid="create-event-type-atom" className="flex w-[30vw] flex-col gap-2">
               <h1 className="font-semibold">Create Event Type</h1>
               <CreateEventType
                 customClassNames={{
@@ -798,7 +800,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               />
             </div>
 
-            <div className="flex w-[30vw] flex-col gap-2">
+            <div data-testid="create-team-event-type-atom" className="flex w-[30vw] flex-col gap-2">
               <h1 className="font-semibold">Create Team Event Type</h1>
               {teams?.[0]?.id && (
                 <CreateEventType

packages/platform/examples/base/tests/create-event-type-atom/create-event-type.e2e.ts

@@ -1,5 +1,7 @@
 import { test, expect } from "@playwright/test";
 
+import { generateRandomText } from "../../src/lib/generateRandomText";
+
 test("create event type using CreateEventTypeAtom", async ({ page }) => {
   await page.goto("/");
 
@@ -9,13 +11,55 @@ test("create event type using CreateEventTypeAtom", async ({ page }) => {
 
   await expect(page.locator("body")).toBeVisible();
 
-  await page.fill('[data-testid="event-type-quick-chat"]', "e2e event");
+  await page.fill('[data-testid="event-type-quick-chat"]', "Individual e2e event");
 
   await page.fill('textarea[placeholder="A quick video meeting."]', "This is an e2e test event description");
 
   await page.waitForSelector('button[type="submit"]:has-text("Continue")', { state: "visible" });
   await page.click('button[type="submit"]:has-text("Continue")');
 
-  await expect(page.locator('h1:has-text("E2e Event")')).toBeVisible();
-  await expect(page.locator('p:has-text("/e2e-event")')).toBeVisible();
+  await expect(page.locator('h1:has-text("Individual e2e event")')).toBeVisible();
+  await expect(page.locator('p:has-text("/individual-e2e-event")')).toBeVisible();
+
+  await page.locator('[data-testid="event-type-card"] h1:has-text("Individual e2e event")').click();
+
+  await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
+
+  await expect(page.locator('[data-testid="vertical-tab-availability"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-availability"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-event_limit_tab_title"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-event_limit_tab_title"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-event_advanced_tab_title"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-event_advanced_tab_title"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-recurring"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-recurring"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-payments"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-payments"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-basics"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-basics"]').click();
+
+  await expect(page.locator('textarea[name="description"]')).toBeVisible();
+  await page.fill('textarea[name="description"]', generateRandomText());
+
+  await page.locator('[data-testid="update-eventtype"]').click();
+
+  await expect(page.locator('h1:has-text("Individual e2e event")')).toBeVisible();
+  await expect(page.locator('p:has-text("/individual-e2e-event")')).toBeVisible();
+
+  await page.locator('[data-testid="event-type-card"] h1:has-text("E2e Event")').click();
+
+  await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
+
+  await page.locator('button[type="button"][tooltip="Delete"]').waitFor({ state: "visible" });
+  await page.locator('button[type="button"][tooltip="Delete"]').click();
+
+  await page.locator('[data-testid="dialog-creation"]').waitFor({ state: "visible" });
+  await page.locator('[data-testid="dialog-confirmation"]').click();
+
+  await expect(page.locator("body")).toBeVisible();
 });

packages/platform/examples/base/tests/create-team-event-type-atom/create-team-event-type.e2e.ts

@@ -0,0 +1,76 @@
+import { test, expect } from "@playwright/test";
+
+import { generateRandomText } from "../../src/lib/generateRandomText";
+
+test("create team event using CreateTeamEventTypeAtom", async ({ page }) => {
+  await page.goto("/");
+
+  await page.goto("/event-types");
+
+  await expect(page).toHaveURL("/event-types");
+
+  await expect(page.locator("body")).toBeVisible();
+
+  await page.fill(
+    '[data-testid="create-team-event-type-atom"] [data-testid="event-type-quick-chat"]',
+    "Platform team e2e event"
+  );
+
+  await page.waitForSelector(
+    '[data-testid="create-team-event-type-atom"] button[type="submit"]:has-text("Continue")',
+    { state: "visible" }
+  );
+  await page.locator('[data-testid="create-team-event-type-atom"] button[value="COLLECTIVE"]').check();
+
+  await page
+    .locator('[data-testid="create-team-event-type-atom"] button[type="submit"]:has-text("Continue")')
+    .click();
+
+  await expect(page.locator('h1:has-text("Platform team e2e event")')).toBeVisible();
+  await expect(page.locator('p:has-text("/platform-team-e2e-event")')).toBeVisible();
+
+  await page.locator('[data-testid="team-event-type-card"] h1:has-text("Platform team e2e event")').click();
+
+  await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
+
+  await expect(page.locator('[data-testid="vertical-tab-availability"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-availability"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-assignment"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-assignment"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-event_limit_tab_title"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-event_limit_tab_title"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-event_advanced_tab_title"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-event_advanced_tab_title"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-recurring"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-recurring"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-payments"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-payments"]').click();
+
+  await expect(page.locator('[data-testid="vertical-tab-basics"]')).toBeVisible();
+  await page.locator('[data-testid="vertical-tab-basics"]').click();
+
+  await expect(page.locator('textarea[name="description"]')).toBeVisible();
+  await page.fill('textarea[name="description"]', generateRandomText());
+
+  await page.locator('[data-testid="update-eventtype"]').click();
+
+  await expect(page.locator('h1:has-text("Platform team e2e event")')).toBeVisible();
+  await expect(page.locator('p:has-text("/platform-team-e2e-event")')).toBeVisible();
+
+  await page.locator('[data-testid="team-event-type-card"] h1:has-text("Platform team e2e event")').click();
+
+  await expect(page.locator('[data-testid="event-type-settings-atom"]')).toBeVisible();
+
+  await page.locator('button[type="button"][tooltip="Delete"]').waitFor({ state: "visible" });
+  await page.locator('button[type="button"][tooltip="Delete"]').click();
+
+  await page.locator('[data-testid="dialog-creation"]').waitFor({ state: "visible" });
+  await page.locator('[data-testid="dialog-confirmation"]').click();
+
+  await expect(page.locator("body")).toBeVisible();
+});