Gherkin/Cucumber for Storybook Interaction Tests

[CMadden8]

Is your feature request related to a problem? Please describe.

The idea is based on the cucumber preprocessor library for Cypress: https://github.com/badeball/cypress-cucumber-preprocessor

Currently the issue with Storybook interaction tests is that even with a custom util library, they require a lot of code - just like default Cypress.

I've been able to recreate the Cypress cucumber preprocessor for Storybook with just two libs:

1. https://www.npmjs.com/package/@cucumber/gherkin
2. https://www.npmjs.com/package/@cucumber/cucumber-expressions

I've used the markdown version of the feature files, which is ideal for Storybook. As we can now write the tests in markdown gherkin - and then import them to the storybook docs and have fully-formatted gherkin that business analysts etc can read via Storybook docs.

Describe the solution you'd like

The current solution creates a new Story object. And then passes the feature file content and the story name to a custom cucumber method using https://www.npmjs.com/package/@cucumber/gherkin

I use the gherkin tags to target the story. So I tag the scenario with eg 'SomeStory' and the name on the Story object is 'SomeStory'.

If there's a match, then it singles out the JSON for this scenario.

From there, it's just a matter of creating the expressions with https://www.npmjs.com/package/@cucumber/cucumber-expressions.

And then processing the matches and gherkin variables and dataTables etc.

The issue is that there's a modest level of 'workarounds' required, as Storybook is not really built for this out-of-the-box.

Namely:

1. You need to create a new Story object for each scenario in your feature file. The code, though minimal, is repetitive.
2. You need to tag the scenario with the name of Story to isolate the JSON for that scenario - it's again moderately hacky

If you test it out yourselves, you'll see it's quite simple to implement this feature with Storybook (it's almost perfect for it, especially the fact that it formats the markdown gherkin via the docs prop).

But I think that dedicated support for the feature would simplify this even further.

It would be useful to remove the need to tag the scenarios with the Story name and the need to create a new Story object for each scenario.

You'd be writing almost zero code outside the decorator boilerplate and the MSW intercepts.

For the record, we're using Angular and Storybook within an NX repo.

Describe alternatives you've considered

None exist that I know of for Storybook.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

As mentioned, I have this working with the libraries I mentioned.

Even though it's hacky in some cases, the code was straightforward to implement. And even with the requirement of a few 'workarounds', the story files are virtually devoid of code.

I can definitely help out with any questions you might have.