From c6dad39fb0b025c69b5966e516c8294ed3ee0e91 Mon Sep 17 00:00:00 2001
From: "gitstart-app[bot]"
 <57568882+gitstart-app[bot]@users.noreply.github.com>
Date: Thu, 22 Feb 2024 21:54:49 -0300
Subject: [PATCH] test: Create E2E tests for Analytics Apps
 (teste2e-analyticsApps) (#13695)

* refactor

* refactor

* refactor

* refactor

* fix failing check

* Update apps.ts

* fix failing check

* fix failing check

* fix failing check

---------

Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com>
Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com>
---
 apps/web/pages/apps/installed/[category].tsx  |  1 +
 .../apps/analytics/analyticsApps.e2e.ts       | 35 +++++++++++++++++++
 apps/web/playwright/fixtures/apps.ts          | 29 +++++++++++++++
 apps/web/playwright/lib/fixtures.ts           |  6 ++++
 .../components/EventTypeAppCardInterface.tsx  |  1 +
 .../components/EventTypeAppCardInterface.tsx  |  1 +
 .../components/EventTypeAppCardInterface.tsx  |  1 +
 .../components/EventTypeAppCardInterface.tsx  |  2 ++
 .../components/EventTypeAppCardInterface.tsx  |  1 +
 .../components/EventTypeAppCardInterface.tsx  |  2 ++
 packages/features/shell/Shell.tsx             |  1 +
 .../ui/components/form/inputs/TextField.tsx   |  2 ++
 packages/ui/components/form/inputs/types.d.ts |  1 +
 .../navigation/tabs/VerticalTabItem.tsx       |  6 +++-
 14 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/playwright/apps/analytics/analyticsApps.e2e.ts
 create mode 100644 apps/web/playwright/fixtures/apps.ts

diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index 6f5159c1f8..d9120b037a 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -95,6 +95,7 @@ const IntegrationsContainer = ({
               className="mb-6"
               actions={
                 <Button
+                  data-testid="add-apps"
                   href={variant ? `/apps/categories/${variant}` : "/apps"}
                   color="secondary"
                   StartIcon={Plus}>
diff --git a/apps/web/playwright/apps/analytics/analyticsApps.e2e.ts b/apps/web/playwright/apps/analytics/analyticsApps.e2e.ts
new file mode 100644
index 0000000000..d9d0137957
--- /dev/null
+++ b/apps/web/playwright/apps/analytics/analyticsApps.e2e.ts
@@ -0,0 +1,35 @@
+import { loginUser } from "../../fixtures/regularBookings";
+import { test } from "../../lib/fixtures";
+
+const ALL_APPS = ["fathom", "matomo", "plausible", "ga4", "gtm", "metapixel"];
+
+test.describe("Check analytics Apps", () => {
+  test.beforeEach(async ({ page, users }) => {
+    await loginUser(users);
+    await page.goto("/apps/");
+  });
+
+  test("Check analytics Apps", async ({ appsPage, page }) => {
+    await appsPage.goToAppsCategory("analytics");
+    await appsPage.installApp("fathom");
+    await appsPage.goBackToAppsPage();
+    await appsPage.installApp("matomo");
+    await appsPage.goBackToAppsPage();
+    await appsPage.installApp("plausible");
+    await appsPage.goBackToAppsPage();
+    await appsPage.installApp("ga4");
+    await appsPage.goBackToAppsPage();
+    await appsPage.installApp("gtm");
+    await appsPage.goBackToAppsPage();
+    await appsPage.installApp("metapixel");
+    await appsPage.goBackToAppsPage();
+    await page.goto("/event-types");
+    await appsPage.goToEventType("30 min");
+    await appsPage.goToAppsTab();
+    await appsPage.verifyAppsInfo(0);
+    for (const app of ALL_APPS) {
+      await appsPage.activeApp(app);
+    }
+    await appsPage.verifyAppsInfo(6);
+  });
+});
diff --git a/apps/web/playwright/fixtures/apps.ts b/apps/web/playwright/fixtures/apps.ts
new file mode 100644
index 0000000000..61c649684a
--- /dev/null
+++ b/apps/web/playwright/fixtures/apps.ts
@@ -0,0 +1,29 @@
+import { expect, type Page } from "@playwright/test";
+
+export function createAppsFixture(page: Page) {
+  return {
+    goToAppsCategory: async (category: string) => {
+      await page.getByTestId(`app-store-category-${category}`).nth(1).click();
+      await page.goto("apps/categories/analytics");
+    },
+    installApp: async (app: string) => {
+      await page.getByTestId(`app-store-app-card-${app}`).click();
+      await page.getByTestId("install-app-button").click();
+    },
+    goBackToAppsPage: async () => {
+      await page.getByTestId("add-apps").click();
+    },
+    goToEventType: async (eventType: string) => {
+      await page.getByRole("link", { name: eventType }).click();
+    },
+    goToAppsTab: async () => {
+      await page.getByTestId("vertical-tab-apps").click();
+    },
+    activeApp: async (app: string) => {
+      await page.getByTestId(`${app}-app-switch`).click();
+    },
+    verifyAppsInfo: async (activeApps: number) => {
+      await expect(page.locator(`text=6 apps, ${activeApps} active`)).toBeVisible();
+    },
+  };
+}
diff --git a/apps/web/playwright/lib/fixtures.ts b/apps/web/playwright/lib/fixtures.ts
index af6ad825ab..88468aea0c 100644
--- a/apps/web/playwright/lib/fixtures.ts
+++ b/apps/web/playwright/lib/fixtures.ts
@@ -4,6 +4,7 @@ import { test as base } from "@playwright/test";
 import prisma from "@calcom/prisma";
 
 import type { ExpectedUrlDetails } from "../../../../playwright.config";
+import { createAppsFixture } from "../fixtures/apps";
 import { createBookingsFixture } from "../fixtures/bookings";
 import { createEmailsFixture } from "../fixtures/emails";
 import { createEmbedsFixture } from "../fixtures/embeds";
@@ -32,6 +33,7 @@ export interface Fixtures {
   workflowPage: ReturnType<typeof createWorkflowPageFixture>;
   features: ReturnType<typeof createFeatureFixture>;
   eventTypePage: ReturnType<typeof createEventTypeFixture>;
+  appsPage: ReturnType<typeof createAppsFixture>;
 }
 
 declare global {
@@ -104,4 +106,8 @@ export const test = base.extend<Fixtures>({
     const eventTypePage = createEventTypeFixture(page);
     await use(eventTypePage);
   },
+  appsPage: async ({ page }, use) => {
+    const appsPage = createAppsFixture(page);
+    await use(appsPage);
+  },
 });
diff --git a/packages/app-store/fathom/components/EventTypeAppCardInterface.tsx b/packages/app-store/fathom/components/EventTypeAppCardInterface.tsx
index 1d30ac8904..09899e57f7 100644
--- a/packages/app-store/fathom/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/fathom/components/EventTypeAppCardInterface.tsx
@@ -21,6 +21,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
       <TextField
+        dataTestid={app.slug}
         name="Tracking ID"
         value={trackingId}
         disabled={disabled}
diff --git a/packages/app-store/ga4/components/EventTypeAppCardInterface.tsx b/packages/app-store/ga4/components/EventTypeAppCardInterface.tsx
index 1d30ac8904..09899e57f7 100644
--- a/packages/app-store/ga4/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/ga4/components/EventTypeAppCardInterface.tsx
@@ -21,6 +21,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
       <TextField
+        dataTestid={app.slug}
         name="Tracking ID"
         value={trackingId}
         disabled={disabled}
diff --git a/packages/app-store/gtm/components/EventTypeAppCardInterface.tsx b/packages/app-store/gtm/components/EventTypeAppCardInterface.tsx
index 1d30ac8904..09899e57f7 100644
--- a/packages/app-store/gtm/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/gtm/components/EventTypeAppCardInterface.tsx
@@ -21,6 +21,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
       <TextField
+        dataTestid={app.slug}
         name="Tracking ID"
         value={trackingId}
         disabled={disabled}
diff --git a/packages/app-store/matomo/components/EventTypeAppCardInterface.tsx b/packages/app-store/matomo/components/EventTypeAppCardInterface.tsx
index a17122f346..22d6836d1b 100644
--- a/packages/app-store/matomo/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/matomo/components/EventTypeAppCardInterface.tsx
@@ -23,6 +23,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       teamId={eventType.team?.id || undefined}>
       <div className="flex flex-col gap-2">
         <TextField
+          dataTestid={`${app.slug}-url`}
           name="Matomo URL"
           placeholder="Enter your Matomo URL here"
           value={matomoUrl}
@@ -32,6 +33,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
           }}
         />
         <TextField
+          dataTestid={`${app.slug}-site-id`}
           disabled={disabled}
           name="Site ID"
           placeholder="Enter your Site ID"
diff --git a/packages/app-store/metapixel/components/EventTypeAppCardInterface.tsx b/packages/app-store/metapixel/components/EventTypeAppCardInterface.tsx
index b61b3b71fa..38ee45f214 100644
--- a/packages/app-store/metapixel/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/metapixel/components/EventTypeAppCardInterface.tsx
@@ -19,6 +19,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
       <TextField
+        dataTestid={app.slug}
         name="Pixel ID"
         value={trackingId}
         disabled={disabled}
diff --git a/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx b/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx
index d22c061e69..306d0be058 100644
--- a/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx
@@ -23,6 +23,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       teamId={eventType.team?.id || undefined}>
       <div className="flex flex-col gap-2">
         <TextField
+          dataTestid={`${app.slug}-url`}
           name="Plausible URL"
           defaultValue="https://plausible.io/js/script.js"
           placeholder="https://plausible.io/js/script.js"
@@ -33,6 +34,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
           }}
         />
         <TextField
