Reflect render errors on left panel

[RohovDmytro]

I have a proposal, but I want to hear others opinions before working on a PR.

Note: in my app I don't have tests, I don't have prop-types defined and don't use flow / typescript.

Proposal

Display a visual clue near stories that failed to render.

So left panel would be something like a test-runner for different states of a container with a fast visual feedback.

We can apply some optimisations to ensure that we don't render every component with every state on every change. For example, check only states of a selected StoryName.

Kind of example 😺

• StoryName
  • state 1
  • state_2
  • state_3 [badge_!_]
  • state_4

Workflow

While working with a component and writing it's state_n variant, we can quickly see that we broke some of its other states.

For me it feels like writing storybook-tests, somewhat in a jest-way. If that make sense 😺

But I'm so new to storybook so I am full of doubts. 😺 Your thoughts?

[tmeasday]

Have you considered using storyshots to achieve this? If you aren't interested in the full snapshot tests I'm working on a feature to just check for exceptions, as you've mentioned: #917

[tmeasday]

See #1034

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hey there, it's me again! I am going to help our maintainers close this issue so they can focus on development efforts instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!