feat: Visual regression tests

[tuliomir]

Motivation

Having end-to-end tests with Cypress ensure the overall flow of the application is working as expected, however the visual aspects are not considered. See more about why to do visual tests on this external article.

The first implementation for the visual regression was made on #703, using only the local resources of the CI environment. This, however, led to inconsistent renderings of the screens and false positives on the diffs.

Rationale and Alternatives

The best solution to this is to export the HTML to a third party to have it processed in a consistent environment and the diffs are generated there. Most of the commercially available third parties are more focused in managing interaction between designer and development teams.

Happo.io has a workflow closer to the one at Hathor Labs, in which the renderings are generated in each PR and compared to the latest rendering in master. There is also the need to review and approve any visual change that the PR may cause, and this reviewing process integrates well with the GitHub PR interface.

Acceptance Criteria

• Adds visual regression tests to the CI through the Happo.io platform
• Supersedes Feat: Visual regression tests #703

Pending activities

• Create a Happo.io account for Hathor Labs
• Install the Happo.io application on this repository ( docs )
• Add its API keys to the repository secrets

Security Checklist

• Make sure you do not include new dependencies in the project unless strictly necessary and do not include dev-dependencies as production ones. More dependencies increase the possibility of one of them being hijacked and affecting us.

[tuliomir]

This line enforces a specific environment for retrieving the API secrets and must be adjusted for this repository.