+          dataTestid={`${app.slug}-tracking-id`}
           disabled={disabled}
           name="Tracked Domain"
           placeholder="yourdomain.com"
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 20f5e5988a..e72ef544f2 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -729,6 +729,7 @@ const NavigationItem: React.FC<{
     <Fragment>
       <Tooltip side="right" content={t(item.name)} className="lg:hidden">
         <Link
+          data-test-id={item.name}
           href={item.href}
           aria-label={t(item.name)}
           className={classNames(
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index e5ac2a3d69..ef9baf5285 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -81,6 +81,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
     onClickAddon,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     t: __t,
+    dataTestid,
     ...passThrough
   } = props;
 
@@ -114,6 +115,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
             </Addon>
           )}
           <Input
+            data-testid={`${dataTestid}-input` ?? "input-field"}
             id={id}
             type={type}
             placeholder={placeholder}
diff --git a/packages/ui/components/form/inputs/types.d.ts b/packages/ui/components/form/inputs/types.d.ts
index 1e058b0df0..68032943f0 100644
--- a/packages/ui/components/form/inputs/types.d.ts
+++ b/packages/ui/components/form/inputs/types.d.ts
@@ -17,6 +17,7 @@ export type InputFieldProps = {
   containerClassName?: string;
   showAsteriskIndicator?: boolean;
   t?: (key: string) => string;
+  dataTestid?: string;
   onClickAddon?: () => void;
 } & React.ComponentProps<typeof Input> & {
     labelProps?: React.ComponentProps<typeof Label>;
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index 121cf08bf4..ad866aa271 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -78,7 +78,11 @@ const VerticalTabItem = ({
                 {props.isExternalLink ? <ExternalLink data-testid="external-link" /> : null}
               </span>
               {info && (
-                <Skeleton as="p" title={t(info)} className="max-w-44 mt-1 truncate text-xs font-normal">
+                <Skeleton
+                  data-testid="apps-info"
+                  as="p"
+                  title={t(info)}
+                  className="max-w-44 mt-1 truncate text-xs font-normal">
                   {t(info)}
                 </Skeleton>
               )}