chore(extension): upgrade Electron for tests (#718)

* mode: 'detach'

* Upgrade selenium-webdriver

* Temporarily use electron-chromedriver

* electron@3

* electron@5

* electron@8

* electron@11

* electron@12

* electron@13

* stash

* This works

* Cleanup

* Prettify

extension/package.json

@@ -20,7 +20,7 @@
     "lint": "eslint .",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
-    "test:electron": "jest test/electron && rimraf test/electron/tmp",
+    "test:electron": "jest test/electron",
     "test": "npm run test:app && npm run build:extension && npm run test:chrome && npm run test:electron"
   },
   "repository": {
@@ -42,10 +42,10 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "bestzip": "^2.1.7",
-    "chromedriver": "^2.35.0",
+    "chromedriver": "^91.0.0",
     "copy-webpack-plugin": "^6.3.1",
     "cross-env": "^7.0.2",
-    "electron": "^2.0.2",
+    "electron": "^13.1.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-15.4": "^1.4.2",
     "eslint": "^7.6.0",
@@ -63,7 +63,7 @@
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "rimraf": "^3.0.2",
-    "selenium-webdriver": "^3.0.1",
+    "selenium-webdriver": "^3.6.0",
     "sinon-chrome": "^1.1.2",
     "style-loader": "^1.2.1",
     "webpack": "^4.44.1",

extension/test/electron/devpanel.spec.js

@@ -5,7 +5,8 @@ import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
 const port = 9515;
-const devPanelPath = 'chrome-extension://redux-devtools/devpanel.html';
+const devPanelPath =
+  'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html';
 
 describe('DevTools panel for Electron', function () {
   beforeAll(async () => {
@@ -30,8 +31,19 @@ describe('DevTools panel for Electron', function () {
   });
 
   it('should open Redux DevTools tab', async () => {
+    if (!(await this.driver.getCurrentUrl()).startsWith('devtools')) {
+      const originalWindow = await this.driver.getWindowHandle();
+      const windows = await this.driver.getAllWindowHandles();
+      for (const window of windows) {
+        if (window === originalWindow) continue;
+        await this.driver.switchTo().window(window);
+        if ((await this.driver.getCurrentUrl()).startsWith('devtools')) {
+          break;
+        }
+      }
+    }
     expect(await this.driver.getCurrentUrl()).toMatch(
-      /chrome-devtools:\/\/devtools\/bundled\/inspector.html/
+      /devtools:\/\/devtools\/bundled\/devtools_app.html/
     );
 
     await this.driver.manage().timeouts().pageLoadTimeout(5000);
@@ -42,19 +54,22 @@ describe('DevTools panel for Electron', function () {
         if (attempts === 0) {
           return callback('Redux panel not found');
         }
-        const tabs = UI.inspectorView._tabbedPane._tabs;
-        const idList = tabs.map((tab) => tab.id);
-        const reduxPanelId = 'chrome-extension://redux-devtoolsRedux';
-        if (idList.indexOf(reduxPanelId) !== -1) {
-          UI.inspectorView.showPanel(reduxPanelId);
-          return callback(reduxPanelId);
+        if (UI.inspectorView) {
+          const tabs = UI.inspectorView._tabbedPane._tabs;
+          const idList = tabs.map((tab) => tab.id);
+          const reduxPanelId =
+            'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljdRedux';
+          if (idList.indexOf(reduxPanelId) !== -1) {
+            UI.inspectorView.showPanel(reduxPanelId);
+            return callback(reduxPanelId);
+          }
         }
         attempts--;
         setTimeout(showReduxPanel, 500);
       }
       showReduxPanel();
     });
-    expect(id).toBe('chrome-extension://redux-devtoolsRedux');
+    expect(id).toBe('chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljdRedux');
 
     const className = await this.driver
       .findElement(webdriver.By.className(id))

extension/test/electron/fixture/main.js

@@ -1,18 +1,21 @@
 const path = require('path');
-const { app, BrowserWindow } = require('electron');
-
-app.setPath('userData', path.join(__dirname, '../tmp'));
+const { app, BrowserWindow, session } = require('electron');
 
 app.on('window-all-closed', app.quit);
-app.on('ready', () => {
-  BrowserWindow.addDevToolsExtension(
-    path.join(__dirname, '../../../build/extension')
+app.whenReady().then(async () => {
+  await session.defaultSession.loadExtension(
+    path.join(__dirname, '../../../build/extension'),
+    { allowFileAccess: true }
   );
 
   const mainWindow = new BrowserWindow({
     width: 150,
     height: 100,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
   });
-  mainWindow.loadURL(`file://${__dirname}/index.html`);
-  mainWindow.openDevTools({ detach: true });
+  mainWindow.loadFile('index.html');
+  mainWindow.webContents.openDevTools({ mode: 'detach' });
 });