Each one of these addons will guarantee you’re thoroughly testing your components and give you a constant feedback loop.
Storybook is one of the best tools for building components separately from your app. It allows you to work on a component in isolation and mock out variations for each component. Storybook becomes an even more powerful and useful tool with the addition of their addons.
When starting any project, it’s important to consider accessibility, testing, and edge cases so you can deliver the best product possible. In this article, I’ll go over a few of my favorite addons for Vue Storybook to help you build quality components and improve your workflow.
- a11y addon
- Percy addon
- Controls addon
- Jest addon
- StoryShots addon
- Even more addons
a11y addon
Accessibility is a hot topic right now in web development and it’s critical to build accessibility into every project. The a11y addon should be one of the first things you install to your Storybook project. It’s built on the axe rules by Deque Systems.
Rather than analyzing accessibility issues page by page, you can see accessibility issues for each component with the a11y addon. This addon adds an accessibility tab that shows three other labels for violations, passes, and incomplete. Each rule will show more information on the issue and provide a link for how to fix the problem. Clicking on the “Highlight results” checkbox to the right of each violation will show you where this violation occurs in your component.
Using this addon in the early stages of development will help to make sure accessibility is not an afterthought in your development process. Since it can be time-consuming and costly to fix accessibility issues after the components are already built, it’s best to have a tool that will validate in real-time as you build. It’s also important to keep in mind that while automated testing is great at finding a majority of accessibility issues, it’s equally as important to manually accessibility test to make sure you’ve covered all possible issues.
Percy addon
One of the problems with continuously adding new code to your project is that it can introduce unwanted visual bugs. Visual regression testing is an important aspect of any project for making sure you catch visual bugs as new code is added in. One of the tools to help with this issue is Percy, a visual regression tool that lets you automate visual testing of your UI that also works with Storybook.
The setup for the Percy addon is a little more involved than the other addons mentioned in this article. You will need to create a free Percy account and then create a new organization and project. From there, you will be given a Percy token environment variable that is used for authentication. The free plan for Percy offers 5,000 screenshots a month and unlimited users. If 5,000 screenshots aren’t enough, you can upgrade to a professional or enterprise plan.
The Percy addon can be run as part of your CI to see changes for each component with every commit to your repository. After Percy has finished running, it will provide a URL where you can view uploaded snapshots for each component. Within the Percy dashboard, you can approve, request changes, or leave comments for each snapshot. The best part about Percy is that it generates snapshots for Chrome and Firefox on all of the various screen sizes. This means that it’s less likely a visual bug will go unnoticed for these browsers.
If you build out entire pages as part of your Storybook workflow, you can also use Percy to validate UI on those pages. Getting consistent feedback on each component and page will save you the time and money it takes to manually scour each page for unexpected UI changes in your app.
#vue #javascript #web-development #programming #developer
