deps: update to electron 10.1.5

package.json

@@ -143,7 +143,7 @@
         "serve-static": "^1.13.2",
         "simple-git": "^2.21.0",
         "source-map-loader": "^1.1.1",
-        "spectron": "^10.0.1",
+        "spectron": "^12.0.0",
         "terser-webpack-plugin": "^4.2.3",
         "ts-jest": "^26.4.3",
         "ts-loader": "^8.0.7",
@@ -162,7 +162,7 @@
         "axe-core": "4.0.2",
         "axios": "^0.20.0",
         "classnames": "^2.2.6",
-        "electron": "8.4.1",
+        "electron": "10.1.5",
         "electron-log": "^4.2.4",
         "electron-updater": "^4.3.5",
         "idb-keyval": "^3.2.0",

pipeline/scripts/download-electron-mirror.js

@@ -27,7 +27,7 @@ if (
     process.exit(1);
 }
 
-const assetNumber = '5424028';
+const assetNumber = '6179765';
 
 const downloadMirrors = async () => {
     await downloadElectronArtifact('electron', 'node_modules/electron/dist');

src/electron/main/main.ts

@@ -37,7 +37,7 @@ const electronAutoUpdateCheck = new AutoUpdaterClient(autoUpdater);
 const createWindow = () => {
     mainWindow = new BrowserWindow({
         show: false,
-        webPreferences: { nodeIntegration: true },
+        webPreferences: { nodeIntegration: true, enableRemoteModule: true },
         titleBarStyle: 'hidden',
         width: mainWindowConfig.defaultWidth,
         height: mainWindowConfig.defaultHeight,

src/tests/electron/common/scan-for-accessibility-issues.ts

@@ -39,7 +39,7 @@ async function runAxeScan(
         },
     };
 
-    const executeOutput = await spectronClient.executeAsync(
+    const axeResults = await spectronClient.executeAsync(
         (options, selectorInEvaluate, done) => {
             const elementContext =
                 selectorInEvaluate === null ? document : { include: [selectorInEvaluate] };
@@ -55,11 +55,6 @@ async function runAxeScan(
         selector,
     );
 
-    // This is how webdriverio indicates success
-    expect(executeOutput).toHaveProperty('status', 0);
-
-    const axeResults = executeOutput.value;
-
     return prettyPrintAxeViolations(axeResults);
 }
 

src/tests/electron/common/view-controllers/app-controller.ts

@@ -4,15 +4,18 @@ import { AndroidSetupStepId } from 'electron/platform/android/setup/android-setu
 import { Application } from 'spectron';
 import { AndroidSetupViewController } from 'tests/electron/common/view-controllers/android-setup-view-controller';
 import { DeviceConnectionDialogController } from 'tests/electron/common/view-controllers/device-connection-dialog-controller';
-import { SpectronAsyncClient } from 'tests/electron/common/view-controllers/spectron-async-client';
+import {
+    getSpectronAsyncClient,
+    SpectronAsyncClient,
+} from 'tests/electron/common/view-controllers/spectron-async-client';
 import { DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS } from 'tests/electron/setup/timeouts';
 import { AutomatedChecksViewController } from './automated-checks-view-controller';
 
 export class AppController {
     public client: SpectronAsyncClient;
 
     constructor(public app: Application) {
-        this.client = app.client as any;
+        this.client = getSpectronAsyncClient(app.client, app.browserWindow);
     }
 
     public async stop(): Promise<void> {
@@ -71,13 +74,15 @@ export class AppController {
 
         await this.client.waitUntil(
             async () => {
-                const classes = await this.client.getAttribute<string>('body', 'class');
+                const classes = await this.client.getAttribute('body', 'class');
                 return expectedHighContrastMode === classes.includes(highContrastThemeClass);
             },
-            DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
-            `was expecting body element ${
-                expectedHighContrastMode ? 'with' : 'without'
-            } class high-contrast-theme`,
+            {
+                timeout: DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
+                timeoutMsg: `was expecting body element ${
+                    expectedHighContrastMode ? 'with' : 'without'
+                } class high-contrast-theme`,
+            },
         );
     }
 
@@ -102,14 +107,14 @@ export class AppController {
     ): Promise<void> {
         await this.client.waitUntil(
             async () => {
-                const executeOutput = await this.client.executeAsync((prop, done) => {
+                return await this.client.executeAsync((prop, done) => {
                     done((window as any)[prop] != null);
                 }, propertyName);
-
-                return executeOutput.status === 0 && executeOutput.value === true;
             },
-            DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
-            `was expecting window.${propertyName} to be defined`,
+            {
+                timeout: DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
+                timeoutMsg: `was expecting window.${propertyName} to be defined`,
+            },
         );
     }
 }

src/tests/electron/common/view-controllers/automated-checks-view-controller.ts

@@ -48,7 +48,7 @@ export class AutomatedChecksViewController extends ViewController {
 
     public async setToggleState(toggleSelector: string, newState: boolean): Promise<void> {
         await this.waitForSelector(toggleSelector);
-        const oldState = await this.client.getAttribute<string>(toggleSelector, 'aria-checked');
+        const oldState = await this.client.getAttribute(toggleSelector, 'aria-checked');
 
         const oldStateBool = oldState.toLowerCase() === 'true';
         if (oldStateBool !== newState) {

src/tests/electron/common/view-controllers/spectron-async-client.ts

@@ -1,39 +1,89 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { SpectronWindow } from 'spectron';
+import { SpectronClient, SpectronWindow } from 'spectron';
 import * as WebDriverIO from 'webdriverio';
 
-// spectron 10.0.1 includes @types/webdriverio, whose absence
-// we worked around when initially consuming spectron.
-// @types/webdriver lacks promises, so this file adds
-// promise-based signatures that our e2e code can rely on.
-// @types/webdriver has been superceded by improved types
-// in webdriverio 5 directly, but Spectron has not consumed them
+// This file worked around incorrect or missing spectron/webdriverio
+// typings in the past. These types are improved in spectron 12.0.0,
+// so this file is now just a single place to update the usages. We
+// can remove this extra layer by updating individual end-to-end
+// tests/controllers to consume SpectronClient directly.
+
+export function getSpectronAsyncClient(client: SpectronClient, browserWindow: SpectronWindow) {
+    const typedAsyncClient: SpectronAsyncClient = {
+        browserWindow,
+        $: (selector: string) => client.$(selector),
+        $$: (selector: string) => client.$$(selector),
+        click: async (selector: string) => {
+            const element = await client.$(selector);
+            return await element.click();
+        },
+        execute: (script: string | ((...args: any[]) => void), ...args: any[]) =>
+            client.execute(script, ...args),
+        executeAsync: (script: string | ((...args: any[]) => void), ...args: any[]) =>
+            client.executeAsync(script, ...args),
+        getAttribute: async (selector: string, attributeName: string) => {
+            const element = await client.$(selector);
+            return await element.getAttribute(attributeName);
+        },
+        getText: async (selector: string) => {
+            const element = await client.$(selector);
+            return await element.getText();
+        },
+        isEnabled: async (selector: string) => {
+            const element = await client.$(selector);
+            return await element.isEnabled();
+        },
+        keys: (keys: string) => client.keys(keys),
+        pause: (milliseconds: number) => client.pause(milliseconds),
+        waitForEnabled: async (selector: string, milliseconds?: number, reverse?: boolean) => {
+            const element = await client.$(selector);
+            return await element.waitForEnabled({
+                timeout: milliseconds,
+                reverse,
+            });
+        },
+        waitForExist: async (
+            selector: string,
+            milliseconds?: number,
+            reverse?: boolean,
+            timeoutMsg?: string,
+        ) => {
+            const element = await client.$(selector);
+            return await element.waitForExist({
+                timeout: milliseconds,
+                reverse,
+                timeoutMsg,
+            });
+        },
+        waitUntil: (condition: () => Promise<Boolean>, options?: WebDriverIO.WaitUntilOptions) =>
+            client.waitUntil(condition, options),
+    };
+    return typedAsyncClient;
+}
 
 export interface SpectronAsyncClient {
-    // https://github.com/electron-userland/spectron/blob/cd733c4bc6b28eb5a1041ed79eef5563e75432ae/lib/api.js#L311
     browserWindow: SpectronWindow;
-
-    $(selector: string): Promise<WebDriverIO.RawResult<any>>;
-    $$(selector: string): Promise<WebDriverIO.RawResult<any>[]>;
-    click(selector?: string): Promise<void>;
+    $(selector: string): Promise<WebDriverIO.Element>;
+    $$(selector: string): Promise<WebDriverIO.Element[]>;
+    click(selector: string): Promise<void>;
     executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): Promise<any>;
     execute(script: string | ((...args: any[]) => void), ...args: any[]): Promise<any>;
-    getAttribute<P>(selector: string, attributeName: string): Promise<P>;
+    getAttribute(selector: string, attributeName: string): Promise<string>;
     getText(selector?: string): Promise<string>;
     isEnabled(selector?: string): Promise<boolean>;
     keys(keys: string): Promise<void>;
     pause(milliseconds: number): Promise<void>;
     waitForEnabled(selector: string, milliseconds?: number, reverse?: boolean): Promise<boolean>;
-    waitForExist(selector: string, milliseconds?: number, reverse?: boolean): Promise<boolean>;
-    waitUntil(
-        condition: () =>
-            | boolean
-            | Promise<boolean>
-            | (WebDriverIO.Client<WebDriverIO.RawResult<any>> & WebDriverIO.RawResult<any>),
-        timeout?: number,
+    waitForExist(
+        selector: string,
+        milliseconds?: number,
+        reverse?: boolean,
         timeoutMsg?: string,
-        interval?: number,
+    ): Promise<boolean>;
+    waitUntil(
+        condition: () => Promise<Boolean>,
+        options?: WebDriverIO.WaitUntilOptions,
     ): Promise<boolean>;
 }

src/tests/electron/common/view-controllers/view-controller.ts

@@ -29,23 +29,23 @@ export abstract class ViewController {
                 async () => {
                     return (await this.client.$$(selector)).length === expectedNumber;
                 },
-                timeout,
-                `expected to find ${expectedNumber} matches for selector ${selector} within ${timeout}ms`,
+                {
+                    timeout,
+                    timeoutMsg: `expected to find ${expectedNumber} matches for selector ${selector} within ${timeout}ms`,
+                },
             );
         });
     }
 
     public async waitForSelectorToDisappear(
         selector: string,
-        timeout: number = DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
+        timeout: number = DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS * 2,
     ): Promise<void> {
         await this.screenshotOnError(async () =>
-            this.client.waitUntil(
-                async () => {
-                    const selected = await this.client.$(selector);
-                    return selected.value === null;
-                },
+            this.client.waitForExist(
+                selector,
                 timeout,
+                true,
                 `was expecting element by selector ${selector} to disappear`,
             ),
         );

src/tests/electron/tests/automated-checks-view.test.ts

@@ -15,7 +15,7 @@ import { AutomatedChecksViewController } from 'tests/electron/common/view-contro
 import { commonAdbConfigs, setupMockAdb } from 'tests/miscellaneous/mock-adb/setup-mock-adb';
 import { testResourceServerConfig } from '../setup/test-resource-server-config';
 import { androidTestConfigs } from 'electron/platform/android/test-configs/android-test-configs';
-import { RawResult } from 'webdriverio';
+import { Element } from 'webdriverio';
 
 describe('AutomatedChecksView', () => {
     let app: AppController;
@@ -151,7 +151,7 @@ describe('AutomatedChecksView', () => {
         const expectedScreenshotImage =
             'data:image/png;base64,' + axeRuleResultExample.axeContext.screenshot;
 
-        const actualScreenshotImage = await automatedChecksView.client.getAttribute<string>(
+        const actualScreenshotImage = await automatedChecksView.client.getAttribute(
             ScreenshotViewSelectors.screenshotImage,
             'src',
         );
@@ -161,11 +161,8 @@ describe('AutomatedChecksView', () => {
     it('ScreenshotView renders expected number/size of highlight boxes in expected positions', async () => {
         await automatedChecksView.waitForScreenshotViewVisible();
 
-        const styles = await automatedChecksView.client.getAttribute<string[]>(
-            ScreenshotViewSelectors.highlightBox,
-            'style',
-        );
-
+        const boxes = await automatedChecksView.client.$$(ScreenshotViewSelectors.highlightBox);
+        const styles = await Promise.all(boxes.map(async b => await b.getAttribute('style')));
         const actualHighlightBoxStyles = styles.map(extractPositionStyles);
         verifyHighlightBoxStyles(actualHighlightBoxStyles, [
             { width: 10.7407, height: 6.04167, top: 3.28125, left: 89.2593 },
@@ -209,29 +206,25 @@ describe('AutomatedChecksView', () => {
         });
     }
 
-    const setupWindowForCommandBarReflowTest = async (
-        narrowFactor: number,
-    ): Promise<RawResult<any>> => {
+    const setupWindowForCommandBarReflowTest = async (narrowFactor: number): Promise<Element> => {
         await app.setFeatureFlag(UnifiedFeatureFlags.leftNavBar, true);
 
         const width = narrowModeThresholds.collapseCommandBarThreshold - narrowFactor;
 
         app.client.browserWindow.restore();
         app.client.browserWindow.setSize(width, height);
 
-        // Note: the following call returns a different type of object than is specified
-        // by the typescript return type when the element is found
         return automatedChecksView.client.$(AutomatedChecksViewSelectors.leftNavHamburgerButton);
     };
 
     it('command bar reflows when narrow mode threshold is crossed', async () => {
         const result = await setupWindowForCommandBarReflowTest(2);
-        expect(result.value).not.toBeNull();
+        expect(await result.isExisting()).toBe(true);
     });
 
     it('command bar does not reflow when narrow mode threshold is not crossed', async () => {
         const result = await setupWindowForCommandBarReflowTest(0);
-        expect(result.value).toBeNull();
+        expect(await result.isExisting()).toBe(false);
     });
 
     const waitForFluentLeftNavToDisappear = async (): Promise<void> => {
@@ -244,7 +237,7 @@ describe('AutomatedChecksView', () => {
         const result = await automatedChecksView.client.$(
             AutomatedChecksViewSelectors.fluentLeftNav,
         );
-        expect(result.state).toBe('failure');
+        expect(await result.isExisting()).toBe(false);
     };
 
     it('hamburger button click opens and closes left nav', async () => {