fix(tests): Fix cypress flakiness on CI by slowing down test setup (#523

)

## Problem

Despite several attempts to improve the situation (see PRs #501, #504, #505, #507, #508, #510, #513, #520, #521, #522), Cypress tests are still flaky: they timeout for random reasons.

## Hypothesis

This timeout could be caused by the fact that:
- some XHR requests (e.g. to `/api/notif` to fetch notifications, and Deezer) may never respond => `onLoad` is never triggered
- when a new test starts, we call `/testing/reset` to refresh the DB, which can cause pending DB queries from never resolving

See #520 (comment).

## Proposed solution

- wait for Openwhyd server to be up and reset before running tests
- intercept and mock flaky XHR requests
- fail faster when test steps are hanging for too long
- reduce the amount of resources to load: fonts

.github/workflows/ci.yml

@@ -176,6 +176,7 @@ jobs:
         uses: cypress-io/github-action@v2.7.2
         with:
           start: npm run start:coverage --mongoDbDatabase openwhyd_test
+          wait-on: 'http://localhost:8080'
           config-file: cypress.json
           browser: 'chromium' # to include browser console in cypress logs
           record: true
@@ -188,7 +189,7 @@ jobs:
           # Recommended: pass the GitHub token lets this action correctly
           # determine the unique run id necessary to re-run the checks
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # DEBUG: 'cypress:*'
+          # DEBUG: 'cypress:server:socket-base'
       - name: Get coverage data
         run: |
           # npm run test:coverage

cypress.json

@@ -4,11 +4,11 @@
   "video": true,
   "chromeWebSecurity": false,
   "baseUrl": "http://localhost:8080",
-  "defaultCommandTimeout": 8000,
-  "execTimeout": 60000,
-  "taskTimeout": 60000,
-  "pageLoadTimeout": 120000,
+  "defaultCommandTimeout": 4000,
+  "execTimeout": 5000,
+  "taskTimeout": 5000,
+  "pageLoadTimeout": 10000,
   "requestTimeout": 5000,
-  "responseTimeout": 30000,
-  "slowTestThreshold": 10000
+  "responseTimeout": 5000,
+  "slowTestThreshold": 30000
 }

cypress/support/commands.ts

@@ -17,10 +17,11 @@ import 'cypress-file-upload';
 
 Cypress.Commands.add('resetDb', () => {
   cy.request('POST', `/testing/reset`, {
-    timeout: 20000,
+    timeout: 5000,
     retryOnStatusCodeFailure: true,
     retryOnNetworkFailure: true,
   });
+  cy.wait(1000);
 });
 
 Cypress.Commands.add('logout', () => {

cypress/support/index.ts

@@ -22,6 +22,17 @@ import '@applitools/eyes-cypress/commands';
 import './commands';
 
 beforeEach(function () {
+  // mock the /api/notif endpoint, to prevent tests from timing out because of dangling calls to that endpoint, preventing the "load" event from firing.
+  cy.intercept('GET', '/api/notif*', {
+    statusCode: 200,
+    body: [],
+  });
+
+  cy.intercept('GET', 'https://cdns-files.deezer.com/js/min/dz.js', {
+    statusCode: 200,
+    body: '',
+  });
+
   // reset the db before each it() test, across all files no matter what,
   // as recommended in https://docs.cypress.io/guides/references/best-practices.html#State-reset-should-go-before-each-test
   cy.resetDb();

public/css/common.css

@@ -1,35 +1,21 @@
 @font-face {
   font-family: 'AvenirNext-Regular';
-  src: url(/fonts/AvenirNext-Regular.eot);
-  src: url(/fonts/AvenirNext-Regular.eot?#iefix) format('embedded-opentype'),
-    url(/fonts/AvenirNext-Regular.woff) format('woff'),
-    url(/fonts/AvenirNext-Regular.otf) format('opentype'),
-    url(/fonts/AvenirNext-Regular.ttf) format('truetype'),
-    url(/fonts/AvenirNext-Regular.svg#AvenirNext-Regular) format('svg');
+  src: url(/fonts/AvenirNext-Regular.woff) format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'AvenirNext-Medium', Helvetica, Arial, Sans-serif;
-  src: url(/fonts/AvenirNext-Medium.eot);
-  src: url(/fonts/AvenirNext-Medium.eot?#iefix) format('embedded-opentype'),
-    url(/fonts/AvenirNext-Medium.otf) format('opentype'),
-    url(/fonts/AvenirNext-Medium.woff) format('woff'),
-    url(/fonts/AvenirNext-Medium.ttf) format('truetype'),
-    url(/fonts/AvenirNext-Medium.svg#AvenirNext-Medium) format('svg');
+  src: url(/fonts/AvenirNext-Medium.woff) format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'AvenirNext-DemiBold', Helvetica, Arial, Sans-serif;
   font-weight: bold;
-  src: url(/fonts/AvenirNext-DemiBold.eot);
-  src: url(/fonts/AvenirNext-DemiBold.eot?#iefix) format('embedded-opentype'),
-    url(/fonts/AvenirNext-DemiBold.woff) format('woff'),
-    url(/fonts/AvenirNext-DemiBold.ttf) format('truetype'),
-    url(/fonts/AvenirNext-DemiBold.svg#AvenirNext-DemiBold) format('svg');
+  src: url(/fonts/AvenirNext-DemiBold.woff) format('woff');
   font-weight: normal;
   font-style: normal;
 }