[Storybook] Disable snapshots globally + enable for select few stories

.changeset/lucky-clouds-hang.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Storybook] Disable snapshots globally + enable for select few stories

.storybook/preview.tsx

@@ -1,4 +1,4 @@
 import * as React from "react";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {Dependencies} from "@khanacademy/perseus";
@@ -23,7 +23,14 @@
         (Story) => (
             <RenderStateRoot>
                 <DependenciesContext.Provider value={storybookDependenciesV2}>
-                    <Story />
+                    {/* Most of our components have an expectation to be
+                        rendered inside of a .framework-perseus container.
+                        We want to make sure we can include it here, since it
+                        can also affect the styling.
+                    */}
+                    <div className="framework-perseus">
+                        <Story />
+                    </div>
                 </DependenciesContext.Provider>
             </RenderStateRoot>
         ),
@@ -59,6 +66,12 @@
                 value,
             })),
         },
+        // Disabling Chromatic snapshots across all stories, since we have
+        // a limited snapshot budget. Set this explicitly to false on
+        // stories that we want snapshots for in their respective files.
+        chromatic: {
+            disableSnapshot: true,
+        },
     },
 };
 

packages/math-input/src/full-keypad.stories.tsx

@@ -5,20 +5,24 @@ import * as React from "react";
 import Keypad from "./components/keypad";
 
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-import type {ComponentStory} from "@storybook/react";
+import type {ComponentStory, Meta} from "@storybook/react";
 
 const opsPage = "Operators Page";
 const numsPage = "Numbers Page";
 const geoPage = "Geometry Page";
 const fracPage = "Fractions Page";
 
-export default {
+const meta: Meta = {
     title: "math-input/Full Keypad",
     parameters: {
         backgrounds: {
             values: [{name: "light background", value: "white", default: true}],
         },
         viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
+        chromatic: {
+            // Visual snapshot testing for all the variants of the keypad.
+            disableSnapshot: false,
+        },
     },
     component: Keypad,
     args: {
@@ -84,6 +88,7 @@ export default {
         },
     },
 };
+export default meta;
 
 const Template: ComponentStory<typeof Keypad> = (
     args: PropsFor<typeof Keypad>,

packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx

@@ -34,13 +34,23 @@ import type {
     PerseusAnswerArea,
     PerseusRenderer,
 } from "@khanacademy/perseus";
+import type {Meta} from "@storybook/react";
 
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
-export default {
+const meta: Meta = {
     title: "PerseusEditor/Widgets/Interactive Graph",
+    parameters: {
+        chromatic: {
+            // Enable chromatic snapshots for all the different
+            // visual cases in these stories.
+            disableSnapshot: false,
+        },
+    },
 };
 
+export default meta;
+
 const onChangeAction = action("onChange");
 
 export const InteractiveGraphWithAriaLabel = (): React.ReactElement => (

packages/perseus/src/__stories__/article-renderer.stories.tsx

@@ -13,14 +13,23 @@ import {
 import ArticleRenderer from "../article-renderer";
 import TestKeypadContextWrapper from "../widgets/__shared__/test-keypad-context-wrapper";
 
-export default {
+import type {Meta} from "@storybook/react";
+
+const meta: Meta = {
     title: "Perseus/Renderers/Article Renderer",
     argTypes: {
         useNewStyles: {
             control: "boolean",
         },
     },
+    parameters: {
+        chromatic: {
+            // Visual snapshot testing for all the stories here.
+            disableSnapshot: false,
+        },
+    },
 };
+export default meta;
 
 export const ASingleSectionArticle = (args: {
     useNewStyles;

packages/perseus/src/__stories__/hints-renderer.stories.tsx

@@ -116,6 +116,13 @@ export const WithAllInteractiveGraphs: Story = {
             },
         ],
     },
+    parameters: {
+        chromatic: {
+            // Visual snapshot testing for this story in particular since
+            // it contains all the different interactive graph types.
+            disableSnapshot: false,
+        },
+    },
 };
 
 export const WithSegmentInteractiveGraph: Story = {

packages/perseus/src/__stories__/server-item-renderer.stories.tsx

@@ -18,11 +18,16 @@ import type {StoryObj, Meta} from "@storybook/react";
 
 type StoryArgs = StoryObj<ServerItemRenderer>;
 
-type Story = Meta<ServerItemRenderer>;
-
-export default {
+const meta: Meta = {
     title: "Perseus/Renderers/Server Item Renderer",
-} as Story;
+    parameters: {
+        chromatic: {
+            // Visual snapshot testing for all the stories here.
+            disableSnapshot: false,
+        },
+    },
+};
+export default meta;
 
 export const NumericInputItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={itemWithInput} />;

packages/perseus/src/components/__stories__/button-group.stories.tsx

@@ -1,3 +1,6 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import ButtonGroup from "../button-group";
@@ -53,3 +56,42 @@ export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
         />
     );
 };
+
+// Putting all of these variants together in one story so that we only need
+// one snapshot test to capture all of them.
+/**
+ * This story shows what the ButtonGroup looks like when
+ * 1. No buttons are selected
+ * 2. A button is selected
+ */
+export const VisualVariants: Story = {
+    render: () => (
+        <View>
+            <ButtonGroup
+                buttons={[
+                    {value: "One", content: "Item #1"},
+                    {value: "Two", content: "Item #2"},
+                    {value: "Three", content: "Item #3"},
+                ]}
+                value=""
+                onChange={() => {}}
+            />
+            <Strut size={spacing.medium_16} />
+            <ButtonGroup
+                buttons={[
+                    {value: "One", content: "Item #1"},
+                    {value: "Two", content: "Item #2"},
+                    {value: "Three", content: "Item #3"},
+                ]}
+                value="One"
+                onChange={() => {}}
+            />
+        </View>
+    ),
+    parameters: {
+        chromatic: {
+            // Enable visual testing on the visual variants of this component.
+            disableSnapshot: false,
+        },
+    },
+};

packages/perseus/src/components/__stories__/graph.stories.tsx

@@ -12,6 +12,12 @@ const meta: Meta = {
     args: {
         box: [size, size],
     },
+    parameters: {
+        chromatic: {
+            // Enable visual snapshot testing for all the stories here.
+            disableSnapshot: false,
+        },
+    },
 };
 export default meta;
 

packages/perseus/src/components/__stories__/lint.stories.tsx

@@ -41,6 +41,12 @@ const meta: Meta = {
             },
         },
     },
+    parameters: {
+        chromatic: {
+            // Enable visual snapshot testing for all the stories here.
+            disableSnapshot: false,
+        },
+    },
 };
 
 export default meta;

packages/perseus/src/components/__stories__/math-input.stories.tsx

@@ -46,6 +46,13 @@ export const DefaultWithAriaLabel: Story = {
 
 export const KeypadOpenByDefault: Story = {
     args: {buttonsVisible: "always"},
+    parameters: {
+        chromatic: {
+            // Enable visual snapshot for this story in paritcular since
+            // it contains all the visual elements for this widget.
+            disableSnapshot: false,
+        },
+    },
 };
 
 export const KeypadNeverVisible: Story = {

packages/perseus/src/components/__stories__/multi-button-group.stories.tsx

@@ -1,3 +1,6 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import MultiButtonGroup from "../multi-button-group";
@@ -50,3 +53,42 @@ export const ButtonsWithTitles: Story = {
         ],
     },
 };
+
+// Putting all of these variants together in one story so that we only need
+// one snapshot test to capture all of them.
+/**
+ * This story shows what the ButtonGroup looks like when
+ * 1. No buttons are selected
+ * 2. Two buttons are selected
+ */
+export const VisualVariants: Story = {
+    render: () => (
+        <View>
+            <MultiButtonGroup
+                buttons={[
+                    {value: "One", content: "Item #1"},
+                    {value: "Two", content: "Item #2"},
+                    {value: "Three", content: "Item #3"},
+                ]}
+                values={[]}
+                onChange={() => {}}
+            />
+            <Strut size={spacing.medium_16} />
+            <MultiButtonGroup
+                buttons={[
+                    {value: "One", content: "Item #1"},
+                    {value: "Two", content: "Item #2"},
+                    {value: "Three", content: "Item #3"},
+                ]}
+                values={["One", "Three"]}
+                onChange={() => {}}
+            />
+        </View>
+    ),
+    parameters: {
+        chromatic: {
+            // Enable visual testing on the visual variants of this component.
+            disableSnapshot: false,
+        },
+    },
+};

packages/perseus/src/components/__stories__/number-input.stories.tsx

@@ -1,3 +1,6 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {action} from "@storybook/addon-actions";
 
 import NumberInput from "../number-input";
@@ -52,3 +55,39 @@ export const SizeNormal: Story = {
         placeholder: "Sample placeholder",
     },
 };
