test: team booking (#10267)

Co-authored-by: alannnc <alannnc@gmail.com>

apps/web/pages/booking/[uid].tsx

@@ -440,7 +440,9 @@ export default function Success(props: SuccessProps) {
                           {bookingInfo?.user && (
                             <div className="mb-3">
                               <div>
-                                <span className="mr-2">{bookingInfo.user.name}</span>
+                                <span data-testid={`host-name-${bookingInfo.user.name}`} className="mr-2">
+                                  {bookingInfo.user.name}
+                                </span>
                                 <Badge variant="blue">{t("Host")}</Badge>
                               </div>
                               <p className="text-default">{bookingInfo.user.email}</p>

apps/web/playwright/fixtures/users.ts

@@ -229,6 +229,7 @@ export const createUsersFixture = (page: Page, workerInfo: WorkerInfo) => {
                 id: _user.id,
               },
             },
+            schedulingType: "COLLECTIVE",
             title: "Team Event - 30min",
             slug: "team-event-30min",
             length: 30,

apps/web/playwright/teams.e2e.ts

@@ -1,8 +1,10 @@
 import { expect } from "@playwright/test";
 
 import { prisma } from "@calcom/prisma";
+import { MembershipRole } from "@calcom/prisma/enums";
 
 import { test } from "./lib/fixtures";
+import { bookTimeSlot, selectFirstAvailableTimeSlotNextMonth, testName } from "./lib/testUtils";
 
 test.describe.configure({ mode: "parallel" });
 
@@ -62,4 +64,86 @@ test.describe("Teams", () => {
       // await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible();
     });
   });
+  test("Can create a booking for Collective EventType", async ({ page, users }) => {
+    const ownerObj = { username: "pro-user", name: "pro-user" };
+    const teamMate1Obj = { username: "teammate-1", name: "teammate-1" };
+    const teamMate2Obj = { username: "teammate-2", name: "teammate-2" };
+
+    const owner = await users.create(ownerObj, { hasTeam: true });
+    const teamMate1 = await users.create(teamMate1Obj);
+    const teamMate2 = await users.create(teamMate2Obj);
+    teamMate1.username, teamMate2.username;
+    // TODO: Create a fixture and follow DRY
+    const { team } = await prisma.membership.findFirstOrThrow({
+      where: { userId: owner.id },
+      include: { team: true },
+    });
+
+    // Add teamMate1 to the team
+    await prisma.membership.create({
+      data: {
+        teamId: team.id,
+        userId: teamMate1.id,
+        role: MembershipRole.MEMBER,
+        accepted: true,
+      },
+    });
+
+    // Add teamMate2 to the team
+    await prisma.membership.create({
+      data: {
+        teamId: team.id,
+        userId: teamMate2.id,
+        role: MembershipRole.MEMBER,
+        accepted: true,
+      },
+    });
+    // No need to remove membership row manually as it will be deleted with the user, at the end of the test.
+
+    const { id: eventTypeId } = await prisma.eventType.findFirstOrThrow({
+      where: { userId: owner.id, teamId: team.id },
+      select: { id: true },
+    });
+
+    // Assign owner and teammates to the eventtype host list
+    await prisma.host.create({
+      data: {
+        userId: owner.id,
+        eventTypeId,
+        isFixed: true,
+      },
+    });
+    await prisma.host.create({
+      data: {
+        userId: teamMate1.id,
+        eventTypeId,
+        isFixed: true,
+      },
+    });
+    await prisma.host.create({
+      data: {
+        userId: teamMate2.id,
+        eventTypeId,
+        isFixed: true,
+      },
+    });
+
+    await page.goto(`/team/${team.slug}/team-event-30min`);
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await bookTimeSlot(page);
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+    await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName);
+
+    // The first user added to the host list will be the host name
+    await expect(page.locator(`[data-testid="host-name-${ownerObj.name}"]`)).toHaveText(ownerObj.name);
+
+    // The remaining hosts will be shown as the attendees
+    await expect(page.locator(`[data-testid="attendee-name-${teamMate1Obj.name}"]`)).toHaveText(
+      teamMate1Obj.name
+    );
+    await expect(page.locator(`[data-testid="attendee-name-${teamMate2Obj.name}"]`)).toHaveText(
+      teamMate2Obj.name
+    );
+    // TODO: Assert whether the user received an email
+  });
 });