Merge branch 'main' into teste2e-appsTab

apps/web/playwright/bookings-apps.e2e.ts

@@ -0,0 +1,119 @@
+import { WEBAPP_URL } from "@calcom/lib/constants";
+
+import { loginUser } from "./fixtures/regularBookings";
+import type { Fixtures } from "./lib/fixtures";
+import { test } from "./lib/fixtures";
+
+const goToApps = async (
+  page: Fixtures["page"],
+  users: Fixtures["users"],
+  bookingPage: Fixtures["bookingPage"]
+) => {
+  await loginUser(users);
+  await page.goto(`${WEBAPP_URL}/event-types`);
+  await bookingPage.goToEventType("30 min");
+  await bookingPage.goToTab("apps");
+};
+const trackingId = "XXXXXXXXXX";
+
+test.describe("Qr code", async () => {
+  test.beforeEach(({ users }) => users.deleteAll());
+  test("Install Qr code app and check the generated result", async ({ page, users, bookingPage }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("qr_code");
+    await bookingPage.fillQrCodeUrlParameters({ fillText: "test=test", users });
+  });
+});
+
+test.describe("Giphy", async () => {
+  test.beforeEach(({ users }) => users.deleteAll());
+
+  test("Install Giphy app and add a gif from search", async ({ page, users, bookingPage }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("giphy");
+    await bookingPage.addGifFromSearch("test");
+    await bookingPage.assertSelectedGif();
+  });
+
+  test("Install Giphy app and add a gif from link", async ({ page, users, bookingPage }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("giphy");
+    await bookingPage.addGifFromLink("https://media.giphy.com/media/2tgkWwcDBISej0C5Vg/giphy.gif");
+    await bookingPage.assertSelectedGif();
+  });
+});
+
+test.describe("Google Analytics", async () => {
+  test.beforeEach(({ users }) => users.deleteAll());
+  test("Install Google Analytics app and check if the tracking ID is used", async ({
+    page,
+    users,
+    bookingPage,
+  }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("ga4");
+    await bookingPage.fillAppTrackingId(trackingId);
+    await bookingPage.updateEventType();
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.assertGoogleAnalyticsRequest(eventTypePage, trackingId);
+  });
+
+  test("Install Google Tag Manager app and check if the tracking ID is used", async ({
+    page,
+    users,
+    bookingPage,
+  }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("gtm");
+    await bookingPage.fillAppTrackingId(trackingId);
+    await bookingPage.updateEventType();
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.assertGoogleTagRequest(eventTypePage, trackingId);
+  });
+});
+
+test.describe("Plausible Analytics", async () => {
+  test.beforeEach(({ users }) => users.deleteAll());
+  test("Install Plausible Analytics app and check if the data provided is used", async ({
+    page,
+    users,
+    bookingPage,
+  }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("plausible");
+    await bookingPage.fillPlausibleAppForm(users);
+    await bookingPage.updateEventType();
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.assertPlausibleAnalyticsRequest(eventTypePage, users);
+  });
+});
+
+test.describe("Fathom Analytics", async () => {
+  test.beforeEach(({ users }) => users.deleteAll());
+  test("Install Fathom Analytics app and check if the tracking ID is used", async ({
+    page,
+    users,
+    bookingPage,
+  }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("fathom");
+    await bookingPage.fillAppTrackingId(trackingId);
+    await bookingPage.updateEventType();
+
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.assertFathomAnalyticsRequest(eventTypePage, users, trackingId);
+  });
+});
+
+test.describe("Meta Pixel", async () => {
+  test.beforeEach(({ users }) => users.deleteAll());
+  test("Install Meta Pixel app and check if the Pixel ID is used", async ({ page, users, bookingPage }) => {
+    await goToApps(page, users, bookingPage);
+    await bookingPage.installRecommendedApp("metapixel");
+    await bookingPage.fillAppTrackingId(trackingId, "Pixel ID");
+    await bookingPage.updateEventType();
+
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.assertMetaPixelRequest(eventTypePage);
+  });
+});

apps/web/playwright/fixtures/regularBookings.ts

@@ -1,7 +1,9 @@
 import { expect, type Page } from "@playwright/test";
 
 import dayjs from "@calcom/dayjs";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 
+import { bookEventOnThisPage } from "../lib/testUtils";
 import { localize } from "../lib/testUtils";
 import type { createUsersFixture } from "./users";
 
@@ -387,5 +389,94 @@ export function createBookingPageFixture(page: Page) {
       await scheduleSuccessfullyPage.waitFor({ state: "visible" });
       await expect(scheduleSuccessfullyPage).toBeVisible();
     },
