test: Check the webhook event tab and your funtionalities (#12433)

* Check the webhook event tab and your funtionalities

* Check the webhook event tab and your funtionalities

* add changes

* add changes

* add changes

* add changes

* add changes

* add changes

* fix tests

* Refactor

---------

Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com>
Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>

apps/web/playwright/fixtures/regularBookings.ts

@@ -1,6 +1,7 @@
 import { expect, type Page } from "@playwright/test";
 
 import dayjs from "@calcom/dayjs";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import type { MembershipRole } from "@calcom/prisma/enums";
 
 import { localize } from "../lib/testUtils";
@@ -327,6 +328,10 @@ export function createBookingPageFixture(page: Page) {
       await eventTypePage.getByTestId("confirm_cancel").click();
       await expect(eventTypePage.getByTestId("cancelled-headline")).toBeVisible();
     },
+    confirmBooking: async (eventTypePage: Page) => {
+      await eventTypePage.getByTestId("confirm-book-button").click();
+      await eventTypePage.waitForURL("booking/**");
+    },
 
     confirmBooking: async (eventTypePage: Page) => {
       const confirmButton = "confirm-book-button";
@@ -501,5 +506,43 @@ export function createBookingPageFixture(page: Page) {
     checkTimeSlotsCount: async (eventTypePage: Page, count: number) => {
       await expect(eventTypePage.getByTestId("time")).toHaveCount(count);
     },
+    createBookingWebhook: async (webhookReceiver: { url: string }, eventTitle: string) => {
+      const events = [
+        "Booking Canceled",
+        "Booking Created",
+        "Booking Rejected",
+        "Booking Requested",
+        "Booking Payment Initiated",
+        "Booking Rescheduled",
+        "Meeting Ended",
+        "Booking Paid",
+        "Recording Download Link Ready",
+      ];
+      await page.goto(`${WEBAPP_URL}/event-types`);
+      await page.getByText(eventTitle).click();
+
+      await page.getByTestId("vertical-tab-webhooks").click();
+
+      await page.getByTestId("new_webhook").click();
+      await page.getByLabel("Subscriber URL").fill(webhookReceiver.url);
+      await page.getByRole("button", { name: "Ping test" }).click();
+      page
+        .getByTestId("dialog-creation")
+        .locator("div")
+        .filter({ hasText: '{ "ok": true, "status": 200, "message": "{}" }' })
+        .nth(2);
+      await page.getByRole("button", { name: "Create Webhook" }).click();
+
+      page.getByText(webhookReceiver.url);
+      events.forEach((event) => {
+        page.getByText(event);
+      });
+    },
+    rejectFirstBooking: async () => {
+      await page.goto("/bookings/unconfirmed");
+      await page.getByTestId("horizontal-tab-unconfirmed").click();
+      await page.getByTestId("booking-item").first().getByText("Reject").click();
+      await page.getByTestId("rejection-confirm").click();
+    },
   };
 }