[RFC]: Add Storybook Interaction Addon to RWFW

[MichaelrMentele]

Summary

Add interaction package to storybook default config.
https://storybook.js.org/addons/@storybook/addon-interactions

#storybook.config.js 

module.exports = {
  ...
  addons: ['@storybook/addon-interactions'],
}

Motivation

Storybook stories are great but they are always silently getting broken because there is no default way for them to get tested. Out of the box you won't know until you open that story in storybook and notice -- woops, it's borked. Could be props changed. Could be the query changed and the mock doesn't make sense. Could be a lot of things.

Detailed proposal

Two options:

• bake it in:
  • add the interactions add-on to the framework
  • add a test command for these tests
• write a recipe
  • show how you can generate the config override and add the add-on
  • show an example of hooking it up into CI
  • show an example of adding to package.json

The downside to adding this to the FW is you need Playwright which is a large dependency.

NOT including is creates a frustrating experience (can't trust stories, stories always borked)

Are you interested in working on this?

• I'm interested in working on this

[MichaelrMentele]

Basic way of adding to command to package.json:

# package.json
{
  ...
  "scripts": {
    "test-storybook": "test-storybook --url http://localhost:7910/ --config-dir \"${PWD}/../node_modules/@redwoodjs/testing/config/storybook/\"",
    "test-storybook:ci": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn rw sb\" \"npx wait-on tcp:7910 && yarn test-storybook\""
  },
}

[virtuoushub]

Any chance smoke testing can help here? It is already available without adding a dependency.

--smoke-test

https://storybook.js.org/docs/react/api/cli-options#start-storybook

---

Also a lower lift might be https://storybook.js.org/addons/@storybook/addon-storyshots if the problem trying to be solved is:

there is no default way for them to get tested

With interaction testing, basically the onus is on the developer to keep the interaction test up to date which is more work than generating snapshots.

[MichaelrMentele]

The problem to be solved is stories break obscurely -- from the docs it's not obvious that --smoke-test prevents broken stories? Just that is checks config? Or am I missing something.

[MichaelrMentele]

This may be FW overreach and perhaps a recommendation or cookbook doc would solve the problem.

[virtuoushub]

The problem to be solved is stories break obscurely -- from the docs it's not obvious that --smoke-test prevents broken stories? Just that is checks config? Or am I missing something.

I think the smoke test CLI option is supposed to make those types of obscure breaks in stories surface immediately ( as in, make the breaks not obscure at all ).

Not sure if it does fully catch all cases, which is where an add-on such as storyshots come in. The idea with something like that is you "snapshot" a baseline of your stories in a working state; and anytime there is a breaking changes, the snapshot tests fail and you are notified.

That being said, I believe the recommended advice from the @storybookjs folks is to leverage your aforementioned interaction testing addon instead these days. @shilman , @yannbf, any advice for @MichaelrMentele ?

---

cc @jtoar - w/ Storybook 7 around the corner, we might want to revisit which addon's we have an opinion on installing by default. Ancillary to that, we also will most likely want to make sure we allow some sort of escape hatch for users to totally override our opinion and install just what the want.

These days, I hesitate to auto install storybook addons in the core framework because we have gotten issues where framework user's don't want what we install; and afaik there is currently no way for them to opt out (see #6854).