diff --git a/.changeset/wise-dragons-prove.md b/.changeset/wise-dragons-prove.md new file mode 100644 index 0000000000..3996b729a8 --- /dev/null +++ b/.changeset/wise-dragons-prove.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +[Chromatic] Disable snapshots globally, only keep regression stories diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 48acda3d48..12a165a3f0 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -43,4 +43,3 @@ jobs: token: ${{ secrets.GITHUB_TOKEN }} projectToken: ${{ secrets.CHROMATIC_APP_CODE }} autoAcceptChanges: "main" - onlyStoryFiles: "**/*regression.stories.tsx" diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f8b0be0799..fea85bca3c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -23,7 +23,14 @@ const preview: Preview = { (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. + */} +
+ +
), @@ -59,6 +66,12 @@ const preview: Preview = { 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, + }, }, }; diff --git a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-regression.stories.tsx b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-regression.stories.tsx index d8d03bb7f0..f036e9dab8 100644 --- a/packages/perseus/src/widgets/interactive-graphs/interactive-graph-regression.stories.tsx +++ b/packages/perseus/src/widgets/interactive-graphs/interactive-graph-regression.stories.tsx @@ -6,12 +6,22 @@ import {mockStrings} from "../../strings"; import {interactiveGraphQuestionBuilder} from "./interactive-graph-question-builder"; import type {PerseusRenderer} from "../../perseus-types"; +import type {Meta} from "@storybook/react"; type StoryArgs = Record; -export default { +const meta: Meta = { title: "Perseus/Widgets/Interactive Graph Visual Regression Tests", + parameters: { + chromatic: { + // We want snapshots for these regression tests, so that + // visual differences can be caught if there are any + // unexpected changes. + disableSnapshot: false, + }, + }, }; +export default meta; export const MafsWithCustomAxisLabels = ( args: StoryArgs,