Disable chromatic snapshots on flaky tests.

guardian · Dec 23, 2024 · b74fa53 · b74fa53
1 parent 93b846b
commit b74fa53
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/dotcom-rendering/src/components/ArticleHeadline.stories.tsx b/dotcom-rendering/src/components/ArticleHeadline.stories.tsx
@@ -253,6 +253,14 @@ export const EditorialDesign = {
 	},
 } satisfies Story;
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. It is unclear to whether it is the icon, the
+ * image, the font, or something else that is causing the issue.
+ *
+ * Example: https://www.chromatic.com/test?appId=637e406971a9af18ddba0505&id=665eecc338adeba89d31f92b
+ */
 export const MatchReportDesignSportTheme = {
 	args: {
 		...StandardDesign.args,
@@ -263,6 +271,9 @@ export const MatchReportDesignSportTheme = {
 		},
 	},
 	name: 'MatchReport Design, Sport Theme',
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 } satisfies Story;
 
 export const LiveBlogDesign = {

diff --git a/dotcom-rendering/src/components/Discussion/Comments.stories.tsx b/dotcom-rendering/src/components/Discussion/Comments.stories.tsx
@@ -143,6 +143,14 @@ export const InitialPage = {
 	],
 } satisfies Story;
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. The monospaced
+ * text: "code" is often different in the snapshot.
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=6659d8e7fde909fdd4dbf8b9
+ */
 export const LoggedInHiddenNoPicks = {
 	...LoggedOutHiddenPicks,
 	name: 'When logged in, with no picks and not expanded',
@@ -152,6 +160,9 @@ export const LoggedInHiddenNoPicks = {
 		user: aUser,
 	},
 	decorators: [splitTheme([format])],
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 } satisfies Story;
 
 export const LoggedIn = {

diff --git a/dotcom-rendering/src/components/DocumentBlockComponent.stories.tsx b/dotcom-rendering/src/components/DocumentBlockComponent.stories.tsx
@@ -34,6 +34,15 @@ export const ScribdDocument: Story = {
 	},
 };
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. The text: "fit width" in
+ * the button in the bottom-right sometimes causes a difference.
+ * often different in the snapshot.
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=676405bf6014bfa8ccddc7be
+ */
 export const DocumentCloudDocument: Story = {
 	args: {
 		embedUrl: 'https://embed.documentcloud.org/documents/20417938-test-pdf',
@@ -44,4 +53,7 @@ export const DocumentCloudDocument: Story = {
 		isTracking: false,
 		isMainMedia: false,
 	},
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 };
diff --git a/dotcom-rendering/src/components/VimeoBlockComponent.stories.tsx b/dotcom-rendering/src/components/VimeoBlockComponent.stories.tsx
@@ -69,6 +69,14 @@ largeAspectRatio.story = {
 	chromatic: { disable: true },
 };
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. Sometimes the video doesn't load
+ * with the error message: "We couldn't verify the security of your connection."
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=6762b11e0dbf28eb24702ff1
+ */
 export const verticalAspectRatio = () => {
 	return (
 		<Wrapper>
@@ -92,3 +100,6 @@ export const verticalAspectRatio = () => {
 	);
 };
 verticalAspectRatio.storyName = 'with vertical aspect ratio';
+verticalAspectRatio.story = {
+	chromatic: { disableSnapshot: true },
+};
diff --git a/dotcom-rendering/src/layouts/DecideLayout.stories.tsx b/dotcom-rendering/src/layouts/DecideLayout.stories.tsx
@@ -222,12 +222,23 @@ export const AppsPictureShowcaseOpinionDark: Story = {
 	parameters: appsParameters,
 };
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently as an iframe is inserted into the page
+ * which is sometimes registered by the snapshot.
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=675aaa4f3aa384bd64bde3a1
+ */
 export const WebPhotoEssayImmersiveLabsLight: Story = {
 	args: {
 		article: enhanceArticleType(PhotoEssayImmersiveLabsFixture, 'Web')
 			.frontendData,
 	},
-	parameters: webParameters,
+	parameters: {
+		...webParameters,
+		chromatic: { disableSnapshot: true },
+	},
 };
 
 const standardStandardLabsWebFixture: ArticleDeprecated = {