test: add visual regression support and spec all combinations

[rabelloo]

Purpose

Add support for visual regression tests.

Approach

Use Cypress to navigate the Storybook instance and screenshot All Combinations stories.

Testing

Locally, yarn e2e for headless or yarn cy for interactive.
In GitHub actions, there should be a new job inside the Test workflow.

Risks

Requires a new set of tools (mainly Cypress).
Couldn't get jest-image-snapshot alone to work correctly directly, something about how Storybook build stories and the whole interaction of Jest + Storybook + Webpack + TypeScript + Babel.
Cypress is pretty good though, we could easily spin up any browser we want.

[github-actions]

🎊 PR Preview 80650e9 has been successfully built and deployed to https://onfido-castor-preview-pr-556.surge.sh

🕐 Build time: 179.247s

_{🤖 By surge-preview}

[rabelloo]

The workflow seems to be failing on an image diff, but hard to see why until artifacts are retained (screenshot).

I suspect it's a browser difference between mine locally (where baseline screenshots were taken) and the one on CI.

Will investigate later.

[josokinas]

Looks good 👍

Mind also adding docs to CONTRIBUTING.md please?

[rabelloo]

Mind also adding docs to CONTRIBUTING.md please?

Please do let me know how it looks.

[rabelloo]

Alright this is now ready 🎉

Environment differences (between local and CI for example) are enough for images not to match.
So I have added another job screenshot-baselines to provide us with those when they mismatch.

Artifacts are kept nicely. If e2e fails, we can download those images and update the baselines.

[josokinas]

That's great!

One thing to note though, on a core screenshot is not of rendered UI but of code snippets instead, so essentially of this: https://onfido-castor-preview-pr-556.surge.sh/iframe.html?id=core-button--all-combinations&args=&viewMode=story

What do you reckon we should do, probably remove tests for core at least for now?

[rabelloo]

Yea I noticed that, our decorator that transforms that string into a DOM node doesn't run in that scenario :/

I think keeping it is fine, we're essentially snapshoting (like, comparing markup) for now.

Making core stories work as iframes is something we want either way, and it's not too hard to fix I reckon.

[josokinas]

OK, fine, good to go then 🚀

[rabelloo]

Next step is to explore using CI matrixes for other browsers, or a 3rd party tool like BrowserStack.

We'll probably need baseline screenshots for each browser though, as they have subtle rendering differences.