Storybook + Test Pilot = ❤
As a web site, Test Pilot can look deceptively simple. We offer experimental features for Firefox, along with an archive of past experiments. Experiment detail pages give details on how each feature works, what we measure, who’s working on it, and how to get involved. A nice, simple web site that definitely isn’t an application.
Oh, but there’s also the button to enable an experimental feature. It shows up if you’ve already installed the Test Pilot add-on. If you haven’t, then we offer to install both Test Pilot and the experiment in one click. Unless, of course, you aren’t using Firefox. Or, if you aren’t using a supported version of Firefox. Then, we invite you to install Firefox or upgrade.
Suffice to say there are many variables affecting what we display. In working on the site, we need to see every variation. But, it can be laborious to arrange things such as the current date & time, browser vendor & version, locale, and add-on install state.
Luckily, we don’t have to do that. Our site is built with React components — what they display is based on their parameters. On the live site, these parameters come from real sources like your browser & site content. But, we can also supply artificial data.
This is where Storybook comes in: Storybook enables us to rig up components with predefined scenarios — “what if” stories akin to unit tests. But, instead of a pass/fail report, we see how things look & act. And, since these stories are expressed in code, everything is repeatable.
Better yet, Storybook is based on Webpack and Hot Module Replacement. Changes appear quickly: No rebuilds, no reloads, no tedious interaction. Just edit files and watch.
Storybook can also produce static snapshots. This is handy for comparing different points in project history and changes proposed in Pull Requests.
In fact, we’ve added Storybook to our build process: Alongside linting & tests, a Storybook snapshot is built and published to an Amazon S3 based website for almost every commit to our Github repository. We even post comments every time a related pull request is updated.
There are wrinkles, of course. But, they’re not really the fault of Storybook so much as our build system. We have to massage the generated snapshot a bit. We should be able to do less of that as we move more of our build process to Webpack.
Additionally, we deploy Storybook snapshots only for commits pushed to our main repository by core collaborators. Otherwise, anyone could submit a pull request to our project and cause whatever they want to be published to our development site.
If you’d like to help out, we have a few open issues to enhance the process. We’d also like to rework & package this stuff to be used in other projects. If you’re working on a React-based web site or application, we recommend Storybook. We’ve found it to be just as valuable as unit tests, syntax linting, and type validation.
