Storybook 6.0 your new favourite tool for front-end development

Re:Storybook 6.0 your new favourite tool for front-end devel... by xrd on Wednesday August 12, 2020 @11:38AM (#24133124)

Many teams struggle to write tests for their UI. It's a hard problem to solve, a mixture of culture challenges and technology challenges.

Tests show how pieces work together outside of the small confines of a live system. If you don't write tests, you probably aren't considering all the ways you component can work outside of the narrow confines when you, as the author, wrote and tested it. And, you probably can't consider how another developer will use your component and change the environmental code around it.

Storybook gives you all the benefits of tests in that you can pull out pieces and play them back in isolation. I see all the benefits of tests (except that I don't see the results in CI) when using storybook and refactoring. Broken stories tell me a lot about code problems.

Storybook is UI testing done right, we just needed to brand it as a story rather than a test. ;)

Congratulations on a big milestone. This is an incredible piece of software that I use on all my projects.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by DrBazza on Wednesday August 12, 2020 @11:57AM (#24133343)

Jetbrains use Storybook and capture screenshots of the UI and automatically (visually) diff them.

https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-...

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by winkerVSbecks on Wednesday August 12, 2020 @12:07PM (#24133451)

Storybook pairs extremely well with https://www.chromatic.com to give you that great test automation experience. Essentially Chromatic runs visual diffing for all your stories. You can run them on multiple browsers and even for multiple view port sizes.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by dbbk on Wednesday August 12, 2020 @03:17PM (#24135685)

It actually pairs well because this is a SaaS service run by the maintainers of Storybook.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by city41 on Wednesday August 12, 2020 @11:46AM (#24133200)

Storybook is also a nice launching point for visual diffing. At my previous job we used a tool that ran all of our stories and did an image diff. It makes catching css regressions much easier. There are some challenges, for example when I had left we still hadn't fully found a solid way to diff the components in interactive states, but even without that it was very useful.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by spankalee on Wednesday August 12, 2020 @12:08PM (#24133460)

We recently did this inside Google for LitElement (our web components library). We wrote a small Storybook-like system that pulls from the monorepo, and checked-in stories can both be displayed in a visual catalog, as well as run as visual regression tests. They can also be used for live development with our hot reload server.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by xrd on Wednesday August 12, 2020 @01:06PM (#24134162)

Is any of that system open source? It would be interesting to see the difference between that and storybook.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by spankalee on Wednesday August 12, 2020 @02:19PM (#24135060)

No, and I'm not sure it would be. It's a very small subset of Storybook, and offloads all dependency management and build aspects to the build system of the monorepo (like Bazel).

The story format is a combination of a small container for story templates and knob definitions, then a custom element that can render stories. Maybe we could release that on an as-is basis.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by mleonard on Wednesday August 12, 2020 @07:04PM (#24138114)

Hi Justin. I'd be very interested in seeing that custom element! If you're able to work to get that open sourced that would be amazing. (Interested as a user of both litelement and bazel)

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by ghengeveld on Wednesday August 12, 2020 @11:46AM (#24133207)

Check out Chromatic if you want CI for Storybook.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by wdb on Thursday August 13, 2020 @01:17PM (#24145707)

I am not following how you can use Storybook for testing? I think it's mostly a dummy renderer of your components? I don't see any easy way to put a component in a specific interactive state forcing code in the component to support this.

Would someone run the Storybook pages through something like Cypress?

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by Dylanlacey on Sunday August 16, 2020 @09:16PM (#24182861)

Storybook lets you permutate the inputs you can give a component, letting you verify the results are correct in a variety of ways.

I work for Sauce Labs, so I'm most familiar with combining Storybook with Screener (https://screener.io/v2/docs). Our integration lets you provide a set of interactions to take to change a component state, then does sophisticated layout, content, and structure comparisons.

The official docs for testing with Storybook have a range of other ways you can use it to test your components: https://storybook.js.org/docs/react/workflows/testing-with-s...

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by getpolarized on Wednesday August 12, 2020 @02:47PM (#24135385)

Does/can it integrate with CI? This is what I need now. While I want full integration testing I'd like to have stories/unit tests for UI components too.

[ Parent | on HN ]

Re:Storybook 6.0 your new favourite tool for front-end devel... by zol on Wednesday August 12, 2020 @04:48PM (#24136791)

Yes, it can

[ Parent | on HN ]