Refactor quiz atom stories

Added the `centreColumnDecorator`, so the stories better reflect the layout commonly used in articles. Removed the `splitTheme` decorator, as this is now handled by the "global colour scheme" toolbar item and Chromatic modes. Added Chromatic modes to these stories. Added a `WithResults` story for each variant of the quiz atom. It includes a `play` function to work through the quiz, selecting some answers and revealing/submitting them. This story therefors displays the component in a state that includes the results box, and allows it to be snapshotted like this in Chromatic.
guardian · Jan 15, 2025 · cf14ab7 · cf14ab7
1 parent 79aceda
commit cf14ab7
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 45 deletions.
diff --git a/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx b/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
+import { userEvent, within } from '@storybook/test';
+import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { allModes } from '../../.storybook/modes';
 import {
 	exampleKnowledgeQuestions,
 	natureQuestions,
@@ -17,6 +19,14 @@ import { KnowledgeQuizAtom } from './KnowledgeQuizAtom.importable';
 const meta = {
 	title: 'Components/KnowledgeQuizAtom',
 	component: KnowledgeQuizAtom,
+	decorators: centreColumnDecorator,
+	parameters: {
+		chromatic: {
+			modes: {
+				horizontal: allModes.splitHorizontal,
+			},
+		},
+	},
 } satisfies Meta<typeof KnowledgeQuizAtom>;
 
 export default meta;
@@ -36,15 +46,33 @@ export const Default = {
 			theme: Pillar.News,
 		},
 	},
-	decorators: [
-		splitTheme([
-			{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Comment,
-				theme: Pillar.News,
+} satisfies Story;
+
+export const WithResults = {
+	...Default,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const questions = canvas.getAllByRole('listitem');
+
+		for (const question of questions) {
+			const questionElement = within(question);
+			const [firstAnswer] = questionElement.getAllByRole('radio');
+			const revealButton = questionElement.getByRole('button');
+
+			await userEvent.click(firstAnswer!);
+			await userEvent.click(revealButton);
+		}
+	},
+	parameters: {
+		chromatic: {
+			modes: {
+				horizontal: { disable: true },
+				'vertical mobileLandscape':
+					allModes['vertical mobileLandscape'],
 			},
-		]),
-	],
+		},
+	},
 } satisfies Story;
 
 export const BatchedResults = {
@@ -53,28 +81,15 @@ export const BatchedResults = {
 		questions: natureQuestions,
 		resultGroups: natureResultGroups,
 	},
-	decorators: [
-		splitTheme([
-			{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Comment,
-				theme: Pillar.News,
-			},
-		]),
-	],
 } satisfies Story;
 
 export const LabsTheme = {
 	args: {
 		...Default.args,
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Comment,
+			theme: ArticleSpecial.Labs,
+		},
 	},
-	decorators: [
-		splitTheme([
-			{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Comment,
-				theme: ArticleSpecial.Labs,
-			},
-		]),
-	],
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx b/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
+import { userEvent, within } from '@storybook/test';
+import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { allModes } from '../../.storybook/modes';
 import {
 	examplePersonalityQuestions,
 	exampleResultBuckets,
@@ -15,6 +17,14 @@ import { PersonalityQuizAtom } from './PersonalityQuizAtom.importable';
 const meta = {
 	title: 'Components/PersonalityQuizAtom',
 	component: PersonalityQuizAtom,
+	decorators: centreColumnDecorator,
+	parameters: {
+		chromatic: {
+			modes: {
+				horizontal: allModes.splitHorizontal,
+			},
+		},
+	},
 } satisfies Meta<typeof PersonalityQuizAtom>;
 
 export default meta;
@@ -34,29 +44,51 @@ export const Default = {
 			theme: Pillar.News,
 		},
 	},
-	decorators: [
-		splitTheme([
-			{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Comment,
-				theme: Pillar.News,
+} satisfies Story;
+
+export const WithResults = {
+	...Default,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const questions = canvas.getAllByRole('listitem');
+
+		for (const question of questions) {
+			const questionElement = within(question);
+			const [firstAnswer] = questionElement.getAllByRole('radio');
+
+			await userEvent.click(firstAnswer!);
+		}
+
+		// We could be viewing light and dark mode side-by-side, in which case
+		// there are two submit buttons, as the component is rendered twice.
+		const submitButtons = canvas.getAllByRole('button', {
+			name: /submit/i,
+		});
+
+		for (const button of submitButtons) {
+			await userEvent.click(button);
+		}
+	},
+	parameters: {
+		chromatic: {
+			modes: {
+				horizontal: { disable: true },
+				'vertical mobileLandscape':
+					allModes['vertical mobileLandscape'],
 			},
-		]),
-	],
+		},
+	},
 } satisfies Story;
 
 export const LabsTheme = {
 	args: {
 		...Default.args,
 		id: '2c6bf552-2827-4256-b3a0-f557d215c394',
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Comment,
+			theme: ArticleSpecial.Labs,
+		},
 	},
-	decorators: [
-		splitTheme([
-			{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Comment,
-				theme: ArticleSpecial.Labs,
-			},
-		]),
-	],
 } satisfies Story;