[MM-T820][MM-T821] Toggle developer Tools in the Menu Bar (#1990)

* test: MM-T820 MMT821 helper functions to be used by tests

* test: MM-T820 keyboard shortcut opens dev tools for Application Wrapper

* test: MM-T820 open dev tools for Application Wrapper through menu, Menu Dropdown > View > Developer Tools for Application Wrapper

* test: MM-T821 open dev tools for Current Server through menu, Menu Dropdown > View > Developer Tools for Current Server

* test: MM-T820 MMT821 scope tests in separate describe block

* test: MM-T820 MMT821 add help functions used for basic interactions with dev tools console

* test: MM-T820 MMT821 add constant setting values used to configure interactions with dev tools console

* test: MM-T820 check if dev tools is pointing to index.html file by sending alert dialogue from dev tool and detecting the dialog event on page, when opening dev tool using keyboard shortcut

* test: MM-T820 check if dev tools is pointing to index.html file by sending alert dialogue from dev tool and detecting the dialog event on page, when opening dev tool using menu

* test: MM-T821 check if dev tools is pointing to current application server by sending alert dialogue from dev tool and detecting the dialog event on page, when opening dev tool using menu

* test: MM-T820 MMT821 increase timeout value of test suite as more time is needed for dev tools to be ready for interaction

* test: MM-T820 MMT821 remove extra whitespace when sending command to dev tools console

* test: MM-T820 MMT821 split check for dev tools open and where dev tools
is pointing to as 2 different parts

test: MM-T820 MMT821 fix lint errors

e2e/specs/menu_bar/view_menu.test.js

@@ -20,8 +20,57 @@ async function setupPromise(window, id) {
     return true;
 }
 
+function robotTextInput(txt) {
+    for (let i = 0; i < txt.length; i++) {
+        robot.keyTap(txt[i]);
+    }
+}
+
+function robotKeyTaps(n, ...params) {
+    for (let i = 0; i < n; i++) {
+        robot.keyTap(...params);
+    }
+}
+
+function openDevToolsCommandPalette() {
+    const modifierKeys = process.platform === 'darwin' ? ['command'] : ['control'];
+    robotKeyTaps(1, 'p', [...modifierKeys, 'shift']);
+}
+
+async function openDevToolsConsoleTab() {
+    openDevToolsCommandPalette();
+    await asyncSleep(1500);
+    robotTextInput('con', 1200); // search for console command
+    await asyncSleep(500);
+    robotKeyTaps(1, 'enter');
+}
+
+async function clickThreeDotMenu(app) {
+    const mainWindow = app.windows().find((window) => window.url().includes('index'));
+    await mainWindow.click('button.three-dot-menu');
+}
+
+async function windowEventPromise(app) {
+    return new Promise((res) => {
+        app.on('window', (window) => {
+            res(window);
+        });
+    });
+}
+
+function windowsDialogEventPromises(app, limit) {
+    return app.windows().map((window) => {
+        return new Promise((res, rej) => {
+            window.on('dialog', (e) => {
+                res(e);
+            });
+            setTimeout(rej, limit);
+        });
+    });
+}
+
 describe('menu/view', function desc() {
-    this.timeout(30000);
+    this.timeout(60000);
 
     const config = env.demoMattermostConfig;
 
@@ -162,4 +211,151 @@ describe('menu/view', function desc() {
             result.should.be.true;
         });
     });
+
+    describe('Toggle DevTools', () => {
+        const CharPerMin = 600;
+        const DelayBetweenInputs = 500; // ms
+        const DevToolsLoadTime = 7000; // ms
+        const DevToolsLoadTimeBuffer = 10000; // ms
+        const MaxDialogEventWaitTime = 6000; // ms
+        beforeEach(async () => {
+            const loadingScreen = this.app.windows().find((window) => window.url().includes('loadingScreen'));
+            await loadingScreen.waitForSelector('.LoadingScreen', {state: 'hidden'});
+        });
+
+        it('MM-T820 should open dev tools for Application Wrapper when pressing keyboard shortcuts', async () => {
+            const macModifierKeys = ['command', 'alt'];
+            const winModifierKeys = ['shift', 'control'];
+
+            const windowLoaded = windowEventPromise(this.app);
+            robotKeyTaps(1, 'i', process.platform === 'darwin' ? macModifierKeys : winModifierKeys);
+
+            const window = await windowLoaded;
+            const windowTitle = await window.title();
+
+            const isWindowTitleDevTools = windowTitle === 'DevTools';
+            isWindowTitleDevTools.should.be.true;
+        });
+
+        it.skip('MM-T820 dev tools opened through keyboard shortcuts should point to index.html', async () => {
+            const macModifierKeys = ['command', 'alt'];
+            const winModifierKeys = ['shift', 'control'];
+
+            robotKeyTaps(1, 'i', process.platform === 'darwin' ? macModifierKeys : winModifierKeys);
+
+            // check the url
+            await asyncSleep(DevToolsLoadTime);
+            await openDevToolsConsoleTab();
+
+            const allWindowsDialogEventListener = windowsDialogEventPromises(this.app, MaxDialogEventWaitTime);
+            await asyncSleep(DelayBetweenInputs);
+            robot.typeStringDelayed('alert (window?.location?.href)', CharPerMin);
+            await asyncSleep(DelayBetweenInputs);
+            robotKeyTaps(1, 'enter');
+
+            const windowAlertDialog = await Promise.any(allWindowsDialogEventListener);
+            const alertMsg = windowAlertDialog?.message();
+            const devToolsPointsToIndexHtml = alertMsg.endsWith('index.html');
+            devToolsPointsToIndexHtml.should.be.true;
+        });
+
+        it('MM-T820 should open dev tools for Application Wrapper through menu, View > Developer Tools for Application Wrapper', async () => {
+            const windowLoaded = windowEventPromise(this.app);
+
+            if (process.platform === 'darwin') {
+                robotKeyTaps(1, 'f2', ['control']);
+                robotKeyTaps(3, 'right');
+                robotKeyTaps(1, 'enter');
+                robotKeyTaps(2, 'up');
+                robotKeyTaps(1, 'enter');
+            } else {
+                await clickThreeDotMenu(this.app);
+                robotKeyTaps(3, 'down');
+                robotKeyTaps(1, 'right');
+                robotKeyTaps(2, 'up');
+                robotKeyTaps(2, 'enter');
+            }
+
+            const window = await windowLoaded;
+            const windowTitle = await window.title();
+
+            const isWindowTitleDevTools = windowTitle === 'DevTools';
+            isWindowTitleDevTools.should.be.true;
+        });
+
+        it.skip('MM-T820 dev tools opened through menu, should point to index.html', async () => {
+            if (process.platform === 'darwin') {
+                robotKeyTaps(1, 'f2', ['control']);
+                robotKeyTaps(3, 'right');
+                robotKeyTaps(1, 'enter');
+                robotKeyTaps(2, 'up');
+                robotKeyTaps(1, 'enter');
+            } else {
+                await clickThreeDotMenu(this.app);
+                robotKeyTaps(3, 'down');
+                robotKeyTaps(1, 'right');
+                robotKeyTaps(2, 'up');
+                robotKeyTaps(2, 'enter');
+            }
+
+            // check the url
+            await asyncSleep(DevToolsLoadTime);
+            await openDevToolsConsoleTab();
+
+            const allWindowsDialogEventListener = windowsDialogEventPromises(this.app, MaxDialogEventWaitTime);
+            await asyncSleep(DelayBetweenInputs);
+            robot.typeStringDelayed('alert (window?.location?.href)', CharPerMin);
+            await asyncSleep(DelayBetweenInputs);
+            robotKeyTaps(1, 'enter');
+
+            const windowAlertDialog = await Promise.any(allWindowsDialogEventListener);
+            const alertMsg = windowAlertDialog?.message();
+            const devToolsPointsToIndexHtml = alertMsg.endsWith('index.html');
+            devToolsPointsToIndexHtml.should.be.true;
+        });
+
+        it('MM-T821 should open dev tools for Current Server through menu, View > Developer Tools for Current Server', async () => {
+            const windowLoaded = windowEventPromise(this.app);
+            if (process.platform === 'darwin') {
+                robotKeyTaps(1, 'f2', ['control']);
+                robotKeyTaps(3, 'right');
+                robotKeyTaps(1, 'enter');
+                robotKeyTaps(1, 'up');
+                robotKeyTaps(1, 'enter');
+            } else {
+                await clickThreeDotMenu(this.app);
+                robotKeyTaps(3, 'down');
+                robotKeyTaps(1, 'right');
+                robotKeyTaps(1, 'up');
+                robotKeyTaps(1, 'enter');
+            }
+
+            const window = await windowLoaded;
+            const windowTitle = await window.title();
+
+            const isWindowTitleDevTools = windowTitle === 'DevTools';
+            isWindowTitleDevTools.should.be.true;
+        });
+
+        it.skip('MM-T821 dev tools should point to localhost:8065 ', async () => {
+            // check the url
+            await asyncSleep(DevToolsLoadTimeBuffer);
+            await openDevToolsConsoleTab();
+
+            const allWindowsDialogEventListener = windowsDialogEventPromises(this.app, MaxDialogEventWaitTime);
+            await asyncSleep(DelayBetweenInputs);
+            robot.typeStringDelayed('alert (window?.location?.href)', CharPerMin);
+            await asyncSleep(DelayBetweenInputs);
+            robotKeyTaps(1, 'enter');
+
+            const windowAlertDialog = await Promise.any(allWindowsDialogEventListener);
+
+            const alertMsg = windowAlertDialog?.message();
+            const devToolsPointsToIndexHtml = alertMsg.endsWith('index.html');
+            devToolsPointsToIndexHtml.should.be.false;
+
+            const devToolsPointsToCurrentServer = alertMsg.includes('localhost:8065');
+            devToolsPointsToCurrentServer.should.be.true;
+        });
+    });
 });