Storybook: Integration between addon-storyshots and addon-viewport

[aircraft721]

Support request summary

Is it possible to generate image snapshots for every viewport that is defined by addon-viewport?

Please specify which version of Storybook and optionally any affected addons that you're running

• storybook/addon-viewport 3.4.5
• storybook/addon-storyshots 3.4.5

[igor-dv]

The short answer is no.
You can try to run image storyshots against several builds of storybook. Each build will have a different default value of the viewport (maybe based on some env variable).

[igor-dv]

If anyone wants to propose here, you are welcome =). Meanwhile closing this.

[taygrave]

@aircraft721 did you come up w/ a custom solution for this? and or @igor-dv would you reconsidering reopening this support request? would also like to integrate snapshots w/ add-on viewports.

[aircraft721]

No, I didn't manage to come with a custom solution.

[pxwise]

This would be a valuable feature to detect regressions that only exist at certain viewport widths. Any thoughts on what the code solution to integrate addon-viewports with storyshots might look like?

[igor-dv]

Again, it is possible, it's just not out of the box feature (I don't think that coupling between addons in a core level is a good solution).

Approach 1

Steps:
1) Generate static storybook for the different states of the viewport - could be done with a custom env variable
2) Run storyshots against those static versions. 🤷‍♂️

Approach 2

By using this new feature, you can define a default value of the viewport inside the test.

Edit: After a bit of thinking, 2 will work for the regular snapshots. Anyway, I will write some example tutorial of 1.

[igor-dv]

I wrote a post in Medium about that, but It will take some time to shape it. Just wanted to make you know=)

[taygrave]

@igor-dv - Do you mean a new Medium post or are you referring to adding the functionality to storybook as taking some time?

[igor-dv]

A new Medium post

[igor-dv]

Ok, here it is =)

And if you are lazy to read, the example repo is here