build: coverage check with spectron and send to coveralls

Author: pyphilia

.babelrc

@@ -7,6 +7,11 @@
   "plugins": [
     ["@babel/transform-runtime", {
       "regenerator": true
+    }],
+    ["istanbul", {
+      "exclude": [
+        "**/*.spec.js"
+      ]
     }]
   ]
 }

.github/workflows/coverage.yml

@@ -3,8 +3,7 @@ on: ['push', 'pull_request']
 name: Test Coveralls
 
 jobs:
-  build:
-    name: build
+  react-test:
     runs-on: ubuntu-latest
     steps:
       - name: check out git repository
@@ -24,3 +23,46 @@ jobs:
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          flag-name: run-react-test
+          parallel: true
+
+  spectron:
+    runs-on: ubuntu-latest
+    steps:
+      - name: check out git repository
+        uses: actions/checkout@v1
+
+      - name: install node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: yarn
+        run: yarn install --network-timeout 1000000 # allows to run without network error
+
+      - name: build application
+        run: yarn build:github
+        env:
+          REACT_APP_GRAASP_API_HOST: ${{secrets.REACT_APP_GRAASP_API_HOST}}
+          REACT_APP_GRAASP_HOST: ${{secrets.REACT_APP_GRAASP_HOST}}
+          REACT_APP_SHOW_NOTIFICATIONS: false
+
+      - name: spectron
+        run: xvfb-run --auto-servernum --server-args='-screen 0, 1600x900x24' yarn mocha:coverage
+
+      - name: coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          flag-name: run-spectron
+          parallel: true
+
+  finish:
+    needs: [spectron, react-test]
+    runs-on: ubuntu-latest
+    steps:
+    - name: Coveralls Finished
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        parallel-finished: true

.github/workflows/release.yml

@@ -41,6 +41,7 @@ jobs:
           LOGGING_LEVEL: ${{secrets.LOGGING_LEVEL}}
           SENTRY_DSN: ${{secrets.SENTRY_DSN}}
           SENTRY_SUBMIT_URL: ${{secrets.SENTRY_SUBMIT_URL}}
+          REACT_APP_SHOW_NOTIFICATIONS: toastr
         with:
           build_script_name: build:github
           # GitHub token, automatically provided to the action

package.json

@@ -67,8 +67,9 @@
     "report": "cat ./coverage/lcov.info | env-cmd -f ./.env.test codacy-coverage",
     "report:ci": "cat ./coverage/lcov.info | codacy-coverage",
     "version": "git add CHANGELOG.md && standard-version -a",
-    "mocha:run": "mocha --require @babel/register --retries 3 'test/**/*.test.js'",
-    "mocha": "mkdirp test/tmp && concurrently \"env-cmd -f ./.env.test react-scripts start\" \"wait-on http://localhost:3000 && yarn mocha:run\""
+    "mocha:run": "mocha --exit --require @babel/register --retries 3 'test/**/*.test.js'",
+    "mocha": "mkdirp test/tmp && concurrently \"env-cmd -f ./.env.test react-scripts start\" \"wait-on http://localhost:3000 && yarn mocha:run\"",
+    "mocha:coverage": "nyc --reporter=lcov yarn mocha:run"
   },
   "dependencies": {
     "@material-ui/core": "4.11.4",
@@ -143,6 +144,8 @@
     "@babel/register": "7.13.16",
     "@commitlint/cli": "12.1.1",
     "@commitlint/config-conventional": "12.1.1",
+    "@istanbuljs/nyc-config-babel": "3.0.0",
+    "babel-plugin-istanbul": "6.0.0",
     "codacy-coverage": "3.4.0",
     "concurrently": "6.0.2",
     "cross-env": "7.0.3",
@@ -155,6 +158,7 @@
     "eslint-plugin-mocha": "8.1.0",
     "husky": "6.0.0",
     "npm-run-all": "4.1.5",
+    "nyc": "15.1.0",
     "prettier": "2.2.1",
     "pretty-quick": "3.1.0",
     "react-scripts": "4.0.3",
@@ -228,6 +232,12 @@
   "jest": {
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.js",
+      "!src/registerServiceWorker.js",
+      "!src/index.js",
+      "!src/store/*.js"
     ]
   }
 }

