Experiment with @storybook/interactions addon

[kevinbarabash]

Summary:

@storybook/interactions allows you to write tests using @testing-library within Storybook stories. If a story has a test, it will show up in the "Interactions" panel and will be run when you view the story. This PR also enable the interactive debugger which allows you to step through, as well as rewind, the test.

It is possible to import the tests from storybook files into our jest unit tests and run them there ~but this will require update @testing-library/user-event to a more recent version. The version that @storybook/interactions provides, uses an async API whereas the one we're using for our tests is not.~ This currently doesn't work with the test I added in this PR. This is b/c tests written using @storybook/interactions use async/await within the test and simulating events on the birthday picker doesn't work when there are pauses after each interaction. This will likely require a fix in the dropdown component itself. This is may be related to an issue we say when simulating events on dropdowns in cypress tests failing in certain scenarios.

The reason why @storybook/interactions tests use async/await is to enable stepping through the test one action at a time from the Storybook UI.

Issue: None

Test plan:

• yarn storybook
• http://localhost:6061/?path=/story/birthdaypicker--birthday-picker-default
• step through the test

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 1ae00856a6411a54c389e935e73515373880ba9b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to package.json, yarn.lock, .storybook/main.js, .storybook/preview.js, packages/wonder-blocks-birthday-picker/src/components/__docs__/birthday-picker.stories.js

---

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

[netlify[bot]]

✅ Deploy Preview for wonder-blocks ready!

Name	Link
🔨 Latest commit	1ae00856a6411a54c389e935e73515373880ba9b
🔍 Latest deploy log	https://app.netlify.com/sites/wonder-blocks/deploys/632533c6958ae10008511c01
😎 Deploy Preview	https://deploy-preview-1599--wonder-blocks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions[bot]]

Size Change: 0 B

Total Size: 74.3 kB

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.52 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	894 B
packages/wonder-blocks-button/dist/es/index.js	2.82 kB
packages/wonder-blocks-cell/dist/es/index.js	1.92 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.07 kB
packages/wonder-blocks-color/dist/es/index.js	1.01 kB
packages/wonder-blocks-core/dist/es/index.js	3.17 kB
packages/wonder-blocks-data/dist/es/index.js	6.1 kB
packages/wonder-blocks-dropdown/dist/es/index.js	11.5 kB
packages/wonder-blocks-form/dist/es/index.js	4.88 kB
packages/wonder-blocks-grid/dist/es/index.js	1.37 kB
packages/wonder-blocks-i18n/dist/es/index.js	4.46 kB
packages/wonder-blocks-icon-button/dist/es/index.js	1.75 kB
packages/wonder-blocks-icon/dist/es/index.js	2.43 kB
packages/wonder-blocks-layout/dist/es/index.js	1.74 kB
packages/wonder-blocks-link/dist/es/index.js	1.62 kB
packages/wonder-blocks-modal/dist/es/index.js	4.92 kB
packages/wonder-blocks-popover/dist/es/index.js	4.14 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.24 kB
packages/wonder-blocks-spacing/dist/es/index.js	158 B
packages/wonder-blocks-testing/dist/es/index.js	3.64 kB
packages/wonder-blocks-timing/dist/es/index.js	1.61 kB
packages/wonder-blocks-toolbar/dist/es/index.js	855 B
packages/wonder-blocks-tooltip/dist/es/index.js	4.76 kB
packages/wonder-blocks-typography/dist/es/index.js	1.24 kB

_{compressed-size-action}

[codecov[bot]]

Codecov Report

Merging #1599 (1ae0085) into main (e936440) will not change coverage. The diff coverage is n/a.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1599   +/-   ##
=======================================
  Coverage   97.04%   97.04%           
=======================================
  Files         208      208           
  Lines        4534     4534           
  Branches     1353     1353           
=======================================
  Hits         4400     4400           
  Misses        134      134           

---

Continue to review full report at Codecov.

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

[jandrade]

Closing it in favor of #1658. We can probably revisit the BirthdayPicker later (cc @kevinbarabash).