e2e(hooks): expose tray menu actions for Playwright and fix history navigation. (#3886)

yasserfaraazkhan · web-flow · commit 73496d620e65 · 2026-07-07T16:05:14.000+05:30
diff --git a/src/app/menus/appMenu/history.test.js b/src/app/menus/appMenu/history.test.js
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import WebContentsManager from 'app/views/webContentsManager';
+import TabManager from 'app/tabs/tabManager';
 import {localizeMessage} from 'main/i18nManager';
 
 import createHistoryMenu from './history';
@@ -14,13 +15,18 @@ jest.mock('app/views/webContentsManager', () => ({
     getFocusedView: jest.fn(),
 }));
 
+jest.mock('app/tabs/tabManager', () => ({
+    getCurrentActiveTabView: jest.fn(),
+}));
+
 describe('app/menus/appMenu/history', () => {
     const mockView = {
         goToOffset: jest.fn(),
     };
 
     beforeEach(() => {
         WebContentsManager.getFocusedView.mockReturnValue(mockView);
+        TabManager.getCurrentActiveTabView.mockReturnValue(undefined);
         localizeMessage.mockImplementation((id) => {
             const translations = {
                 'main.menus.app.history': '&History',
@@ -119,19 +125,39 @@ describe('app/menus/appMenu/history', () => {
 
         it('should handle back click when no focused view is available', () => {
             WebContentsManager.getFocusedView.mockReturnValue(null);
+            TabManager.getCurrentActiveTabView.mockReturnValue(mockView);
             const menu = createHistoryMenu();
             const backItem = menu.submenu.find((item) => item.label === 'Back');
 
-            // Should not throw an error when no view is available
             expect(() => backItem.click()).not.toThrow();
+            expect(mockView.goToOffset).toHaveBeenCalledWith(-1);
         });
 
         it('should handle forward click when no focused view is available', () => {
             WebContentsManager.getFocusedView.mockReturnValue(null);
+            TabManager.getCurrentActiveTabView.mockReturnValue(mockView);
+            const menu = createHistoryMenu();
+            const forwardItem = menu.submenu.find((item) => item.label === 'Forward');
+
+            expect(() => forwardItem.click()).not.toThrow();
+            expect(mockView.goToOffset).toHaveBeenCalledWith(1);
+        });
+
+        it('should handle back click when no view is available', () => {
+            WebContentsManager.getFocusedView.mockReturnValue(null);
+            TabManager.getCurrentActiveTabView.mockReturnValue(null);
+            const menu = createHistoryMenu();
+            const backItem = menu.submenu.find((item) => item.label === 'Back');
+
+            expect(() => backItem.click()).not.toThrow();
+        });
+
+        it('should handle forward click when no view is available', () => {
+            WebContentsManager.getFocusedView.mockReturnValue(null);
+            TabManager.getCurrentActiveTabView.mockReturnValue(null);
             const menu = createHistoryMenu();
             const forwardItem = menu.submenu.find((item) => item.label === 'Forward');
 
-            // Should not throw an error when no view is available
             expect(() => forwardItem.click()).not.toThrow();
         });
 
diff --git a/src/app/menus/appMenu/history.ts b/src/app/menus/appMenu/history.ts
@@ -1,9 +1,14 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import TabManager from 'app/tabs/tabManager';
 import WebContentsManager from 'app/views/webContentsManager';
 import {localizeMessage} from 'main/i18nManager';
 
+function getHistoryNavigationView() {
+    return WebContentsManager.getFocusedView() ?? TabManager.getCurrentActiveTabView();
+}
+
 export default function createHistoryMenu() {
     return {
         id: 'history',
@@ -12,13 +17,13 @@ export default function createHistoryMenu() {
             label: localizeMessage('main.menus.app.history.back', 'Back'),
             accelerator: process.platform === 'darwin' ? 'Cmd+[' : 'Alt+Left',
             click: () => {
-                WebContentsManager.getFocusedView()?.goToOffset(-1);
+                getHistoryNavigationView()?.goToOffset(-1);
             },
         }, {
             label: localizeMessage('main.menus.app.history.forward', 'Forward'),
             accelerator: process.platform === 'darwin' ? 'Cmd+]' : 'Alt+Right',
             click: () => {
-                WebContentsManager.getFocusedView()?.goToOffset(1);
+                getHistoryNavigationView()?.goToOffset(1);
             },
         }],
     };
diff --git a/src/app/menus/appMenu/view.test.js b/src/app/menus/appMenu/view.test.js
@@ -280,6 +280,7 @@ describe('app/menus/appMenu/view', () => {
 
         it('should handle reload when no focused view is available', () => {
             WebContentsManager.getFocusedView.mockReturnValue(null);
+            TabManager.getCurrentActiveTabView.mockReturnValue(null);
 
             localizeMessage.mockImplementation((id) => {
                 if (id === 'main.menus.app.view.reload') {
@@ -296,6 +297,23 @@ describe('app/menus/appMenu/view', () => {
             expect(() => reloadMenuItem.click()).not.toThrow();
         });
 
+        it('should reload active tab when menu open clears focused view', () => {
+            WebContentsManager.getFocusedView.mockReturnValue(null);
+            TabManager.getCurrentActiveTabView.mockReturnValue(mockView);
+
+            localizeMessage.mockImplementation((id) => {
+                if (id === 'main.menus.app.view.reload') {
+                    return 'Reload';
+                }
+                return id;
+            });
+
+            const menu = createViewMenu();
+            const reloadMenuItem = menu.submenu.find((item) => item.label === 'Reload');
+            reloadMenuItem.click();
+            expect(mockView.reload).toHaveBeenCalledWith('https://example.com/current-page');
+        });
+
         it('should show developer mode options when developer mode is enabled', () => {
             DeveloperMode.enabled.mockReturnValue(true);
             DeveloperMode.get.mockImplementation((key) => {
diff --git a/src/app/menus/appMenu/view.ts b/src/app/menus/appMenu/view.ts
@@ -111,7 +111,7 @@ export default function createViewMenu() {
         label: localizeMessage('main.menus.app.view.reload', 'Reload'),
         accelerator: 'CmdOrCtrl+R',
         click() {
-            const view = WebContentsManager.getFocusedView();
+            const view = WebContentsManager.getFocusedView() ?? TabManager.getCurrentActiveTabView();
             if (view) {
                 view.reload(view.currentURL);
             }
@@ -120,7 +120,7 @@ export default function createViewMenu() {
         label: localizeMessage('main.menus.app.view.clearCacheAndReload', 'Clear Cache and Reload'),
         accelerator: 'Shift+CmdOrCtrl+R',
         click() {
-            const view = WebContentsManager.getFocusedView();
+            const view = WebContentsManager.getFocusedView() ?? TabManager.getCurrentActiveTabView();
             if (view) {
                 WebContentsManager.clearCacheAndReloadView(view.id);
             }
diff --git a/src/main/e2e/trayMenu.ts b/src/main/e2e/trayMenu.ts
@@ -1,32 +1,101 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {Menu} from 'electron';
+import type {Menu, MenuItem} from 'electron';
+
+function normalizeTrayMenuLabel(value: string): string {
+    return value.toLowerCase().replace(/&/g, '').replace(/[.\u2026…]+$/u, '').trim();
+}
+
+function trayMenuLabelMatches(itemLabel: string, label: string, truncated: string): boolean {
+    const normalizedItem = normalizeTrayMenuLabel(itemLabel);
+    const normalizedTarget = normalizeTrayMenuLabel(label);
+    return itemLabel === label ||
+        itemLabel === truncated ||
+        normalizedItem === normalizedTarget;
+}
+
+function clickTrayMenuItemsByRole(items: MenuItem[], role: string): boolean {
+    for (const item of items) {
+        if (item.role === role && typeof item.click === 'function') {
+            item.click();
+            return true;
+        }
+        if (item.submenu?.items && clickTrayMenuItemsByRole(item.submenu.items, role)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function findTrayMenuItemByLabelPredicate(
+    items: MenuItem[],
+    predicate: (normalizedLabel: string, itemLabel: string) => boolean,
+): MenuItem | null {
+    for (const item of items) {
+        const itemLabel = typeof item.label === 'string' ? item.label : '';
+        if (
+            predicate(normalizeTrayMenuLabel(itemLabel), itemLabel) &&
+            item.enabled !== false &&
+            item.visible !== false &&
+            typeof item.click === 'function'
+        ) {
+            return item;
+        }
+        if (item.submenu?.items) {
+            const nested = findTrayMenuItemByLabelPredicate(item.submenu.items, predicate);
+            if (nested) {
+                return nested;
+            }
+        }
+    }
+    return null;
+}
+
+function clickTrayMenuItems(items: MenuItem[], label: string, truncated: string): boolean {
+    const item = findTrayMenuItemByLabelPredicate(items, (normalized, raw) =>
+        trayMenuLabelMatches(raw, label, truncated) || normalized === normalizeTrayMenuLabel(label),
+    );
+    if (!item) {
+        return false;
+    }
+    item.click();
+    return true;
+}
+
+function clickTraySettingsMenuItem(items: MenuItem[]): boolean {
+    const item = findTrayMenuItemByLabelPredicate(items, (normalized) =>
+        normalized === 'settings' ||
+        normalized === 'preferences' ||
+        normalized.startsWith('settings') ||
+        normalized.startsWith('preferences'),
+    );
+    if (!item) {
+        return false;
+    }
+    item.click();
+    return true;
+}
 
 export function createClickTrayMenuItem(getTrayMenu: () => Menu) {
     return (label: string) => {
-        const truncated = label.length > 50 ? `${label.slice(0, 50)}...` : label;
+        if (label.startsWith('role:')) {
+            const role = label.slice('role:'.length);
+            if (!clickTrayMenuItemsByRole(getTrayMenu().items, role)) {
+                throw new Error(`Tray menu item with role not found: ${role}`);
+            }
+            return;
+        }
 
-        function clickItem(items: Electron.MenuItem[]): boolean {
-            for (const item of items) {
-                const itemLabel = typeof item.label === 'string' ? item.label : '';
-                if (
-                    (itemLabel === label || itemLabel === truncated) &&
-                    item.enabled !== false &&
-                    item.visible !== false &&
-                    typeof item.click === 'function'
-                ) {
-                    item.click();
-                    return true;
-                }
-                if (item.submenu?.items && clickItem(item.submenu.items)) {
-                    return true;
-                }
+        if (label === 'tray:settings') {
+            if (!clickTraySettingsMenuItem(getTrayMenu().items)) {
+                throw new Error('Tray settings menu item not found');
             }
-            return false;
+            return;
         }
 
-        if (!clickItem(getTrayMenu().items)) {
+        const truncated = label.length > 50 ? `${label.slice(0, 50)}...` : label;
+        if (!clickTrayMenuItems(getTrayMenu().items, label, truncated)) {
             throw new Error(`Tray menu item not found: ${label}`);
         }
     };
