Replies: 5 comments
|
Hi @CMadden8. We're trying to do something similar to what you're doing, and we were hoping we could take a look at what you've done so far and how it works. So far, we've taken a different approach (we're using React and playwright btw), and we're just running the storybook server, and pointing playwright to the iframe of that story, and testing with a browser. We'd like to see if we could do it without opening a whole browser, and we stumbled on your solution |
|
Hi @tzikis - someone else asked me about the above there today on another thread, and I answered it in detail there: CMadden8/storybooknx#1 |
|
Are you able to post the source of your solution to a repo? I'm exploring the same thing and would rather not duplicate your work if possible. |
|
Hello 👋 https://github.com/lotun-io/vitest-cucumber Working example with storybook interaction tests executed by cucumber can be found here |
|
nice! that's interesting, thanks for sharing it |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
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:
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:
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.
All reactions