+
+// Putting all of these variants together in one story so that we only need
+// one snapshot test to capture all of them.
+/**
+ * This story shows all the visual variants of the NumberInput component
+ * in one place:
+ * 1. Empty input
+ * 2. Populated input
+ * 3. Input with placeholder
+ * 4. "mini" size
+ * 5. "small" size
+ * 6. "normal" size
+ */
+export const VisualVariants: Story = {
+    render: () => (
+        <View style={{width: 200}}>
+            <NumberInput />
+            <Strut size={spacing.small_12} />
+            <NumberInput value={1234567890} />
+            <Strut size={spacing.small_12} />
+            <NumberInput placeholder="Sample placeholder" />
+            <Strut size={spacing.small_12} />
+            <NumberInput size="mini" />
+            <Strut size={spacing.small_12} />
+            <NumberInput size="small" />
+            <Strut size={spacing.small_12} />
+            <NumberInput size="normal" />
+        </View>
+    ),
+    parameters: {
+        chromatic: {
+            // Enable visual testing on the visual variants of this component.
+            disableSnapshot: false,
+        },
+    },
+};

packages/perseus/src/components/__stories__/sortable.stories.tsx

@@ -8,6 +8,12 @@ const meta: Meta = {
     args: {
         options: ["Option 1", "Option 2", "Option 3"],
     },
+    parameters: {
+        chromatic: {
+            // Enable visual testing on the visual variants of this component.
+            disableSnapshot: false,
+        },
+    },
 };
 export default meta;
 

packages/perseus/src/multi-items/__stories__/multi-renderer.stories.tsx

@@ -57,6 +57,13 @@ export const SingleItem = (args: StoryArgs): React.ReactElement => {
     );
 };
 
+SingleItem.parameters = {
+    chromatic: {
+        // Enable visual snapshot testing for this story.
+        disableSnapshot: false,
+    },
+};
+
 const styles = StyleSheet.create({
     section: {
         backgroundColor: "#F5F5F5",

packages/perseus/src/widgets/categorizer/categorizer.stories.tsx

@@ -4,12 +4,19 @@ import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui
 
 import {question1} from "./categorizer.testdata";
 
-export default {
+import type {Meta} from "@storybook/react";
+
+const meta: Meta = {
     title: "Perseus/Widgets/Categorizer",
 };
+export default meta;
 
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
+export const Question1 = {
+    render: () => <RendererWithDebugUI question={question1} />,
+    parameters: {
+        chromatic: {
+            // Visual snapshot testing for this widget.
+            disableSnapshot: false,
+        },
+    },
 };