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.

PR Objectives and Reviewing Process

The proposal of this PR sits somewhere between a Proof-of-Concept and a pilot implementation for a larger feature. Since it requires the installation of new GitHub plugins to work, the first contact of reviewers with it will naturally see a failing CI.

So, it is expected that the PR will have to undergo some steps:

1. Initial review, with a failing CI
   This review aims to get to know the proposed feature and see the code that will be implemented. Something close to the review of a design. A working version of this PR can be seen at a fork of this repository on my personal account ( link ).

2. Proper configuration of the plugins
   Upon approval of the general concept and code, an administrator of this repository ( in this case, @pedroferreira1 ) will have to install and configure the Happo plugin. All the steps necessary to perform this are described below, in the "Pending Activities" section.

3. Second review, with a passing CI
   After all the configurations are done, The CI will pass and the reviewers will be able to interact with the Happo platform to validate all features of this PR.

Only after this second review and posterior approval will this PR be merged and become a part of the workflow for the Hathor Desktop Wallet.

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
• Second review to ensure all configurations are properly working and the workflow is functional

Future implementations

This PR only contains an initial implementation of this feature, upon which a full test suite for the whole application can be built. This will be done gradually in many PRs.

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.