fix(tests): Cypress errors (#501)

* try to fix `Unable to locate executable file`

* try to load env file using a github action

* try to fix `/entrypoint.sh: export: line 1: -o: bad variable name`
cf https://github.com/openwhyd/openwhyd/runs/4482525337?check_suite_focus=true#step:7:5

* try to upgrade cypress

* try to fix `CypressError: Timed out after waiting `60000ms` for your remote page to load.`
cf https://github.com/openwhyd/openwhyd/runs/4482557359?check_suite_focus=true#step:8:214
by using chrome browser
as suggested in cypress-io/cypress#2118 (comment)

* try to fix local error `The play() request was interrupted by a call to pause()`
by increasing wait time

* try to fix `Cannot read properties of null (reading 'style')`

* troubleshooting: try to display front-end logs, at least on CI

* add note

* log debug info only in case of error

* revert to cypress 8.6

* fix codacy issue

* troubleshoot playem errors

* try to fix `Cypress command timeout of `4000ms` exceeded` by disabling @cypress/code-coverage

cf https://github.com/openwhyd/openwhyd/runs/4484506970?check_suite_focus=true#step:8:5351

details:
"after each" hook for "should allow user to re-add a track into a playlist":
     CypressError: Cypress command timeout of `4000ms` exceeded.

Because this error occurred during a `after each` hook we are skipping all of the remaining tests.
      at cypressErr (http://localhost:8080/__cypress/runner/cypress_runner.js:172722:18)
      at Object.errByPath (http://localhost:8080/__cypress/runner/cypress_runner.js:172791:10)
      at http://localhost:8080/__cypress/runner/cypress_runner.js:174541:80

* fix 404 on btn-player-video.png
cf https://github.com/openwhyd/openwhyd/runs/4484636963?check_suite_focus=true#step:8:381

* fix 404 on fonts

* fix 404 on spinnerbackloadmore.png

* try to fix `Synchronous XMLHttpRequest on the main thread is deprecated`
cf https://github.com/openwhyd/openwhyd/runs/4484636963?check_suite_focus=true#step:8:443

* Revert "fix 404 on fonts"

This reverts commit 622825e.

* prevent `cp: cannot stat 'coverage-cypress/.nyc_output/*.json': No such file or directory`
cf https://github.com/openwhyd/openwhyd/runs/4484957961?check_suite_focus=true#step:5:9

* try to fix `The play() request was interrupted by a call to pause().` by encapsulting playem's pause() into a try-catch block

* upgrade playemjs 1.2.1

* fix minified playem

* fix 404 on fonts/AvenirNext-DemiBold.otf

* visual tests still failing with timeout => trying to upgrade applitools/eyes-cypress

* try switching back to electron, even on CI

* with 'electron', visual tests are passing but acceptance e2e tests are timing out! => try 'chromium'

.github/workflows/ci.yml

@@ -66,6 +66,9 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: '${{ steps.nvmrc.outputs.node_version }}'
+      - uses: c-py/action-dotenv-to-setenv@v2
+        with:
+          env-file: env-vars-testing.conf
       - name: use npm cache
         uses: actions/cache@v2
         with:
@@ -80,20 +83,15 @@ jobs:
       - name: Initialize database
         env:
           CI: true
-        run: |
-          source env-vars-testing.sh
-          npm run test-reset
+        run: npm run test-reset
       - name: Start Openwhyd server
         run: |
-          source env-vars-testing.sh
           npm run start:coverage --mongoDbDatabase openwhyd_test &
           ./scripts/wait-for-http-server.sh 8080 # give openwhyd's server some time to start
       - name: Approval tests
         env:
           MONGODB_URL: 'mongodb://localhost:27017/openwhyd_test'
-        run: |
-          source env-vars-testing.sh
-          npx ava test/approval.tests.js
+        run: npx ava test/approval.tests.js
       - name: Get coverage data
         run: |
           sleep 2 # give some time for nyc (npm run start:coverage) to save coverage info
@@ -124,6 +122,9 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: '${{ steps.nvmrc.outputs.node_version }}'
+      - uses: c-py/action-dotenv-to-setenv@v2
+        with:
+          env-file: env-vars-testing.conf
       - name: use npm cache
         uses: actions/cache@v2
         with:
@@ -138,26 +139,19 @@ jobs:
       - name: Initialize database
         env:
           CI: true
-        run: |
-          source env-vars-testing.sh
-          npm run test-reset
+        run: npm run test-reset
       - name: Start Openwhyd server
         run: |
-          source env-vars-testing.sh
           npm start --mongoDbDatabase openwhyd_test &
           ./scripts/wait-for-http-server.sh 8080 # give openwhyd's server some time to start
       - name: Unit tests
         env:
           CI: true
-        run: |
-          source env-vars-testing.sh
-          npm run test-unit
+        run: npm run test-unit
       - name: API tests
         env:
           CI: true
-        run: |
-          source env-vars-testing.sh
-          npm run test-api
+        run: npm run test-api
 
   cypress:
     name: Cypress E2E tests
@@ -186,24 +180,22 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
+      - uses: c-py/action-dotenv-to-setenv@v2
+        with:
+          env-file: env-vars-testing.conf
       - name: npm install
         env:
           CI: true
         run: npm install --prefer-offline --no-audit
-      - name: Start Openwhyd server
-        env:
-          CI: true
-        run: |
-          source env-vars-testing.sh
-          npm run start:coverage --mongoDbDatabase openwhyd_test &
-          ./scripts/wait-for-http-server.sh 8080 # give openwhyd's server some time to start
-      - name: Run Cypress tests
+      - name: Run Cypress tests against Openwhyd server
         uses: cypress-io/github-action@v2.7.2
         with:
-          start: source env-vars-testing.sh
+          start: npm run start:coverage --mongoDbDatabase openwhyd_test
           config-file: cypress.json
+          browser: 'chromium' # to include browser console in cypress logs
           record: true
           parallel: true
+
         env:
           CI: true
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
@@ -244,7 +236,7 @@ jobs:
         run: |
           mkdir .nyc_output
           mkdir coverage-reports
-          cp coverage-cypress/.nyc_output/*.json coverage-reports
+          # cp coverage-cypress/.nyc_output/*.json coverage-reports
           cp coverage-approval/.nyc_output/*.json coverage-reports
           npx nyc merge coverage-reports .nyc_output/merged-coverage.json
           npx nyc report --reporter=lcov --reporter=text  # stores the coverage report in coverage/lcov.info

cypress/integration/acceptance.spec.ts

@@ -62,7 +62,7 @@ context('Openwhyd', () => {
     // should play the track
     cy.get('#btnPlay.playing', { timeout: 10000 }).should('be.visible');
 
-    cy.wait(1000); // TODO: get rid of this. cf https://github.com/openwhyd/openwhyd/pull/495/commits/7c0eddc9dc9e60fa163624d356837e1a111018d1
+    cy.wait(2000); // TODO: get rid of this. cf https://github.com/openwhyd/openwhyd/pull/495/commits/7c0eddc9dc9e60fa163624d356837e1a111018d1
 
     // should pause the track when the user clicks on the play/pause button
     cy.get('#btnPlay').click();

cypress/plugins/index.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 module.exports = (on, config) => {
-  require('@cypress/code-coverage/task')(on, config); // eslint-disable-line @typescript-eslint/no-var-requires
+  // require('@cypress/code-coverage/task')(on, config);
+  require('cypress-log-to-output').install(on); // note: only works with Chrome
 
   // add other tasks to be registered here
 
@@ -8,4 +11,4 @@ module.exports = (on, config) => {
   return config;
 };
 
-require('@applitools/eyes-cypress')(module); // eslint-disable-line @typescript-eslint/no-var-requires
+require('@applitools/eyes-cypress')(module);