Storyshots does it really checks based on screenshots?

[AlexanderTserkovniy]

Hi guys,

Sorry for bothering you with such a silly question, but I can't make heads of the comparison feature of the addon.

In all the examples (in README.md of Storyshots project and in the Jest snapshot testing) is shown only the process of comparing attributes and text inside a component.

But what about CSS and Styling?

What if I change padding from let's say 16px to 0 I bet the component will change significantly, so what should the snapshot do then? Pass test or fail down? I am 100% that it must fail, because just comparing a screenshot with another screenshot will show the underlying difference.

I mean I have checked it, it really gives:

 PASS  .storybook/storyshots.test.js
  Storyshots
    Button
      ✓ With text (26ms)

I cannot believe that it bothers only me, there must me someone else, who asked the same question.

Thanks for the answering in advance.

[Hypnosphi]

Storyshots are not visual screenshots, they are rather snapshots of your React tree. So they won't detect a difference in styling unless those styles are inline.

There are multiple tools for visual diffing that can be used with storybook, maybe @ndelangen can tell you more about options that you have

[ndelangen]

You can roll-your-own using something like https://github.com/GoogleChrome/puppeteer
or you could use a premade SAAS solution like https://percy.io/ or https://screener.io/

[AlexanderTserkovniy]

Ah I see, thanks guys. What do you think about Gemini, should it work as screenshots checker?

[Hypnosphi]

Sure, you need to

.setUrl('iframe.html?selectedKind=Button&selectedStory=With%20text')

in your button.gemini.js

Actually I was working on a tool that creates a gemini config authomatically based on stories tree form storyshots addon

[AlexanderTserkovniy]

Actually I was working on a tool that creates a gemini config authomatically based on stories tree form storyshots addon

And how is it going now?

[Hypnosphi]

Here's the snippet I use for generation:

for (const {kind, stories} of items) {
  gemini.suite(kind, () => {
    for (const story of stories) {
      gemini.suite(story, suite => {
        suite
          .setUrl(`iframe.html?selectedKind=${kind}&selectedStory=${story}`)
          .setCaptureElements('#root')
          .capture(story)
      })
    }
  })
}