Setup and introduce visual testing tools and CI

[cnotv]

Summary

Fixes #9057

This is an abstract of what I'll present in the demo.

Occurred changes and/or fixed issues

Introduced visual testing which will ensure components do not change styles. The whole process is an E2E test of Cypress running over Storybook.

Every component of our styleguide will be then tested.
Single abstracted views would need to be added in Storybook as sample pages.

Images generated for visual regressions are hosted in this project under ./visual/snapshots.

Technical notes summary

• Created configuration:
  • cypress.visual.config.ts Cypress configuration to run over Storybook
  • ./visual containing all the code, tests, and images for the tests
• Added commands
  • yarn visual for running the tests in CI; run yarn storybook prior this
  • yarn visual:open for developing mode with head to see the UI; run yarn storybook prior this
  • yarn visual:ci for executing concurrently Storybook and visual tests
• Created new CI pipeline in GH
• Added library @emerson-eps/cypress-image-snapshot, but considering replacing it with single libraries if we rewrite the code

Areas or cases that should be tested

Areas which could experience regressions

New pipeline Tests / visual-test should pass.
Command yarn visual should run the test (run Storybook first).

Screenshot/Video

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes