search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.96k stars 9.22k forks source link

What about having a way to generate (click) snapshots for specific knob variables in the frontend. #4103

Closed brunoreis closed 5 years ago

brunoreis commented 6 years ago

I'm thinking in a workflow where I set some dynamic data on my component and click to freeze that data in a component that can be snapshotted.

Maybe I can create it in a new storybook stories dir/config.

That could be nice to change knob values and grab snapshots of the actual values. The same would be very helpful for ApolloMocked provider. To grab some dynamic data and transform it into a mocked data in the "snapshots" stories dir.

The ideal world scenario would be having an icon on that stories list showing that some tests are failing.

Do those things make sense? Do you like the idea? What is the path to get there?

I can help to code it.

andrei-ilyukovich commented 5 years ago

I have the similar question regarding making screenshots for all possible knobs selected/updated. Right now storybook can make screenshot only for default component state, which doesn't cover all possible variants. Is it possible to update storyshots addon to make this real somehow?

ndelangen commented 5 years ago

@brunoreis Yeah I've been thinking about these sort of functionality as well.

Saving a knob-state into a story sounds awesome.

We could start simple: We add a tool-button to the knobs panel. When clicked this button would show the code that you'd have to write to add to your storyfile.

In order to write to the actual file, we'll need to add an api from manager to server. We do not have such an api yet.

Let's schedule a call about this @brunoreis.

Join our Discord so we can chat? https://discord.gg/sMFvFsG

ndelangen commented 5 years ago

@andrei-ilyukovic seems to me you should write stories for those examples then?

andrei-ilyukovich commented 5 years ago

@andrei-ilyukovic seems to me you should write stories for those examples then?

I could but then I don't need to use knobs at all...and having a lot of stories for only one component doesn't look good to me, it is a mess. To my mind it is much better to use knobs functionality instead.

brunoreis commented 5 years ago

@andrei-ilyukovich, this is interesting because when I opened this task I was think similar to you but using it more I started to understand similar to @ndelangen that it's good to have multiple stories.

Even because otherwise you would create a new kind of entity or pseudo entity (a mock variation story) with no correspondence to a file or code and that sure would add a lot of complexity to SB.

One simple and not directly thing that helped me a lot to accommodate multiple variations of a component story on my mind was was discovering that I can nest stories into a deep hierarchy using "/" in story type names. If you already figured that out, won't make a difference. But, otherwise, will help you to organize things.

brunoreis commented 5 years ago

@ndelangen, I was on vacation and only today I'm able to answer you. I'm glad you liked that idea and I'm indeed writing a code generator for my own needs now where a wrote a very simplistic node route to write generated code on the server.

Next week would be great because I need to get myself into flow again. And do some days of daily job with that functionality in mind so that I can contribute with better ideas to this.

ndelangen commented 5 years ago

Yeah, join the discord and send me a PM, so we can discuss a bit faster/easier?

brunoreis commented 5 years ago

@ndelangen, I'm almost not using knobs in the actual workflow I'm in. I was waiting to be sure I had some real world need to tell you about regarding this task, but in fact I'm favoring other approaches than knobs here. I have a testData dir with "fixtures" and create a single story for every one. Most of them indeed are fed by Apollo mocked queries and mutations.

ndelangen commented 5 years ago

Related: #4996

stale[bot] commented 5 years ago

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] commented 5 years ago

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap 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!