feat: Visual Regression Testing

[gabriellsh]

Proposed changes (including videos or screenshots)

TODO:

• Verify CD pipeline
• Fix docker build cache
• Make this available as a "package" (tools)
• Fix requirements for "ready to merge"

Added visual-regression tests for fuselage package.

Added a new tool package for easy visual-regression tests setup.

This includes a docker setup necessary to ensure that the screenshots taken in different OSes match.

To run it:
yarn && yarn build
yarn workspace @rocket.chat/<PACKAGE> visual-regression

Important

Docker engine is required and has to be running before executing the tests

To update the snapshots, ensure all packages have their dependencies installed and all packages are built, then run:
yarn workspace @rocket.chat/<PACKAGE> visual-regression-update

To run for every package:
yarn turbo run visual-regression

Enable for other packages:
Add @rocket.chat/visual-regression as a devDependency. "@rocket.chat/visual-regression": "workspace:~",
Add the following scripts inside package.json:

scripts: {
    "visual-regression": "visual-regression",
    "visual-regression-update": "visual-regression --update-snapshots",
}

Requirements: Package should have storybook already setup and the build-storybook script must exist for running on CI, since visual-regression depends on it.

Issue(s)

ARCH-1329

Further comments

Unfortunately it's currently impossible to implement these tests without using a docker container. Differences between OSes cause a lot of different issues, specially regarding font rendering/kerning. A lot of time was invested during this implementation trying to find a solution, but fonts never match (most of the times it's a 1px difference in the text positioning).

Three new scripts where added, one to run the tests locally, one to update the snapshots locally, and one to run the tests on the CI. The CI script visual-regression-ci requires "build-storybook" to have been ran before the tests can be ran. It was made this way in order to optimize the CI and avoid building the storybook packages multiple times during the pipeline.

[changeset-bot]

🦋 Changeset detected

Latest commit: a785ee1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rocket.chat/fuselage	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR