Storybook is the UI Development Environment that I've been looking for. You can:
- Manually Test
- Automate Visual Test
- Produce a Static output of the Storybook that can be hosted/shared
- Plus much more with these addons or you can create your own
The Storybook devs have put in a good amount of effort but there were some issues on getting it working in Emberjs. I hope with this post, I can share my setup so we can make it easier in the future.
Notable links that helped me setup the project:
yarn can be switched for
- Yarn scripts can be found in the package.json
1) Install the dependencies and add the scripts
2) Setup the Storybook config files
3) Write some stories
4) Run Ember and Run Storyboard
$ yarn start
$ yarn storybook
- NOTE: had issues making this one command so thats why it they are separate commands that should be ran in different terminals.
5) Configure Jest & write some jest image snapshot tests
6) Create a share able Storybook distribution
- Knobs lets you create color pickers, dropdowns and ability to change text. Great for manual testing during development.
- Notes Allows you to document the component
- Viewport allows you to visualize the look on different screens.
Still new to Storybook and know this wasn't an in depth tutorial so tweet at me if you need help or want to see more.
Lets chat on Twitter
Leave a comment by replying this tweet.