fix(tests): Track visual regressions (#413)

Refs:

- "applitools eyes" is visual snapshot service for Cypress
- I picked it from https://docs.cypress.io/plugins/#visual-testing because it was verified by Cypress and they provide a free plan for open source projects
- install steps: https://applitools.com/tutorials/cypress.html

--> https://eyes.applitools.com/app

.github/workflows/nodejs.yml

@@ -104,6 +104,7 @@ jobs:
       - name: Run Cypress tests
         env:
           CI: true
+          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
         run: |
           source env-vars-testing.sh
           node_modules/.bin/cypress run
@@ -153,7 +154,8 @@ jobs:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
         run: |
           npm run semantic-release
-      - id: create_docker_tags
+      - name: Create Docker tags
+        id: create_docker_tags
         run: |
           echo "::set-output name=tags::latest,$(git tag -l --sort=-v:refname | head -1 | cut -c 2-)"
           # from https://github.com/jerray/publish-docker-action/issues/11#issuecomment-607077257

cypress/integration/visual-snapshots.ts

@@ -0,0 +1,54 @@
+// This suite intends to navigate through all pages, to detect visual regressions.
+
+context('Visual Snapshots', () => {
+  before(() => {
+    cy.eyesOpen({
+      appName: 'Openwhyd',
+      testName: 'Visual Snapshots',
+      browser: { width: 1000, height: 660 }, // cf https://docs.cypress.io/api/commands/viewport.html#Defaults
+    });
+    // TODO: insert a few tracks, to also check regressions on the rendering of those tracks
+  });
+
+  after(() => {
+    cy.eyesClose();
+  });
+
+  it('visitor', () => {
+    cy.visit('/'); // Home page (full stream)
+    cy.eyesCheckWindow('visitor on /');
+
+    cy.contains('Got it!').click(); // Remove cookie banner
+    cy.eyesCheckWindow('visitor on / (discarded cookie banner)');
+
+    cy.contains('Hot Tracks').click();
+    // cy.get('#pageLoader').should('have.css', { opacity: 0.5 });
+    cy.location('pathname').should('equal', '/hot');
+    // cy.get('#pageLoader').should('have.css', { opacity: 0 });
+    cy.contains('/ All'); // in the header of the list of tracks
+    cy.eyesCheckWindow('visitor on /hot');
+
+    cy.contains('Sign up').click();
+    cy.contains('Create an account').should('be.visible'); // title of the modal dialog
+    cy.eyesCheckWindow('visitor on /#signup');
+    cy.get('body').type('{esc}'); // press "escape", to close the modal
+
+    cy.contains('Login').click();
+    cy.location('pathname').should('equal', '/login');
+    cy.contains('No account yet?'); // below the sign in form
+    cy.eyesCheckWindow('visitor on /login');
+
+    // TODO: open a profile page (currently broken)
+
+    // TODO: open the /button page (currently broken)
+
+    // TODO: make the following test work: navigate back to home page, from the login page
+    // cy.go('back'); // does not work, for some reason...
+    // cy.window().then((window) => window.history.back()); // does not work either...
+    // cy.get('#logo').click(); // even worse: this displays a "Whoops, there is no test to run" error page from Cypress!
+    // TODO: try cy.window().invoke("history").invoke("back")
+    // cy.location('pathname').should('equal', '/');
+    // cy.contains('Recent tracks from all users'); // in the header of the list of tracks
+    // cy.eyesCheckWindow('visitor on / (back navigation)');
+  });
+});

cypress/plugins/index.ts

@@ -7,3 +7,5 @@ module.exports = (on, config) => {
   // with the any changed environment variables
   return config;
 };
+
+require('@applitools/eyes-cypress')(module); // eslint-disable-line @typescript-eslint/no-var-requires

cypress/support/eyes-index.d.ts

@@ -0,0 +1 @@
+import '@applitools/eyes-cypress';

cypress/support/index.ts

@@ -18,6 +18,7 @@
 /// <reference types="./" />
 
 import '@cypress/code-coverage/support';
+import '@applitools/eyes-cypress/commands';
 import './commands';
 
 beforeEach(function () {