public/app/preload.js

@@ -1,2 +1,18 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 window.ipcRenderer = require('electron').ipcRenderer;
+
+// mock fetch to provide local space definitions
+if (process.env.CI || process.env.NODE_ENV === 'test') {
+  const spaces = JSON.parse(process.env?.API_DATABASE) || [];
+
+  // mock GET spaces calls
+  window.fetch = async (url) => {
+    const objectIdRegex = new RegExp(/[a-f\d]{24}/i);
+    const id = url.match(objectIdRegex)?.[0];
+    const content = spaces.find(({ id: sId }) => sId === id);
+    const myBlob = new Blob([JSON.stringify(content)], {
+      type: 'application/json',
+    });
+    return new Response(myBlob);
+  };
+}

public/electron.js

@@ -176,7 +176,7 @@ if (process.env.NODE_ENV === 'test') {
 let mainWindow;
 
 // only set up sentry if dsn is provided
-const { SENTRY_DSN, GOOGLE_ANALYTICS_ID } = process.env;
+const { SENTRY_DSN, GOOGLE_ANALYTICS_ID, CI } = process.env;
 if (SENTRY_DSN) {
   Sentry.init({ dsn: SENTRY_DSN });
 }
@@ -202,7 +202,7 @@ const createWindow = () => {
   });
 
   mainWindow.loadURL(
-    isDev || process.env.NODE_ENV === 'test'
+    CI !== 'true' && (isDev || process.env.NODE_ENV === 'test')
       ? 'http://localhost:3000'
       : `file://${path.join(__dirname, './index.html')}`
   );

scripts/setup.js

@@ -9,13 +9,15 @@ const {
   GOOGLE_API_KEY = '',
   GOOGLE_ANALYTICS_ID = '',
   LOGGING_LEVEL = 'info',
+  SHOW_NOTIFICATIONS = false,
 } = process.env;
 
 const env = JSON.stringify({
   SENTRY_DSN,
   GOOGLE_API_KEY,
   GOOGLE_ANALYTICS_ID,
   LOGGING_LEVEL,
+  SHOW_NOTIFICATIONS,
 });
 
 fs.writeFileSync(path.join(DEFAULT_PATH, NAME), env, { encoding: 'utf8' });

src/config/constants.js

@@ -1,5 +1,12 @@
 export const PRODUCT_NAME = 'Graasp';
 
+export const NOTIFICATIONS_TYPES = {
+  TOASTR: 'toastr',
+};
+
+export const SHOW_NOTIFICATIONS =
+  process?.env?.REACT_APP_SHOW_NOTIFICATIONS || false;
+
 // phase item types
 export const TEXT = 'text/html';
 export const PDF = 'application/pdf';
@@ -64,11 +71,11 @@ export const SYNC_CHANGES = {
   UPDATED: 'updated',
 };
 