+    installRecommendedApp: async (appSlug: string) => {
+      await page.getByTestId(appSlug).getByRole("button", { name: "Add" }).click();
+      await page.getByTestId(appSlug).getByRole("switch").click();
+    },
+    fillAppTrackingId: async (trackingId: string, label = "Tracking ID") => {
+      await page.getByLabel(label).fill(trackingId);
+    },
+    fillQrCodeUrlParameters: async (opts: { fillText: string; users: UserFixture }) => {
+      const user = opts.users.get()[0];
+      await page.getByLabel("Additional URL parameters").click();
+      await page.getByLabel("Additional URL parameters").fill(opts.fillText);
+      await expect(
+        page.getByRole("link", { name: `${WEBAPP_URL}/${user.username}/30-min?test=test` }).first()
+      ).toHaveAttribute(
+        "href",
+        `https://api.qrserver.com/v1/create-qr-code/?size=256&data=${WEBAPP_URL}/${user.username}/30-min?test=test`
+      );
+    },
+    addGifFromSearch: async (search: string) => {
+      await page.getByRole("button", { name: "Add from Giphy" }).click();
+      await page.getByPlaceholder("Search Giphy").fill(search);
+      await page.getByRole("button", { name: "Search" }).click();
+      await page.getByRole("button", { name: "Add GIF" }).click();
+    },
+    addGifFromLink: async (giphyLink: string) => {
+      await page.getByRole("button", { name: "Add from Giphy" }).click();
+      await page.getByText("Add link from Giphy").click();
+      await page.getByPlaceholder("https://media.giphy.com/media/some-id/giphy.gif").fill(giphyLink);
+      await page.getByRole("button", { name: "Search" }).click();
+      await page.getByRole("button", { name: "Add GIF" }).click();
+    },
+    assertSelectedGif: async () => {
+      const gifSrc = await page.getByRole("img", { name: "Selected Gif Image" }).getAttribute("src");
+
+      await page.getByTestId("update-eventtype").click();
+      const pagePromise = page.waitForEvent("popup");
+      await page.getByTestId("preview-button").click();
+      const eventTypePage = await pagePromise;
+
+      await bookEventOnThisPage(eventTypePage);
+      expect(await eventTypePage.getByAltText("Gif from Giphy").getAttribute("src")).toBe(gifSrc);
+    },
+    fillPlausibleAppForm: async (users: UserFixture) => {
+      const user = users.get()[0];
+      await page
+        .getByPlaceholder("https://plausible.io/js/script.js")
+        .fill("https://plausible.io/js/script.local.js");
+      await page.getByPlaceholder("yourdomain.com").click();
+      await page.getByPlaceholder("yourdomain.com").fill(`${WEBAPP_URL}/${user.username}/30-min`);
+    },
+    assertGoogleAnalyticsRequest: async (eventTypePage: Page, trackingId: string) => {
+      await eventTypePage.route("https://www.google-analytics.com/g/collect**", (route) => {
+        expect(new URLSearchParams(route.request().url()).get("tid")).toBe(trackingId);
+        route.continue();
+      });
+    },
+    assertGoogleTagRequest: async (eventTypePage: Page, trackingId: string) => {
+      await eventTypePage.route(`https://www.googletagmanager.com/**}`, (route) => {
+        expect(route.request().url()).toBe(`https://www.googletagmanager.com/gtm.js?id=GTM-${trackingId}`);
+        route.continue();
+      });
+    },
+    assertPlausibleAnalyticsRequest: async (eventTypePage: Page, users: UserFixture) => {
+      const user = users.get()[0];
+      await eventTypePage.route("https://plausible.io/api/event", (route) => {
+        const body = JSON.parse(route.request().postData() || "{}");
+        body.u = "[redacted/dynamic]";
+        expect(body).toMatchObject({
+          n: "pageview",
+          u: "[redacted/dynamic]",
+          d: `${WEBAPP_URL}/${user.username}/30-min`,
+          r: null,
+        });
+        route.continue();
+      });
+    },
+    assertFathomAnalyticsRequest: async (eventTypePage: Page, users: UserFixture, trackingId: string) => {
+      await eventTypePage.route("https://cdn.usefathom.com**", (route) => {
+        const user = users.get()[0];
+        const urlParams = new URLSearchParams(route.request().url());
+        expect(urlParams.get("sid")).toBe(trackingId);
+        expect(urlParams.get("h")).toBe(WEBAPP_URL);
+        expect(urlParams.get("p")).toBe(`${user.username}/30-min`);
+        route.continue();
+      });
+    },
+    assertMetaPixelRequest: async (eventTypePage: Page) => {
+      await expect(eventTypePage.locator("#metapixel-0")).toHaveCount(1);
+    },
   };
 }

apps/web/playwright/lib/testUtils.ts

@@ -113,7 +113,7 @@ export async function selectSecondAvailableTimeSlotNextMonth(page: Page) {
   await page.locator('[data-testid="time"]').nth(0).click();
 }
 
-async function bookEventOnThisPage(page: Page) {
+export async function bookEventOnThisPage(page: Page) {
   await selectFirstAvailableTimeSlotNextMonth(page);
   await bookTimeSlot(page);
 

packages/app-store/_components/DynamicComponent.tsx

@@ -13,7 +13,7 @@ export function DynamicComponent<T extends Record<string, React.ComponentType<an
   const Component = componentMap[dirName];
 
   return (
-    <div className={wrapperClassName || ""}>
+    <div data-testid={slug} className={wrapperClassName || ""}>
       <Component {...rest} />
     </div>
   );