chore: Don't render certain components when running meticulous tests (#10772)

* chore: Don't render credits when running meticulous tests

* fix: type window Meticulous

* fix: window reference error

* chore: window interface

* chore: disable tzdialog popup on meticulous

* chore: IS_VISUAL_REGRESSION_TESTING

* fix: constants

* fix: only run on preview builds

---------

Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com>

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -35,6 +35,7 @@ import {
   Tooltip,
 } from "@calcom/ui";
 import { Copy, Edit } from "@calcom/ui/components/icon";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -286,36 +287,38 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         }}>
         {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
         <div className="lg:-ml-2">
-          <TextField
+          {!IS_VISUAL_REGRESSION_TESTING && (
-            disabled
+            <TextField
-            name="hashedLink"
+              disabled
-            label={t("private_link_label")}
+              name="hashedLink"
-            data-testid="generated-hash-url"
+              label={t("private_link_label")}
-            labelSrOnly
+              data-testid="generated-hash-url"
-            type="text"
+              labelSrOnly
-            hint={t("private_link_hint")}
+              type="text"
-            defaultValue={placeholderHashedLink}
+              hint={t("private_link_hint")}
-            addOnSuffix={
+              defaultValue={placeholderHashedLink}
-              <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
+              addOnSuffix={
-                <Button
+                <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
-                  color="minimal"
+                  <Button
-                  size="sm"
+                    color="minimal"
-                  type="button"
+                    size="sm"
-                  className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                    type="button"
-                  aria-label="copy link"
+                    className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
-                  onClick={() => {
+                    aria-label="copy link"
-                    navigator.clipboard.writeText(placeholderHashedLink);
+                    onClick={() => {
-                    if (eventType.hashedLink) {
+                      navigator.clipboard.writeText(placeholderHashedLink);
-                      showToast(t("private_link_copied"), "success");
+                      if (eventType.hashedLink) {
-                    } else {
+                        showToast(t("private_link_copied"), "success");
-                      showToast(t("enabled_after_update_description"), "warning");
+                      } else {
-                    }
+                        showToast(t("enabled_after_update_description"), "warning");
-                  }}>
+                      }
-                  <Copy className="h-4 w-4" />
+                    }}>
-                </Button>
+                    <Copy className="h-4 w-4" />
-              </Tooltip>
+                  </Button>
-            }
+                </Tooltip>
-          />
+              }
+            />
+          )}
         </div>
       </SettingsToggle>
       <hr className="border-subtle" />

apps/web/constants.ts

@@ -0,0 +1 @@
+export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);

apps/web/pages/_document.tsx

@@ -51,7 +51,7 @@ class MyDocument extends Document<Props> {
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f9fafb" />
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1C1C" />
-          {(!IS_PRODUCTION || process.env.VERCEL_ENV === "preview") && (
+          {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
             // eslint-disable-next-line @next/next/no-sync-scripts
             <script
               data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"

packages/features/settings/TimezoneChangeDialog.tsx

@@ -5,6 +5,7 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, showToast } from "@calcom/ui";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();
@@ -43,7 +44,7 @@ export default function TimezoneChangeDialog() {
     const tzDifferent =
       !isLoading && dayjs.tz(undefined, currentTz).utcOffset() !== dayjs.tz(undefined, userTz).utcOffset();
     const showDialog = tzDifferent && !document.cookie.includes("calcom-timezone-dialog=1");
-    setOpen(showDialog);
+    setOpen(!IS_VISUAL_REGRESSION_TESTING && showDialog);
   }, [currentTz, isLoading, userTz]);
 
   // save cookie to not show again

packages/features/shell/Shell.tsx

@@ -77,6 +77,7 @@ import {
   Zap,
 } from "@calcom/ui/components/icon";
 import { Discord } from "@calcom/ui/components/icon/Discord";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
@@ -920,7 +921,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
               </ButtonOrLink>
             </Tooltip>
           ))}
-          <Credits />
+          {!IS_VISUAL_REGRESSION_TESTING && <Credits />}
         </div>
       </aside>
     </div>

packages/types/window.d.ts

@@ -0,0 +1,5 @@
+interface Window {
+  Meticulous?: {
+    isRunningAsTest: boolean;
+  };
+}