Allow for extra interaction testing beyond the "play" function

[scottrippey]

Interaction testing for Storybook is a game-changer! I've been using it heavily on a large project, and it's an incredible developer workflow.

I'd like to suggest an improvement, to make component testing even more powerful!

The Problem:

It's hard to strike a balance between "Creating Stories" and "Writing Tests".

When creating Stories for a component, each Story represents a certain "state" of the component. For example, a Form component would have stories for "Initial", "Filled", "Validation Errors", and "Submitted".

When writing Unit Tests for a component, I want to achieve "full coverage" of my component, so I like to write MULTIPLE tests for each of these states. For example, I'll test various Validation Errors, various network errors, different auto-complete, and so on.

So the problem is: I want to write more tests, but I don't want them all to show up as their own stories.

[scottrippey]

Proposal: Separate play and test methods

Currently, each story only has a single play function.
It would be fantastic to support multiple "play"-like functions on a component, so that multiple scenarios can be tested.

When the story loads in the UI, only the default "play" function will be executed (setting up the Story state).
But in the Addons panel, there would be a way to execute each of the test functions.
The Test Runner would automatically run all test functions.

Examples

There are many ways to shape the API, so this is a loose suggestion.

Here is a set of tests, alongside the play function, with a similar signatures:

export const FilledForm = {
  async play({ canvasElement }) {
    const container = within(canvasElement);
    await userEvent.type(container.getByTestId('email'), '[email protected]');
    await userEvent.type(container.getByTestId('name'), 'John Doe');
  },
  tests: {
    async 'button is enabled'({ canvasElement }) {
      const container = within(canvasElement);
      expect(container.getByTestId('submit')).toBeEnabled();
    },
    async 'submit button is disabled when clicked'({ canvasElement }) {    
      const container = within(canvasElement);
      await userEvent.click(container.getByTestId('submit'));
      expect(container.getByTestId('submit')).toBeDisabled();
    },
  }
}

[IntusFacultas]

Plus one, this would drastically increase my usage of interaction tests. As it currently stands, I'm largely sticking with Jest DOM tests because of this exact issue, which sucks because Interaction tests are so much more debuggable.

[surecloud-tstafford]

We've just started trying to use interaction tests as well. We are quickly finding its not suitable for multiple scenarios and would also love to see how to write many scenarios on one component.

Currently trying to solve it with steps (but this is not quite right). It would be great if you could just write multiple it('should...") style tests inside the play function and then also have the ability to run one at a time in storybook by clicking the assertion text.

At the moment using steps this doesn't quite line up properly and clicking through them to run one by one is problematic since they dont appear to nest correctly under the parent text:

[yannbf]

would you mind opening an issue with a reproduction regarding the indentation not working?

[LaFrimousse]

What is the status now? Has an issue been open yet ?