Visual regression testing

[penx]

Add support for visual regression testing by:

1. for each component that has an 'example.js' file, generate an image snapshot with Pupeteer component-image (this is done as part of API docs)
2. plug component-image in to a dockerized puppeteer so that identical images are always generated independent of host platform
3. make the CI server check that the generated images in the docs folder match the current image snapshots for example.js

[penx]

puppeteer/puppeteer#1645

[penx]

https://github.com/skalfyfan/dockerized-puppeteer

[penx]

I think due to:

• our Jest snapshot testing now outputs CSS
• cross platform anti aliasing issues still being a pain

There is less value in introducing visual regression testing.

However, as we do have image generation for each component for the purpose of the API documentation generation, it is a logical progression to introduce some very simple visual regression tests if we can use dockerized puppeteer to resolve the issues with cross platform rendering differences.

[penx]

https://blog.hichroma.com/introducing-chromatic-ui-testing-for-react-c5cc01a79aaa

[penx]

chromatic has been added - need to start using it

[penx]

Chromatic is being used but:

• we have a lot of stories being nested in 'Example' folders which makes it hard to navigate in the Chromatic UI
• sometimes changes are flagged on PRs that are not related to the PR