electron 17 (stream-labs#4156)

* electron 17 * upgrade spectron * fix alertbox tests * clear comments Co-authored-by: Alexander Nazarov <[email protected]>
elemanhillary · May 19, 2022 · 9b20d94 · 9b20d94
1 parent aec1ed8
commit 9b20d94
Show file tree

Hide file tree

Showing 10 changed files with 537 additions and 271 deletions.
diff --git a/app/components-react/windows/ScreenCaptureProperties.tsx b/app/components-react/windows/ScreenCaptureProperties.tsx
@@ -59,10 +59,13 @@ function useCaptureSource(sourceId: string): ICaptureSourceApi {
 
   useEffect(() => {
     (async () => {
-      const windows = await electron.desktopCapturer.getSources({
-        types: ['window'],
-        fetchWindowIcons: true,
-      });
+      const windows: Electron.DesktopCapturerSource[] = await electron.ipcRenderer.invoke(
+        'DESKTOP_CAPTURER_GET_SOURCES',
+        {
+          types: ['window'],
+          fetchWindowIcons: true,
+        },
+      );
       const windowOptions = windows.map(win => {
         const opt: ICapturableOption = {
           description: win.name,
@@ -76,7 +79,10 @@ function useCaptureSource(sourceId: string): ICaptureSourceApi {
       });
 
       // Attempt to get thumbnails for screens
-      const screenData = await electron.desktopCapturer.getSources({ types: ['screen'] });
+      const screenData: Electron.DesktopCapturerSource[] = await electron.ipcRenderer.invoke(
+        'DESKTOP_CAPTURER_GET_SOURCES',
+        { types: ['screen'] },
+      );
 
       const screenOptions = remote.screen.getAllDisplays().map((screen, index) => {
         const opt: ICapturableOption = {

diff --git a/app/util/guest-api-handler.ts b/app/util/guest-api-handler.ts
@@ -197,7 +197,7 @@ export class GuestApiHandler {
     method: RequestHandlerMethod,
     args: any[],
     request: IGuestApiRequest,
-    contents: electron.webContents,
+    contents: Electron.WebContents,
   ) {
     method(...args)
       .then(result => {

diff --git a/main.js b/main.js
@@ -29,6 +29,7 @@ const {
   crashReporter,
   dialog,
   webContents,
+  desktopCapturer,
 } = require('electron');
 const path = require('path');
 const rimraf = require('rimraf');
@@ -806,3 +807,5 @@ function measure(msg, time) {
   if (delta > 2000) console.log('------------------');
   console.log(msg, delta + 'ms');
 }
+
+ipcMain.handle('DESKTOP_CAPTURER_GET_SOURCES', (event, opts) => desktopCapturer.getSources(opts));
diff --git a/package.json b/package.json
@@ -62,13 +62,12 @@
     "serial": true
   },
   "dependencies": {
-    "@electron/remote": "^2.0.1",
+    "@electron/remote": "2.0.8",
     "abort-controller": "^3.0.0",
     "archiver": "2.1.1",
     "aws-sdk": "^2.344.0",
     "color-picker": "https://obs-studio-deployment.s3-us-west-2.amazonaws.com/color-picker-0.0.0.tar.gz",
     "crash-handler": "https://slobs-crash-handler.s3-us-west-2.amazonaws.com/crash-handler-0.0.0.tar.gz",
-    "electron-chromedriver": "^14.0.0",
     "electron-react-devtools": "^0.5.3",
     "electron-updater": "^4.2.0",
     "electron-window-state": "5.0.3",
@@ -145,7 +144,7 @@
     "css-element-queries": "1.2.3",
     "css-loader": "2.1.1",
     "dotenv": "8.2.0",
-    "electron": "14.2.6",
+    "electron": "17.4.1",
     "electron-builder": "22.14.5",
     "electron-devtools-installer": "3.1.1",
     "electron-notarize": "1.0.0",
@@ -194,7 +193,7 @@
     "sockjs": "0.3.20",
     "sockjs-client": "1.1.5",
     "sortablejs": "1.13.0",
-    "spectron": "15.0.0",
+    "spectron": "19.0.0",
     "streamlabs-beaker": "0.9.4",
     "style-loader": "2.0.0",
     "stylelint": "10.0.1",
@@ -205,7 +204,7 @@
     "traverse": "0.6.6",
     "tree-kill": "1.2.2",
     "ts-loader": "8.0.11",
-    "ts-node": "7.0.1",
+    "ts-node": "^10.7.0",
     "typedoc": "0.22.10",
     "typescript": "4.5.5",
     "urijs": "1.19.7",

diff --git a/scripts/postinstall.js b/scripts/postinstall.js
@@ -14,6 +14,3 @@ const antdlibSettings = JSON.parse(fs.readFileSync(antdLibSettingsPath, 'utf8'))
 delete antdlibSettings.module;
 antdlibSettings.main = 'dist/antd.min.js';
 fs.writeFileSync(antdLibSettingsPath, JSON.stringify(antdlibSettings, null, 2));
-
-// force Spectron to use a ChromeDriver version from package.json
-rimraf.sync(path.resolve('./node_modules/spectron/node_modules/electron-chromedriver'));
diff --git a/test/helpers/modules/core.ts b/test/helpers/modules/core.ts
@@ -5,10 +5,11 @@
 import { getContext } from '../spectron';
 import { getApiClient } from '../api-client';
 import { WindowsService } from '../../../app/services/windows';
+import { ClickOptions, WaitForOptions } from 'webdriverio';
 
 export type TSelectorOrEl = string | WebdriverIO.Element;
 
-export function getClient(): WebdriverIO.BrowserObject {
+export function getClient(): WebdriverIO.Browser {
   return getContext().context.app.client;
 }
 
@@ -30,7 +31,7 @@ export function selectButton(buttonText: string) {
 
 // CLICK SHORTCUTS
 
-export async function click(selectorOrEl: TSelectorOrEl, options?: WebdriverIO.ClickOptions) {
+export async function click(selectorOrEl: TSelectorOrEl, options?: ClickOptions) {
   const $el = await select(selectorOrEl);
   await $el.waitForClickable();
   await $el.click(options);
@@ -59,7 +60,7 @@ export async function clickTab(tabText: string) {
 
 export async function isDisplayed(
   selectorOrEl: TSelectorOrEl,
-  waitForOptions?: WebdriverIO.WaitForOptions,
+  waitForOptions?: WaitForOptions,
 ) {
   if (waitForOptions) {
     try {
@@ -74,14 +75,14 @@ export async function isDisplayed(
 
 export async function waitForDisplayed(
   selectorOrEl: TSelectorOrEl,
-  options?: WebdriverIO.WaitForOptions,
+  options?: WaitForOptions,
 ) {
   await (await select(selectorOrEl)).waitForDisplayed(options);
 }
 
 export async function waitForClickable(
   selectorOrEl: TSelectorOrEl,
-  options?: WebdriverIO.WaitForOptions,
+  options?: WaitForOptions,
 ) {
   await (await select(selectorOrEl)).waitForClickable(options);
 }
@@ -92,7 +93,7 @@ export function waitForText(text: string) {
 
 export async function waitForEnabled(
   selectorOrEl: TSelectorOrEl,
-  options?: WebdriverIO.WaitForOptions,
+  options?: WaitForOptions,
 ) {
   await (await select(selectorOrEl)).waitForEnabled(options);
 }

diff --git a/test/regular/widgets/alertbox.ts b/test/regular/widgets/alertbox.ts
@@ -14,7 +14,7 @@ import { CustomizationService } from '../../../app/services/customization';
 import { assertFormContains, fillForm } from '../../helpers/modules/forms';
 import { sleep } from '../../helpers/sleep';
 
-useSpectron();
+useSpectron({pauseIfFailed: false });
 
 test('AlertBox for Twitch', t => testAlertbox(t, 'twitch'));
 test('AlertBox for YouTube', t => testAlertbox(t, 'youtube'));
@@ -40,12 +40,14 @@ async function testAlertbox(t: TExecutionContext, platform: TPlatform) {
 
   // create alertbox
   await enableNewAlertbox();
-  await addSource('Alertbox', 'Alertbox', false);
+  await addSource('Alertbox', 'Alertbox');
+  await sleep(500);
   await openAlertboxSettings();
 
   // click through all available alert types and check for console errors
   const alerts = platformAlerts[platform];
   for (const alert of alerts) await click(`span*=${alert}`);
+  await sleep(500);
 
   // test the donation alert settings
   if (platform === 'twitch') await testDonationAlert();

diff --git a/test/screentest/screenshoter.ts b/test/screentest/screenshoter.ts
@@ -7,8 +7,7 @@ import { afterAppStart, TExecutionContext } from '../helpers/spectron';
 import { PerformanceService } from '../../app/services/performance';
 import { IAudioServiceApi } from '../../app/services/audio';
 import { WindowsService } from '../../app/services/windows';
-import NativeImage = Electron.NativeImage;
-import {focusChild, focusMain} from "../helpers/modules/core";
+import { focusChild, focusMain } from '../helpers/modules/core';
 
 const fs = require('fs');
 const CONFIG = getConfig();
@@ -69,7 +68,7 @@ export async function makeScreenshots(t: TExecutionContext, title = '') {
     processedConfigs.push(configStr);
 
     await applyConfig(t, config);
-    await t.context.app.browserWindow.capturePage().then((imageBuffer: NativeImage) => {
+    await t.context.app.browserWindow.capturePage().then(imageBuffer => {
       const testName = t.title.replace('afterEach hook for ', '');
       const screenshotName = title ? `${testName}_${title}` : testName;
       const imageFileName = `${screenshotName}__${configInd}.png`;

diff --git a/test/tsconfig.json b/test/tsconfig.json
@@ -37,7 +37,8 @@
       "socket.io-client",
       "tapable",
       "uuid",
-      "vue-tsx-support"
+      "vue-tsx-support",
+      "webdriverio/async",
     ]
   },
   "exclude": [