From e001c0b88f23b70f086cb8154288dc438f3522a7 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Fri, 17 Mar 2023 12:33:54 +0530
Subject: [PATCH] test: add multiple guests e2e test (#7774)

---
 apps/web/pages/booking/[uid].tsx              |  4 +++-
 apps/web/playwright/booking-pages.e2e.ts      | 22 +++++++++++++++++++
 packages/features/form-builder/Components.tsx |  2 ++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index dd938a6907..18d002d1ba 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -529,7 +529,9 @@ export default function Success(props: SuccessProps) {
                           {bookingInfo?.attendees.map((attendee) => (
                             <div key={attendee.name} className="mb-3 last:mb-0">
                               {attendee.name && <p>{attendee.name}</p>}
-                              <p className="text-bookinglight">{attendee.email}</p>
+                              <p data-testid={`attendee-${attendee.email}`} className="text-bookinglight">
+                                {attendee.email}
+                              </p>
                             </div>
                           ))}
                         </div>
diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts
index ad21965203..7a956a3871 100644
--- a/apps/web/playwright/booking-pages.e2e.ts
+++ b/apps/web/playwright/booking-pages.e2e.ts
@@ -132,4 +132,26 @@ test.describe("pro user", () => {
     // This is the only booking in there that needed confirmation and now it should be empty screen
     await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible();
   });
+
+  test("can book with multiple guests", async ({ page, users }) => {
+    const additionalGuests = ["test@gmail.com", "test2@gmail.com"];
+
+    await page.click('[data-testid="event-type-link"]');
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    await page.fill('[name="name"]', "test1234");
+    await page.fill('[name="email"]', "test1234@example.com");
+    await page.locator('[data-testid="add-guests"]').click();
+
+    await page.locator('input[type="email"]').nth(1).fill(additionalGuests[0]);
+    await page.locator('[data-testid="add-another-guest"]').click();
+    await page.locator('input[type="email"]').nth(2).fill(additionalGuests[1]);
+
+    await page.locator('[data-testid="confirm-book-button"]').click();
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    additionalGuests.forEach(async (email) => {
+      await expect(page.locator(`[data-testid="attendee-${email}"]`)).toHaveText(email);
+    });
+  });
 });
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 42871e038c..4acbd2f758 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -172,6 +172,7 @@ export const Components: Record<BookingFieldType, Component> = {
               </ul>
               {!readOnly && (
                 <Button
+                  data-testid="add-another-guest"
                   type="button"
                   color="minimal"
                   StartIcon={FiUserPlus}
@@ -190,6 +191,7 @@ export const Components: Record<BookingFieldType, Component> = {
 
           {!value.length && !readOnly && (
             <Button
+              data-testid="add-guests"
               color="minimal"
               variant="button"
               StartIcon={FiUserPlus}