Add Visual Regression Testing

[nickvasdev]

Problem

Currently, there are no public visual regression tests in Shards and I think this would be the next step towards a more integrated and modern development process.

Solution

The best course of action here I think would be to use BackstopJS and have a test npm script that runs it against an array of scenarios isolated inside a tests/ directory for mobile, tablet and desktop viewports. I'm open to suggestions if someone can come up with a better alternative to Backstop, but I would prefer a self-contained solution.

Each scenario can be a simple template with isolated components for a specific category. I'll work on the exact list during the next couple of days.

Action Items

• (optional) Suggest an alternative to Backstop, if any.
• Integrate, initialize and configure Backstop in Shards.
• Add test script.
• (optional) Add a sample scenario with a demo component and reference.

[sidalidev]

How about Snapshot testing with Jest ?

[nickvasdev]

@sidbentifraouine Thanks for your suggestion and sorry for the delay! 😃 I assume you are referring to using Jest with jest-image-snapshot. I guess that would work too, but wouldn't it require some more boilerplate? I might be wrong. 🤔

Can you clarify what setup you have in mind and how it would benefit more than using Backstop?