chore: ignore dynamic content on chromatic (#16214)

BrunoQuaresma · web-flow · commit 0fa6b3df13ce · 2025-01-21T15:22:06.000-03:00
diff --git a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx
@@ -128,7 +128,9 @@ const ErrorStack: FC<ErrorStackProps> = ({ error }) => {
 					</p>
 					{error.stack && (
 						<pre className="m-0 py-2 px-0 overflow-x-auto text-xs">
-							<code data-testid="code">{error.stack}</code>
+							<code data-testid="code" data-chromatic="ignore">
+								{error.stack}
+							</code>
 						</pre>
 					)}
 				</>
diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx
@@ -1,15 +1,18 @@
+import isChromatic from "chromatic/isChromatic";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { CliInstallPageView } from "./CliInstallPageView";
 
 export const CliInstallPage: FC = () => {
+	const origin = isChromatic() ? "https://example.com" : window.location.origin;
+
 	return (
 		<>
 			<Helmet>
 				<title>{pageTitle("Install the Coder CLI")}</title>
 			</Helmet>
-			<CliInstallPageView />
+			<CliInstallPageView origin={origin} />
 		</>
 	);
 };
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx
@@ -4,6 +4,9 @@ import { CliInstallPageView } from "./CliInstallPageView";
 const meta: Meta<typeof CliInstallPageView> = {
 	title: "pages/CliInstallPage",
 	component: CliInstallPageView,
+	args: {
+		origin: "https://example.com",
+	},
 };
 
 export default meta;
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
@@ -4,9 +4,11 @@ import { Welcome } from "components/Welcome/Welcome";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
-export const CliInstallPageView: FC = () => {
-	const origin = location.origin;
+type CliInstallPageViewProps = {
+	origin: string;
+};
 
+export const CliInstallPageView: FC<CliInstallPageViewProps> = ({ origin }) => {
 	return (
 		<div css={styles.container}>
 			<Welcome>Install the Coder CLI</Welcome>
@@ -18,7 +20,6 @@ export const CliInstallPageView: FC = () => {
 
 			<CodeExample
 				css={{ maxWidth: "100%" }}
-				data-chromatic="ignore"
 				code={`curl -fsSL ${origin}/install.sh | sh`}
 				secret={false}
 			/>
