I've inherited a component library that I'm bringing back to life.
In the past I've worked on React component libraries and used tools like Storybook to develop them. Testing these is pretty easy - I tend to use mostly react-testing-library and jest.
But this particular library is different—each component is:
- a scss file for styling
- optionally, some javascript
- a markdown file that combines written guidance for using the component with code samples and live previews
It's not that different from the GOV.UK design system.
Testing the javascript parts is easy enough, but it's only a small part of the overall library.
How do you go about testing something like this in a robust way?
Top comments (4)
You can check the implementation. Design implementation must be approved by the designers or at least a QA. There's no programming here so errors cannot happen, it's reduced to a bad or good implementation of it.
The tests to see if this design system works well for your customers can be made with heatmaps and tracking of the users actions inside your web app, so it really concerns to UX department.
Giving that a design system must be created with three departments or roles, together.
Designers: must create components that interacts well with other components, well looking and that intentionally gives the aspect you need to show on your business to achieve different things, well looking, fresh and so...
UX: must validate this design to see if there's a way to improve it to make the user experience much better or to achieve a specific action (get leads, sells or whatever).
Developers: must translate this designs into a proper code inside the project with performance in mind. If something can be modified a bit to ensure consistency of the code, devs must talk with UX to see this changes aren't bad for this field of study and if it's ok, ask designers to change it.
At this point you can, of course, use JEST, Puppeteer or whatever you like to perform snapshots, records and then analyse them, but at the end the most consistent way for testing it is a QA person that is implied on all this process testing it with different devices and browsers and pointing out things that can be polished from a department or another.
Everything that affects the visual part is basically tested with:
Regards
github.com/garris/BackstopJS
Happo, Percy, Chromatic, Applitools + Cypress for testing interactions and visual regressions.