4 ms·

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

by xrd 6y ago

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.

city41 6y ago
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.
ghengeveld 6y ago
Check out Chromatic if you want CI for Storybook.
DrBazza 6y ago
Jetbrains use Storybook and capture screenshots of the UI and automatically (visually) diff them. https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-do-we-test-it/ https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-...
winkerVSbecks 6y ago
Storybook pairs extremely well with https://www.chromatic.com 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.
- dbbk 6y ago
  It actually pairs well because this is a SaaS service run by the maintainers of Storybook.
spankalee 6y ago
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.
- xrd 6y ago
  Is any of that system open source? It would be interesting to see the difference between that and storybook.
  - spankalee 6y ago
    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.
    - mleonard 6y ago
      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)
getpolarized 6y ago
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.
- zol 6y ago
  Yes, it can
wdb 6y ago
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?
- Dylanlacey 6y ago
  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 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-storybook https://storybook.js.org/docs/react/workflows/testing-with-s...

by xrd 6y ago

city41 6y ago

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.

ghengeveld 6y ago

Check out Chromatic if you want CI for Storybook.

DrBazza 6y ago

Jetbrains use Storybook and capture screenshots of the UI and automatically (visually) diff them. https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-do-we-test-it/ https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-...

winkerVSbecks 6y ago

Storybook pairs extremely well with https://www.chromatic.com 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.

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

spankalee 6y ago

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.

xrd 6y ago
Is any of that system open source? It would be interesting to see the difference between that and storybook.
- spankalee 6y ago
  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.
  - mleonard 6y ago
    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)

getpolarized 6y ago

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.

zol 6y ago
Yes, it can

wdb 6y ago

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?

Dylanlacey 6y ago
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 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-storybook https://storybook.js.org/docs/react/workflows/testing-with-s...