Seeking Guidance on Writing Interaction Stories

[eeyzkoj]

Hi there,

I'm currently delving into the world of writing storybook stories with interaction tests, and I'm faced with a decision on the approach. I've identified two main options and was hoping to get some insight into which one is generally recommended.

1. The first option involves embedding the play function along with each story. However, I've noticed that this makes the testing process visible whenever you open a story, which can be a bit distracting. I did consider adding a timeout to make it visually appealing, but then the component becomes inactive until the tests are complete.
2. The second option is to have a separate story dedicated to running the tests. The downside here is that it doesn't showcase anything new; it essentially just runs the tests. Also, the interaction tests tab remains empty on stories that don't include the play function.

I'm curious if there's a middle ground where tests aren't run by default, and only initiate when the user navigates or clicks on the interaction tabs. This seems like a potential solution, but I haven't been able to find a way to implement it.

I'd greatly appreciate your thoughts and any recommendations you might have on the matter. How do you usually approach this in your experience?

Thanks in advance for your help!

[ShaunEvening]

Hey @eeyzkoj 👋

This is a really great question! Right now I don't believe there is any way to only run interaction tests when you hit play or option the interactions panel. Although, that is an awesome idea for us to consider.

I have seen some teams write separate stories for their interaction tests and leave them in a sub folder named "tests" for each component so the extra stories don't clutter up the side bar, which seems like a possible workaround for you in the mean time. However, this presents a flaw in the idea that your stories should be able to function as your tests as well without extra effort.

[eeyzkoj]

Hi @integrayshaun ,

We implemented a similar approach by organizing our interaction tests separately and I completely agree that having the ability to selectively run interaction tests would be a fantastic feature.

Thanks for your thoughtful input!

[manandkumaar]

@eeyzkoj @ShaunEvening seems you implemented a solution or workaround. Could you please share your approach of organizing interaction tests separately?

Any references or suggestions regarding this would be greatly appreciated. Thanks

[eeyzkoj]

@manandkumaar if you're dealing with the same issue, Storybook v8.5 has some great improvements! Check out this article and the docs for more info:
https://storybook.js.org/blog/storybook-8-5/
https://storybook.js.org/docs/writing-tests/test-coverage?ref=storybookblog.ghost.io#with-storybook-test