Replace interactive graph snapshot tests with Storybook stories

[benchristel]

Summary:

There is a problem with using Jest snapshot tests to test Mafs: Mafs
uses globally autoincrementing IDs for some of its elements, so when
new tests are added to a suite, the IDs shift and all later snapshot
tests fail.

To work around this, I've removed the problematic Jest snapshot tests
and replaced them with Storybook stories.

These stories will be run as visual snapshot tests on Chromatic,
providing similar regression protection with hopefully less test
flakiness.

Issue: LEMS-1975

Test plan:

Watch CI run and accept the baselines for the new stories on Chromatic.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/heavy-hats-sleep.md, packages/perseus/src/widgets/__stories__/interactive-graph-regression.stories.tsx, packages/perseus/src/widgets/__tests__/interactive-graph.test.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.test.ts, packages/perseus/src/widgets/interactive-graphs/interactive-graph-question-builder.ts, packages/perseus/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (2e49ecb) and published it to npm. You
can install it using the tag PR1289.

Example:

yarn add @khanacademy/perseus@PR1289

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1289

[github-actions]

Size Change: 0 B

Total Size: 839 kB

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-editor/dist/es/index.js	268 kB
packages/perseus-error/dist/es/index.js	877 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/index.js	403 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[Myranae]

Looks good~ I see the regression tests in the UI Tests area of the PR checks. Also the publish to chromatic step was successful! So after this, the goal is for everyone to not make any more Jest snapshot tests but to instead use these Storybook regression tests, right? Also, looks like some checks are failing, but they don't seem to be related to this PR specifically.

[benchristel]

the goal is for everyone to not make any more Jest snapshot tests but to instead use these Storybook regression tests, right?

You can write Jest snapshot tests for individual components. It's just the main MafsGraph component that's the problem — MafsGraph renders the axis grid, which uses autoincrementing IDs.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.29%. Comparing base (5b52a15) to head (2e49ecb).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1289      +/-   ##
==========================================
+ Coverage   69.11%   70.29%   +1.18%     
==========================================
  Files         476      481       +5     
  Lines      101779   101908     +129     
  Branches     7269    10929    +3660     
==========================================
+ Hits        70341    71634    +1293     
+ Misses      31259    30274     -985     
+ Partials      179        0     -179     

Files	Coverage Δ
...ctive-graphs/interactive-graph-question-builder.ts	100.00% <100.00%> (ø)

... and 146 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5b52a15...2e49ecb. Read the comment docs.

[jeremywiebe]

I would love (or would have loved) to find a different solution for this. This means folks now have to be aware that some tests can use Jest snapshot tests and some Storybook visual snapshot tests.

I know Jest supports custom Property Matchers for snapshots, but I haven't seen how to configure this globally.