test: multiple organizer address test (#7179)

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

apps/web/components/dialog/EditLocationDialog.tsx

@@ -188,6 +188,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 control={locationFormMethods.control}
                 render={() => (
                   <CheckboxField
+                    data-testid="display-location"
                     defaultChecked={defaultLocation?.displayLocationPublicly}
                     description={t("display_location_label")}
                     onChange={(e) =>
@@ -345,7 +346,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                     {t("cancel")}
                   </Button>
 
-                  <Button type="submit">{t("update")}</Button>
+                  <Button data-testid="update-location" type="submit">
+                    {t("update")}
+                  </Button>
                 </div>
               </DialogFooter>
             </Form>

apps/web/components/eventtype/EventSetupTab.tsx

@@ -248,7 +248,11 @@ export const EventSetupTab = (
             )}
             {validLocations.length > 0 && validLocations.length !== locationOptions.length && (
               <li>
-                <Button StartIcon={FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
+                <Button
+                  data-testid="add-location"
+                  StartIcon={FiPlus}
+                  color="minimal"
+                  onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
                 </Button>
               </li>

apps/web/components/ui/form/LocationSelect.tsx

@@ -40,6 +40,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
   return (
     <Select<LocationOption>
       name="location"
+      id="location-select"
       components={{
         Option: (props) => (
           <components.Option {...props}>

apps/web/pages/event-types/index.tsx

@@ -374,6 +374,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         <ButtonGroup combined>
                           <Tooltip content={t("preview")}>
                             <Button
+                              data-testid="preview-link-button"
                               color="secondary"
                               target="_blank"
                               variant="icon"

apps/web/playwright/event-types.e2e.ts

@@ -4,6 +4,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { randomString } from "@calcom/lib/random";
 
 import { test } from "./lib/fixtures";
+import { selectFirstAvailableTimeSlotNextMonth, bookTimeSlot } from "./lib/testUtils";
 
 test.describe.configure({ mode: "parallel" });
 
@@ -122,5 +123,62 @@ test.describe("Event Types tests", () => {
       const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
       expect(toast).toBeTruthy();
     });
+
+    test("can add multiple organizer address", async ({ page }) => {
+      const $eventTypes = page.locator("[data-testid=event-types] > li a");
+      const firstEventTypeElement = $eventTypes.first();
+      await firstEventTypeElement.click();
+      await page.waitForNavigation({
+        url: (url) => {
+          return !!url.pathname.match(/\/event-types\/.+/);
+        },
+      });
+
+      const locationData = ["location 1", "location 2", "location 3"];
+
+      const fillLocation = async (inputText: string) => {
+        await page.locator("#location-select").click();
+        await page.locator("text=In Person (Organizer Address)").click();
+        await page.locator('input[name="locationAddress"]').fill(inputText);
+        await page.locator("[data-testid=display-location]").check();
+        await page.locator("[data-testid=update-location]").click();
+      };
+
+      await fillLocation(locationData[0]);
+
+      await page.locator("[data-testid=add-location]").click();
+      await fillLocation(locationData[1]);
+
+      await page.locator("[data-testid=add-location]").click();
+      await fillLocation(locationData[2]);
+
+      await page.locator("[data-testid=update-eventtype]").click();
+
+      await page.goto("/event-types");
+
+      const previewLink = await page
+        .locator("[data-testid=preview-link-button]")
+        .first()
+        .getAttribute("href");
+
+      await page.goto(previewLink ?? "");
+
+      await selectFirstAvailableTimeSlotNextMonth(page);
+
+      // Navigate to book page
+      await page.waitForNavigation({
+        url(url) {
+          return url.pathname.endsWith("/book");
+        },
+      });
+
+      for (const location of locationData) {
+        await page.locator(`span:has-text("${location}")`).click();
+      }
+
+      await bookTimeSlot(page);
+
+      await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+    });
   });
 });