build: upgrade electron and related dep, update tests

Author: pyphilia

package.json

@@ -81,7 +81,7 @@
     "clsx": "1.1.1",
     "connected-react-router": "6.8.0",
     "download": "8.0.0",
-    "electron-devtools-installer": "2.2.4",
+    "electron-devtools-installer": "3.1.1",
     "electron-is-dev": "1.2.0",
     "electron-log": "4.2.4",
     "electron-publisher-s3": "20.17.2",
@@ -100,7 +100,7 @@
     "md5": "2.3.0",
     "mime-types": "2.1.27",
     "mkdirp": "1.0.4",
-    "mocha": "7.1.0",
+    "mocha": "8.1.3",
     "node-machine-id": "1.1.12",
     "prop-types": "15.7.2",
     "qs": "6.9.4",
@@ -142,20 +142,20 @@
     "codacy-coverage": "3.4.0",
     "concurrently": "5.3.0",
     "cross-env": "7.0.2",
-    "electron": "8.2.4",
+    "electron": "10.1.3",
     "electron-builder": "22.8.1",
     "env-cmd": "10.1.0",
     "enzyme-to-json": "3.6.1",
     "eslint-config-airbnb": "18.2.0",
     "eslint-config-prettier": "6.12.0",
-    "eslint-plugin-mocha": "6.3.0",
+    "eslint-plugin-mocha": "8.0.0",
     "husky": "4.3.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.1.2",
     "pretty-quick": "3.0.2",
     "react-scripts": "3.4.3",
     "redux-mock-store": "1.5.4",
-    "spectron": "10.0.1",
+    "spectron": "12.0.0",
     "standard-version": "9.0.0",
     "wait-on": "5.2.0"
   },

public/electron.js

@@ -5,6 +5,7 @@ const {
   ipcMain,
   Menu,
   dialog,
+  protocol,
   // eslint-disable-next-line import/no-extraneous-dependencies
 } = require('electron');
 const path = require('path');
@@ -137,7 +138,7 @@ const {
 const isMac = require('./app/utils/isMac');
 
 // add keys to process
-Object.keys(env).forEach(key => {
+Object.keys(env).forEach((key) => {
   process.env[key] = env[key];
 });
 
@@ -199,25 +200,25 @@ const createWindow = () => {
 
   if (isDev) {
     const {
-      default: installExtension,
+      default: loadExtension,
       REACT_DEVELOPER_TOOLS,
       REDUX_DEVTOOLS,
       // eslint-disable-next-line global-require
     } = require('electron-devtools-installer');
 
-    installExtension(REACT_DEVELOPER_TOOLS)
-      .then(name => {
+    loadExtension(REACT_DEVELOPER_TOOLS)
+      .then((name) => {
         logger.info(`added extension: ${name}`);
       })
-      .catch(err => {
+      .catch((err) => {
         logger.error(err);
       });
 
-    installExtension(REDUX_DEVTOOLS)
-      .then(name => {
+    loadExtension(REDUX_DEVTOOLS)
+      .then((name) => {
         logger.info(`added extension: ${name}`);
       })
-      .catch(err => {
+      .catch((err) => {
         logger.error(err);
       });
   }
@@ -373,7 +374,7 @@ app.on('ready', async () => {
   autoUpdater
     .checkForUpdatesAndNotify()
     .then()
-    .catch(err => logger.error(err));
+    .catch((err) => logger.error(err));
 
   await ensureDatabaseExists(DATABASE_PATH);
   const db = bootstrapDatabase(DATABASE_PATH);
@@ -632,3 +633,12 @@ app.on('activate', () => {
 ipcMain.on('load-page', (event, arg) => {
   mainWindow.loadURL(arg);
 });
+
+// enable file:// url scheme
+// solution from https://github.com/electron/electron/issues/23757
+app.whenReady().then(() => {
+  protocol.registerFileProtocol('file', (request, callback) => {
+    const pathname = decodeURI(request.url.replace('file:///', ''));
+    callback(pathname);
+  });
+});

src/utils/syncSpace.test.js

@@ -79,7 +79,7 @@ describe('syncSpace', () => {
   describe('createDiffElements', () => {
     // build classes from existing changes
     const classes = {};
-    Object.values(SYNC_CHANGES).forEach(change => {
+    Object.values(SYNC_CHANGES).forEach((change) => {
       classes[change] = change;
     });
 

test/application.js

@@ -55,7 +55,7 @@ const createApplication = async (
   return app;
 };
 
-const closeApplication = app => {
+const closeApplication = (app) => {
   if (app && app.isRunning()) {
     return app.stop();
   }

test/apps/textInputApp.js

@@ -6,23 +6,27 @@ const INPUT_TEXT_FIELD_SELECTOR = '#inputTextField';
 const SAVE_BUTTON_SELECTOR = 'button';
 
 export const typeInTextInputApp = async (client, id, text) => {
-  await client.frame(buildPhaseAppName(id));
-  await client.setValue(INPUT_TEXT_FIELD_SELECTOR, text);
+  await client.switchToFrame(
+    await client.$(`[name="${buildPhaseAppName(id)}"]`)
+  );
+  await (await client.$(INPUT_TEXT_FIELD_SELECTOR)).setValue(text);
   await client.pause(INPUT_TYPE_PAUSE);
 
   // click on save button
-  await client.click(SAVE_BUTTON_SELECTOR);
+  await (await client.$(SAVE_BUTTON_SELECTOR)).click();
   await client.pause(SAVE_USER_INPUT_PAUSE);
 
   // reset client on parent frame
-  await client.frame(null);
+  await client.switchToFrame(null);
 };
 
 export const checkTextInputAppContainsText = async (client, id, text) => {
-  await client.frame(buildPhaseAppName(id));
-  const inputText = await client.getText(INPUT_TEXT_FIELD_SELECTOR);
+  await client.switchToFrame(
+    await client.$(`[name="${buildPhaseAppName(id)}"]`)
+  );
+  const inputText = await (await client.$(INPUT_TEXT_FIELD_SELECTOR)).getText();
 
   expect(inputText).to.equal(text);
   // reset client on parent frame
-  await client.frame(null);
+  await client.switchToFrame(null);
 };