test: E2E test to verify event multiple duration works correctly (calcom#23144)

* fix: multiple booking duration isn't working

* followup test

Author: anikdhabal

apps/web/playwright/dynamic-booking-pages.e2e.ts

@@ -6,6 +6,7 @@ import { test } from "./lib/fixtures";
 import {
   bookTimeSlot,
   confirmReschedule,
+  confirmBooking,
   doOnOrgDomain,
   selectFirstAvailableTimeSlotNextMonth,
   selectSecondAvailableTimeSlotNextMonth,
@@ -98,6 +99,58 @@ test("dynamic booking info prefilled by query params", async ({ page, users }) =
   activeState = await listItemLocator.getAttribute("data-active");
   expect(activeState).toEqual("false");
 });
+
+test("multiple duration selection updates event length correctly", async ({ page, users }) => {
+  const user = await users.create();
+  await user.apiLogin();
+
+  await test.step("update event title to include duration placeholder", async () => {
+    await page.goto("/event-types");
+    await page.waitForSelector('[data-testid="event-types"]');
+    await page.click(`text=Multiple duration`);
+    await page.waitForSelector('[data-testid="event-title"]');
+    await expect(page.getByTestId("vertical-tab-event_setup_tab_title")).toHaveAttribute(
+      "aria-current",
+      "page"
+    );
+    await page.getByTestId("vertical-tab-event_advanced_tab_title").click();
+    await page.fill('[name="eventName"]', "{Event duration} event btwn {Organiser} {Scheduler}");
+    await page.locator('[data-testid="update-eventtype"]').click();
+    await page.waitForResponse("/api/trpc/eventTypes/update?batch=1");
+  });
+
+  await page.goto(`/${user.username}/multiple-duration`);
+
+  await page.locator('[data-testid="multiple-choice-30mins"]').waitFor({ state: "visible" });
+
+  await test.step("verify default 30min duration is selected", async () => {
+    const duration30 = page.getByTestId("multiple-choice-30mins");
+    const activeState = await duration30.getAttribute("data-active");
+    expect(activeState).toEqual("true");
+  });
+
+  await test.step("book with 90min duration and verify title", async () => {
+    await page.getByTestId("multiple-choice-90mins").click();
+
+    const duration90 = page.getByTestId("multiple-choice-90mins");
+    const activeState = await duration90.getAttribute("data-active");
+    expect(activeState).toEqual("true");
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+
+    await page.fill('[name="name"]', "Test User");
+    await page.fill('[name="email"]', "test@example.com");
+    await confirmBooking(page);
+
+    await expect(page.locator("[data-testid=success-page]")).toBeVisible();
+
+    const bookingTitle = page.locator('[data-testid="booking-title"]');
+    await expect(bookingTitle).toBeVisible();
+    const titleText = await bookingTitle.textContent();
+    expect(titleText).toContain("90");
+  });
+});
+
 // eslint-disable-next-line playwright/no-skipped-test
 test.skip("it contains the right event details", async ({ page }) => {
   const response = await page.goto(`http://acme.cal.local:3000/owner1+member1`);