-const DIFF_COLORS = {
+export const DIFF_COLORS = {
   [SYNC_CHANGES.ADDED]: '#ddffde',
   [SYNC_CHANGES.REMOVED]: '#fddedb',
   [SYNC_CHANGES.UPDATED]: '#f9edc5',
-  [SYNC_CHANGES.MOVED]: 'lightgrey',
+  [SYNC_CHANGES.MOVED]: '#d3d3d3',
 };
 
 export const DIFF_STYLES = {

src/index.js

@@ -15,6 +15,7 @@ import 'react-quill/dist/quill.core.css';
 import App from './App';
 import configureStore from './store/configure';
 import { ROOT_ID } from './config/selectors';
+import { NOTIFICATIONS_TYPES, SHOW_NOTIFICATIONS } from './config/constants';
 
 // bind katex to the window object
 window.katex = katex;
@@ -42,11 +43,13 @@ ReactDOM.render(
       <Detector
         render={({ online }) => (
           <>
-            <ReduxToastr
-              transitionIn="fadeIn"
-              preventDuplicates
-              transitionOut="fadeOut"
-            />
+            {SHOW_NOTIFICATIONS === NOTIFICATIONS_TYPES.TOASTR && (
+              <ReduxToastr
+                transitionIn="fadeIn"
+                preventDuplicates
+                transitionOut="fadeOut"
+              />
+            )}
             <App connexionStatus={online} />
           </>
         )}

test/application.js

@@ -3,7 +3,7 @@ import electronPath from 'electron'; // Require Electron from the binaries inclu
 import path from 'path';
 import fse from 'fs-extra';
 import extract from 'extract-zip';
-import { buildSignedInUserForDatabase } from './utils';
+import { buildSignedInUserForDatabase, prepareSpaceForApi } from './utils';
 
 const getFormattedTime = () => {
   const today = new Date();
@@ -71,6 +71,7 @@ const createApplication = async ({
     showOpenDialogResponse: undefined,
     showTours: 0,
   },
+  api = [],
 } = {}) => {
   const {
     showMessageDialogResponse,
@@ -92,9 +93,21 @@ const createApplication = async ({
     env.SHOW_OPEN_DIALOG_RESPONSE = showOpenDialogResponse;
   }
 
+  // mock spaces fetch using the api
+  // when not defined, provide default api database
+  env.API_DATABASE = JSON.stringify(
+    api.map((space) => prepareSpaceForApi(space))
+  );
+
   // set up database
   const tmpDatabasePath = await setUpDatabase(database);
 
+  // locally use the public electron application
+  // for CI use the build application
+  const applicationPath = process.env.CI
+    ? path.join(__dirname, '../build/electron.js')
+    : path.join(__dirname, '../public/electron.js');
+
   const app = new Application({
     // Your electron path can be any binary
     // i.e for OSX an example path could be '/Applications/MyApp.app/Contents/MacOS/MyApp'
@@ -114,7 +127,7 @@ const createApplication = async ({
 
     // The following line tells spectron to look and use the main.js file
     // and the package.json located 1 level above.
-    args: [path.join(__dirname, '../public/electron.js')],
+    args: [applicationPath],
     // use a specific application folder and var folder to save data
     chromeDriverArgs: [`--user-data-dir=${tmpDatabasePath}`],
     env,

test/classrooms.test.js

@@ -59,7 +59,6 @@ import {
   DELETE_CLASSROOM_PAUSE,
   DELETE_USER_IN_CLASSROOM_PAUSE,
   OPEN_CLASSROOM_PAUSE,
-  TOOLTIP_FADE_OUT_PAUSE,
   LOAD_SELECTION_SPACE_PAUSE,
 } from './constants';
 import {
@@ -561,7 +560,6 @@ describe('Classrooms Scenarios', function () {
         // delete user in first classroom
         await openClassroom(client, name);
         await deleteUserInClassroom(client, newName);
-        await client.pause(TOOLTIP_FADE_OUT_PAUSE);
         await hasStudentsTableLayout(
           client,
           [],

test/constants.js

@@ -5,7 +5,6 @@ export const APPS_FOLDER = 'apps';
 
 export const DEFAULT_GLOBAL_TIMEOUT = 270000;
 export const SAVE_USER_INPUT_TIMEOUT = 370000;
-export const TOOLTIP_FADE_OUT_PAUSE = 10000;
 export const INPUT_TYPE_PAUSE = 2000;
 export const VISIT_SPACE_PAUSE = 5000;
 export const OPEN_SAVED_SPACE_PAUSE = 2000;